หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

สำหรับ Nette Framework

สคริปต์ยูทิลิตี้ที่ยืดหยุ่นสำหรับ AJAX รองรับตัวอย่าง การเปลี่ยนเส้นทาง ฯลฯ

ใบอนุญาต

เอ็มไอที

การพึ่งพาอาศัยกัน

เจคิวรี 1.7

การติดตั้ง

  1. คัดลอก nette.ajax.js ไปยังไดเร็กทอรีของคุณด้วยไฟล์ Javascript (คุณสามารถใช้ Bower ได้)
  2. เชื่อมโยงไฟล์ในเทมเพลตของคุณ (โดยปกติจะอยู่ใน app/@layout.latte หลังจาก jQuery!)
  3. ใส่รูทีนการเริ่มต้นไว้ที่ใดที่หนึ่ง: 
 $ ( function ( ) {
	$ . nette . init ( ) ;
} ) ;

การใช้งาน

ตามค่าเริ่มต้น ลิงก์และแบบฟอร์มทั้งหมดที่มีคลาส CSS ajax จะถูก ajaxified ทันที พฤติกรรมสามารถเปลี่ยนแปลงได้ในการกำหนดค่าส่วนขยาย init วัตถุที่ส่งคืนโดยการเรียก var init = $.nette.ext('init'); มีอุปกรณ์ประกอบฉากเหล่านี้:

ชื่อ ค่าเริ่มต้น คำอธิบาย
linkSelector a.ajax ตัวเลือก CSS สำหรับลิงก์
formSelector form.ajax ตัวเลือก CSS สำหรับแบบฟอร์ม
buttonSelector input.ajax[type="submit"], input.ajax[type="image"] ตัวเลือก CSS สำหรับองค์ประกอบแบบฟอร์มที่รับผิดชอบในการส่ง

Ajaxification เชื่อมโยงกับเหตุการณ์ click ( submit ) ในเนมสเปซ nette Ajaxification ของลิงก์เฉพาะสามารถยกเลิกได้ด้วยโค้ดเช่นนี้ (ในขณะที่การโทรกลับอื่น ๆ จะยังคงอยู่): 

 $ ( 'a.no-ajax' ) . off ( 'click.nette' ) ;

หรือง่ายกว่านั้น: 

 $ ( 'a.no-ajax' ) . netteAjaxOff ( ) ;

ส่วนขยาย

Ajaxification ครอบคลุมการเรียก $.ajax() แบบมาตรฐานและขยายออกไปด้วยเหตุการณ์ต่างๆ มากมาย ซึ่งสามารถเชื่อมโยงกับการโทรกลับแบบกำหนดเองได้ ชุดของการเรียกกลับที่เกี่ยวข้องเรียกว่า ส่วนขยาย การประมวลผลตัวอย่างความสามารถในการยกเลิกคำขอที่ทำงานอยู่โดย Escape ... ฟังก์ชันทั้งหมดนี้ถูกนำมาใช้ในรูปแบบของส่วนขยาย การลงทะเบียนส่วนขยายมีลักษณะดังนี้: 

 $ . nette . ext ( 'name' , {
    event1 : function ( ) {
    } ,
    event2 : ...
} , {
    // ... shared context (this) of all callbacks
} ) ;

อาร์กิวเมนต์แรกคือชื่อ มันเป็นทางเลือก

อาร์กิวเมนต์ที่สองควรเป็นแฮชของการโทรกลับพร้อมคีย์ที่สอดคล้องกับชื่อของเหตุการณ์ กิจกรรมเหล่านี้มีอยู่:

ชื่อ ข้อโต้แย้ง คำอธิบาย
init โทรมาเพียงครั้งเดียวในช่วง $.nette.init(); เรียก.
load requestHandler ควรมีอะแจ็กซิฟิเคชัน requestHandler สามารถเชื่อมโยงกับเหตุการณ์ UI เพื่อเริ่มต้นคำขอ AJAX
before jqXHR settings ถูกเรียกทันทีก่อนที่จะดำเนินการคำขอ AJAX หากส่งคืน FALSE คำขอจะไม่เริ่มต้น
start jqXHR settings ถูกเรียกทันทีหลังจากเริ่มต้นคำขอ AJAX
success payload , status , jqXHR , settings ถูกเรียกหลังจากคำขอ AJAX เสร็จสมบูรณ์ เทียบเท่ากับ $.ajax( ... ).done( ... .
complete jqXHR , status , settings ถูกเรียกหลังจากคำขอ AJAX เสร็จสิ้นทุกครั้ง เทียบเท่ากับ $.ajax( ... ).always( ... .
error jqXHR , status , error , settings ถูกเรียกในกรณีที่คำขอ AJAX ล้มเหลว เทียบเท่ากับ $.ajax( ... ).fail( ... .

ส่วนขยายสามารถปิดใช้งานได้: 

 $ . nette . ext ( 'name' , null ) ;

สามารถกำหนดค่าส่วนขยายได้ บริบทสามารถรับได้โดย: 

 var context = $ . nette . ext ( 'name' ) ;

ส่วนขยายเริ่มต้น

ชื่อ คำอธิบาย
validation จำกัด ajaxification ให้คลิก/ส่งโดยไม่ต้องใช้ปุ่ม Ctrl , Alt หรือ Shift , ลิงก์ในเครื่อง และการส่งแบบฟอร์มที่ถูกต้อง
forms เพิ่มการรองรับการส่งแบบฟอร์มพร้อมข้อมูลทั้งหมด ชื่อของปุ่มที่คลิก และพิกัดของการคลิกในอินพุต [type=image]
snippets อัปเดต DOM ด้วยอาร์เรย์ snippets เพื่อตอบสนอง (การจัดการ Nette เริ่มต้นของตัวอย่าง Latte)
redirect ดำเนินการเปลี่ยนเส้นทางไปยัง URL อื่น (เมื่อ $this->redirect() ถูกเรียกในพรีเซนเตอร์) สามารถแทนที่ได้ด้วยการขยาย history
unique ช่วยให้คำขอทำงานในเวลาเดียวกันเท่านั้น
abort อนุญาตให้ผู้ใช้ยกเลิกการร้องขอโดยการกด Escape
init ajaxification เริ่มต้น

เคล็ดลับที่เป็นประโยชน์

คุณสมบัติพิเศษทั้งหมดนี้คาดว่าจะเปิดส่วนขยายเริ่มต้นทั้งหมดไว้

data-ajax-off

ลิงก์หรือองค์ประกอบ ajaxified อื่น ๆ สามารถมีแอตทริบิวต์ข้อมูลที่กำหนดเอง data-ajax-off ประกอบด้วยชื่อของส่วนขยายที่ควรปิดการใช้งานสำหรับคำขอ Ajax ที่เริ่มทำงานในองค์ประกอบ 

 < a n:href =" do! " class =" ajax " data-ajax-off =" snippets " >

$.nette.ajax() คุณยังสามารถใช้มันใน แบบนี้: 

 $ . nette . ajax ( {
	url : ... ,
	off : [ 'snippets' ]
} ) ;

data-ajax-pass (ในส่วนขยาย validation )

Ajaxification ขององค์ประกอบทำให้มั่นใจได้ว่า e.preventDefault() จะถูกเรียก คุณลักษณะนี้สามารถป้องกันได้ หากคุณต้องการให้มีการเรียกกลับเพิ่มเติม

data-ajax-append (ในส่วนขยาย snippets )

เนื้อหาใหม่ของตัวอย่างข้อมูลที่มีแอตทริบิวต์นี้จะไม่แทนที่เนื้อหาเก่า แต่จะถูกผนวกเข้ากับเนื้อหานั้นแทน

data-ajax-prepend (ในส่วนขยาย snippets )

เนื้อหาใหม่ของตัวอย่างข้อมูลที่มีแอตทริบิวต์นี้จะไม่แทนที่เนื้อหาเก่า แต่จะถูกเติมไว้หน้าเนื้อหานั้นแทน

data-ajax-validate (ในส่วนขยาย validation )

คลิกที่ลิงค์หรือส่งแบบฟอร์มผ่านการตรวจสอบเงื่อนไขต่างๆ คุณสามารถเปลี่ยนรายการใดก็ได้: 

 < a n:href =" do! " class =" ajax " data-ajax-validate =' {"keys":false} ' >

และในกรณีของ data-ajax-off คุณสามารถส่งผ่านเข้าไปใน $.nette.ajax() ได้โดยตรง 

 $ . nette . ajax ( {
	url : ... ,
	validate : {
		keys : false
	}
} ) ;

ซึ่งหมายความว่าการคลิกลิงก์ด้วย Ctrl จะไม่เปิดแท็บใหม่ แต่จะ ajaxify คำขอ

ขึ้นอยู่กับส่วนขยายอื่น ๆ

ในกรณีที่มีการเรียกกลับ คุณสามารถเรียก this.ext() เพื่อรับบริบทของส่วนขยายอื่นๆ หากคุณเพิ่ม true เป็นอาร์กิวเมนต์ที่สอง สคริปต์จะล้มเหลวหากไม่มีส่วนขยายนั้น 

 $ . nette . ext ( {
	success : function ( payload ) {
		var snippets = this . ext ( 'snippets' , true ) ;
		...
	}
} ) ;
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด