ฉันไม่สามารถช่วยตัวเองเขียนเกี่ยวกับปลั๊กอินนี้ มันเป็นหนึ่งในสิ่งที่มีความคิดสร้างสรรค์มากที่สุดที่ผมเคยเห็นทำกับ jQuery เป็นชื่อที่บอกคุณก่อนหลังจากที่คุณได้กลิ่นกระทำบางอย่างใช่มั้ย? ลองดูที่ภาพที่นี่:

ปลั๊กอินช่วยให้คุณสามารถแสดงภาพสองภาพของสิ่งเดียวกันในช่วงเวลาที่แตกต่างกันแสดงความแตกต่างบาง แน่นอนว่าเราสามารถเข้าใจความแตกต่างเมื่อสองภาพจะปรากฏเคียงข้างกัน แต่ซ้อนในที่อื่น ๆ และมีการเลื่อนไปเลื่อนพวกเขาและเห็นความแตกต่างเพียงน่ากลัวและนั่นคือสิ่งที่เราเรียกว่าความคิดสร้างสรรค์ ชุดของการสาธิตอยู่ที่นี่ http://www.catchmyfame.com/jquery/demo/8/ . นอกจากนี้เลื่อนเป็นราบรื่นและเมื่อคุณคลิกที่ส่วนหนึ่งของภาพใด ๆ เลื่อนเคอร์เซอร์มาถึงได้อย่างราบรื่น - ค่อนข้างน่าประทับใจ

คนที่แต่งตัวประหลาดที่ http://www.catchmyfame.com ได้งานที่ดีจริงๆ เราคาดหวังเลื่อนแนวตั้งถ้าเป็นไปได้จากรุ่นถัดไปของปลั๊กอินนี้ ขอให้สนุกกับมัน

ฉันได้รับเสมอเป็นแฟนใหญ่ของตารางปลั๊กอิน jQuery jqGrid มันสามารถจัดการงานค่อนข้างซับซ้อนและมีความซับซ้อน แต่ฉันไม่ชอบ UI มันก่อน ฉันมีการแก้ไข CSS ของพวกเขาเพื่อให้สามารถนำเสนอให้กับลูกค้า ฉันยังใช้ flexigrid สำหรับงานที่เรียบง่าย มันเป็นเรื่องง่ายมากทีเดียวที่จะทำงานร่วมกับ แต่ไม่มีผู้ใดของพวกเขาไม่มีที่ไหนเลยใกล้ชิดเพื่อเอา​​ชนะแจ็คสโลคัม EXT JS กริด Ext หนักสำหรับฉันเป็นฉันได้เรียนรู้พวกเขาและในที่สุดก็พบว่าการใช้งานของฉันไม่จำเป็นต้องมีความรู้สึกสก์ท็อปเป็น ExtJS ให้ และเป็นแฟนตัวยงของ jQuery ฉันมักจะต้องการที่จะมีปลั๊กอินตารางที่ทำงานใกล้กับ ExtJS ตาราง ตอนนี้ดูที่นี้

Awsome ขวา? ใช่ jqGrid trirand ที่จะขับเคลื่อนในขณะนี้โดย jQuery UI การ มันค่อนข้างจะเรียบร้อยและรวดเร็วในขณะนี้ คุณสามารถปรับแต่งรูปแบบจากเว็บไซต์ jQuery UI การเช่นกัน ไม่มีการพูดถึงมากขึ้นตอนนี้เพียงแค่กินมันที่นี่ http://www.trirand.com/jqgrid35/jqgrid.html

ดังนั้นจึงไม่กะพริบหลังจากทั้งหมดที่จะทำเวทมนตร์ทั้งหมด! เราได้เห็นและยังคงเห็นสิ่งมหัศจรรย์ทำแฟลชและเวทมนตร์ หนึ่งในสิ่งที่เย็นที่ได้รับการพัฒนาเป็น pageflip ผมเห็นว่าเป็นครั้งแรกเมื่อฉันกำลังเล่นกับแฟลชใน 2002-2003 ฉันเดาใน flashkit และ actionscripts.org คุณสามารถดูรุ่นโปรที่ดีมากของสิ่งนั้น ที่นี่ . แต่สำหรับพวกเราที่ต้องการมากที่สุดในสิ่งที่ทำใน jQuery - ในที่สุดมีทางเลือกที่จะว่าหน้าสิ่งที่พลิก มันไม่ใช่อย่างเต็มที่ทางเลือกของแฟลช แต่ไม่เลวสำหรับการใช้งานหน้าพลิกผลน้อยที่สุด

นั่นเป็นวิธีที่ดูเหมือนกับปลั๊กอินที่เรียกว่า jFlip เขียนโดย Renato Formato ที่ http://www.jquery.info/scripts/jFlip/demo.html

สาธิตการใช้งานบนหน้าเว็บที่มีการตั้งค่าที่แตกต่างกับบางตัวเลือก และฉันถูกสร้างขึ้นเป็นหนึ่งเดียวกับบางส่วนของรถยนต์ที่ความฝันของผม ที่นี่

หวังว่าคุณชอบความคิดริเริ่มโดย Renato

นี่คือการโพสต์สั้นมากของวิธีการที่เราสามารถสร้างเมนูนำทางเคลื่อนไหวกับ jQuery โดยไม่ต้องปลั๊กอินใด ๆ คุณต้องได้เห็นเมนูนำทางแนวนอนหรือ veritical ที่ขยายและหดขนาดของมันเมื่อโรลโอเวอร์ ก่อนที่เหล่านี้กรอบจาวาสคริปต์มาเราต้องทำค่อนข้างมากของรหัสที่จะได้รับสิ่งที่ทำ ทำไม? การจัดการที่เบราว์เซอร์ข้ามโง่ ผมไม่ต้องการที่จะเริ่มต้นใน IE

ตกลงนี่คือสิ่งที่ เรากำลังเพียงแค่ใช้เรียงลำดับรายการที่จะทำให้เมนูในแนวนอนที่ขยายและสัญญา รหัสคือตายง่าย ลองดูที่มาร์กอัปแรก

 <div id="navcontainer"> <ul id="navlist"> <li> <a href="http://www.google.com"> Google </ a> </ li> <li> <a href = "http://www.yahoo.com"> Yahoo </ a> </ li> <a <li> href="http://www.msn.com"> MSN </ a> </ li> <li> <a href="http://www.lycos.com"> Lycos </ a> </ li> <li> <a href="http://www.baidu.com"> Baidu </ > </ li> </ ul> </ div> 

ดังนั้นเราจึงมีบางรายการที่มี ดังนั้นทำให้พวกเขาปรากฏเช่นเมนูแนวนอนเราจะต้อง css ที่ซึ่งมีลักษณะเช่นนี้บาง

 : inline ; } #navcontainer ul li li {display: อินไลน์;} # navcontainer UL li 

และส่วนสุดท้าย .. เต้นรำทำให้พวกเขาเมื่อวางเมาส์ ค่อนข้างง่ายด้วยฟังก์ชั่นการเคลื่อนไหว เพียงไม่กี่บรรทัดเหล่านี้จะทำเคล็ดลับ มีลักษณะ

	 ( ) { $ ( "#navlist $ (function () {$ ("# navlist 

นั่นแหล่ะ! ดูในการกระทำ

คุณเบื่อกับ lightboxes มากเกินไป thickboxes การซ้อนหน้าต่าง? คุณต้องการสิ่งที่แกลเลอรี่แบบอินไลน์ครับ? อาจจะเป็นที่คุณทำ ผมเคยได้ยินจากบางส่วนของลูกค้า (ลูกค้าเก่า) ว่าพวกเขาไม่ชอบหมดสตินี้เมื่อ lightboxes thickboxes, ดังนั้นจะทำอย่างไรแล้ว สิ่งหนึ่งที่เมื่อ U คิดของบางสิ่งบางอย่างให้ลองดีครั้งแรกใน 80% ของกรณีที่คุณจะหาทางออกให้บางคนได้ทำแล้ว มันไม่ใช่ศตวรรษที่ของนิวตันก็ศตวรรษที่ 21 ดังนั้นคนจำนวนมากหลังจากหลายสิ่งหลายอย่าง และเป็นคนเยอรมันชื่อคริสโตSchüßlerมาช่วยเหลือเราจาก lightboxes สามัญ มันเรียกว่า jQuery popeye สุดท้าย

ฉันไม่ต้องการที่จะทำให้เรื่องนี้อีกต่อไป เพียงแค่ได้เห็นมันในการดำเนินการ . และฉันแน่ใจว่าคุณจะวางแผนที่จะใช้ปลั๊กอินนี้ในบางส่วนของโครงการต่อไปของคุณ

ดังนั้น AJAX AJAX และ AJAX ว่าเป็นสิ่งที่เราทำวันนี้อย่างกว้างขวาง จะช่วยประหยัดเวลาเพิ่มการเจริญเติบโตและช่วยให้คุณมีความรู้สึกของการใช้ชนิดของโปรแกรมซอฟต์แวร์รู้สึก มีหลายวิธีที่จะใช้ AJAX กับห้องสมุดจำนวนมากกำลัง แต่เป็นคุณสามารถดูเว็บไซต์นี้สำหรับ jQuery, เราจะดูที่พื้นฐานหรือบางทีอาจจะมีบางขั้นสูง AJAX ประเพณี

คุณจะทำสิ่งที่เราต้องการ?

ห้องสมุด jQuery (แน่นอน)
สคริปต์ PHP เล็ก ๆ

ขอเริ่มพูดคุย ใน jQuery มีพื้น 6 ประเภทของวิธีการที่จะดำเนินการ AJAX เหล่านี้เป็น

1. $. อาแจ็กซ์ (ตัวเลือก)
2. $. ได้รับ (URL ข้อมูลโทรกลับ)
3. $. getJSON (URL ข้อมูลการติดต่อกลับ)
4. $. getScript (URL โทรกลับ)
5. โหลด (URL ข้อมูลการติดต่อกลับ)
6. $ โพสต์. (URL, ข้อมูล, โทรกลับ,

นอกเหนือจากหมายเลข 1 ทุกวิธีการอื่น ๆ ใช้ $. Ajax ภายใน ดังนั้นนั่นหมายความว่า $. อาแจ็กซ์ () เป็นฟังก์ชั่นแม่ของเราสำหรับการดำเนินงาน AJAX jQuery ลองดูที่วิธีการที่ $. อาแจ็กซ์ () ดูเหมือนว่า

 msg ) ; } } ) ; การตอบสนอง "+ msg);}}); 

ที่สวยมัน พารามิเตอร์ชนิดใช้ "GET" หรือ "POST" ซึ่งหมายความว่าคุณสามารถส่ง requestion AJAX เช่น POST หรือ GET (ผมชอบโพสต์เสมอไป) ส่วนที่เหลือของพารามิเตอร์จะสวยอธิบายตนเองถ้าคุณดูที่รหัสอีกครั้ง

ตอนนี้เรากำลังจะทำให้สคริปต์ AJAX ขนาดเล็กที่อ่านลิงค์ของแท็กเชื่อมโยงหลายมิติ (<a>) และโหลดคำขอในบางองค์ประกอบ div ในเอกสาร

ครั้งแรกที่เราใช้ HTML ปกติของเอกสาร PHP ซึ่งจะมีลักษณะเช่นนี้

  <DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 <head>
	 <title> ทดสอบการเชื่อมโยงอาแจ็กซ์ </ title>
	 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <script type="text/javascript" src="jquery-1.2.6.min.js"> </ script>	
 </ head>
 <body>
 </ body> </ html> 

ตอนนี้เราจะเพิ่มการเชื่อมโยงไปยังเอกสารบางอย่าง สำหรับชนิดเมนูที่ดีขึ้นของการมองเราจะใช้ UL> LI และการเชื่อมโยง ที่จะมีลักษณะเช่นนี้

  id="nav"> <ul
	 <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> โหลดในกอง 1 </ a> </ li>
	 <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> โหลดในกอง 2 </ a> </ li>
	 <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> โหลดในกอง 3 </ a> </ li>
	 <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> โหลดในกอง 4 </ a> </ li>
 </ UL> 

ที่คุณสามารถดูเราได้วางการเชื่อมโยงในองค์ประกอบของรายการภายในวัตถุเรียงลำดับรายการ ใช้เวลามองใกล้ที่คุณสมบัติของแท็ก <a> เรามีแอตทริบิวต์ href ชั้นเรียนและ rel ซึ่งมีลักษณะที่แตกต่างกันไม่มีอะไรที่ดีกว่างลิงก์ปกติ ถ้าคุณเห็นเราได้ให้แอตทริบิวต์ rel บางชื่อ div คือ div1, div2 .. ดังนั้นเมื่อ ซึ่งหมายความว่าเราต้องการการตอบสนองของ href ที่จะโหลดลงใน divs เหล่านั้น วิธีการทำ? ขอเพิ่ม divs เหล่านั้นเป็นครั้งแรก

  <span> DIV -1 </ span>
 <div id="div1" class="content_loader"> </ div>
 <span> DIV -2 </ span>
 <div id="div2" class="content_loader"> </ div>
 <span> DIV -3 </ span>
 <div id="div3" class="content_loader"> </ div>
 <span> DIV -4 </ span>
 <div id="div4" class="content_loader"> </ div> 

และส่วนที่จริงตอนนี้ - เราได้ให้การเชื่อมโยง "ชั้น ajax_link" เราจะเพียงแบบไดนามิกเพิ่มการกระทำ Ajax เชื่อมโยงเท่านั้นที่มีชื่อชั้นที่เรียกว่า "ajax_link" นรกเราจะไม่เชื่อมโยงทั้งหมดของหน้าจะมีการกระทำของอาแจ็กซ์เราจะทำอย่างไร

ดังนั้นในการโหลดเอกสารที่เราต้องการทำเช่นนี้

  . ready ( function ( ) { $ (document). พร้อม (ฟังก์ชัน () {
         ) . click ( function ( ) { $ ("a.ajax_link"). คลิก (ฟังก์ชัน () {
             this ) ; current_link $ = $ (this);
             $. อาแจ็กซ์ ({
                 , ประเภท: "โพสต์",
                 ( "href" ) , URL:. $ current_link attr ("href")
                 ( e ) { ความสำเร็จ: ฟังก์ชัน (E) {
                     + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ current_link attr ("rel")) HTML (e);
                 }
             });
             ; กลับเท็จ;
         });
     }); 

ผมขออธิบายสคริปต์บิต เหตุการณ์ document.ready เป็นเหตุการณ์ที่จะถูกเรียกที่โหลดหน้า และจากนั้นเราจะเรียงลำดับของการกำหนดรหัสบางอย่างเกี่ยวกับเหตุการณ์คลิกของการเชื่อมโยงที่มีคลาส "ajax_link" การทำเช่นนี้ $ current_link = $ (this); จะช่วยให้มีการเชื่อมโยงวัตถุในปัจจุบันสามารถใช้งานได้ภายในฟังก์ชันโทรกลับ และเรามี

$ ("#" + $ current_link.attr ("rel")). Html (จ)

ซึ่งหมายความว่า $ ("div_id") HTML (server_response) และเราได้ตั้งพระราม URL ของฟังก์ชัน $ Ajax แบบไดนามิกที่มี URL:.. $ current_link.attr ("href") ดังนั้นตอนนี้ทุกวิธีที่บรรดา "ทั้งหมดเชื่อมโยงเหล่านั้นที่มีคลาส" ajax_link "- เพิ่มตัวจัดการเหตุการณ์ค - แล้วดำเนินการและขอ AJAX การเชื่อมโยง href poperty และโหลดการตอบสนองใน div ที่มี id ที่ตรงกับ" rel แอตทริบิวต์ "ของ การเชื่อมโยง " และผลตอบแทนการเท็จป้องกันไม่ให้การทำงานของการเชื่อมโยงเช่นการเชื่อมโยงปกติ

อยากเห็นว่าการกระทำ? นี่มันไป

และคุณสามารถ ดาวน์โหลดแหล่งที่มา เช่นกัน

ในส่วนถัดไปของการกวดวิชาเล็ก ๆ น้อย ๆ นี้เราจะใช้สิ่งเดียวกัน แต่มีนิด ๆ หน่อย ๆ ของความสะดวกสบาย

การประยุกต์ใช้วิธีการที่ง่ายขึ้น

ทุกอย่างยังคงเป็นเกือบเดียวกัน เราก็จะเปลี่ยนวิธีการ Ajax ที่นี่ ดังนั้นแทนการเขียนบล็อกทั้ง Ajax $. เราสามารถบรรลุสิ่งเดียวกันกับต่อไปนี้

  . ready ( function ( ) { $ (document). พร้อม (ฟังก์ชัน () {
 ) . click ( function ( ) { $ ("a.ajax_link"). คลิก (ฟังก์ชัน () {
 + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; โหลด $ ("#" + $ (นี้) attr ("rel").) ($ (นี้) attr ("href").).
 ; กลับเท็จ;
 });
 }); 

มันมากที่ซับซ้อนน้อยลงในขณะนี้ใช่มั้ย? วิธีการโหลดโหลดเนื้อหา Ajax ภายในองค์ประกอบที่จะแนบมากับ ถ้า $ ("# somediv_id"). โหลด ("mypage.php") ก็จะพยายามที่จะโหลดเนื้อหา mypage.php 'อยู่ในนั้น สวยเรียบง่าย, huh? แต่ฉันขอแนะนำให้คุณได้ใช้วิธีการหลัก (แสดงในส่วนแรก)

ในไฟล์ซิปที่มีไฟล์อื่นที่เรียกว่าคน ajax2.php ซึ่งแสดงให้เห็นถึงเมธอนี้ซึ่งมีผลเหมือนกัน

ดังนั้น AJAX ไม่เป็นยากอย่างที่มันฟังใช่มั้ย? เมื่อคุณเป็นได้อย่างคล่องแคล่วมากกับการดำเนินงาน AJAX, คุณจะสร้างเวทมนตร์

ขอขอบคุณที่อ่านครับ

กับความก้าวหน้าของ DHTML เราสามารถทำสิ่งต่างๆมากมายที่มีเพียงแค่กระพริบตา เราทุกคนได้ใช้การซ้อนทับหน้าต่างหรือ lightboxes ที่จุดของเวลาบางส่วนในวันนี้ แต่บางครั้งก็กลายเป็นสิ่งจำเป็นเพื่อป้องกันส่วนหนึ่งของหน้าหรือองค์ประกอบที่เฉพาะเจาะจงเช่น DIV เพื่อให้ผู้คนไม่สามารถที่จะเล่นกับหน้าของคุณเมื่อคุณไม่ต้องการให้พวกเขา เช่นถ้ามีใครบางคนทำให้ความคิดเห็นในช่องแสดงความคิดเห็นที่คุณไม่ต้องการให้คนคลิกไปที่ความเห็นอื่น ๆ ขณะที่กรอกมันขึ้นมา สิ่งที่ต้องทำแล้ว ดีมีวิธีแก้ปัญหา jQuery เรียบร้อยของ คุณเพียงแค่ปิดกั้นพวกเขาในขณะที่แสดงความคิดเห็น และอาจจะมีมากในกรณีเช่นว่าเมื่อเราต้องการที่จะปิดกั้นทั้งหน้าหรือองค์ประกอบบางอย่าง jQuery BlockUI มาช่วยเหลือ

มันถูกสร้างขึ้นในขั้นต้นเพื่อป้องกันทั้งหน้าด้วยข้อความ แต่ตอนนี้ก็สามารถป้องกันองค์ประกอบของหน้าหรือแม้กระทั่งการแสดงคำรามเหมือนข้อความ ตรวจสอบ ตัวอย่างที่นี่ . เอกสารเป็นจำนวนมากที่ดีและยุติธรรมของตัวอย่างโค้ดจะได้รับ ใช้มันในโปรแกรมของคุณ หากคุณมีปัญหาใด ๆ ที่ใช้มันทิ้งฉันแสดงความคิดเห็นที่นี่

ชนิดทำหน้าผลงานกับ Flash บนเว็บไซต์ของคุณได้กลายเป็นของล้าสมัย วันนี้กับเครื่องได้เร็วขึ้นและเบราว์เซอร์รุ่นใหม่จริงๆสามารถเตะก้นบางอย่างกับ Javascript และ CSS JQuery มีวิธีการอย่างมากที่จะจัดการกับผลบางอย่าง ภาพเคลื่อนไหวทั้งหมดมาจากฐานวิธีการที่เรียกว่า "ชีวิต" เคลื่อนไหวมัน tweens คุณสมบัติขององค์ประกอบ DOM เพื่อให้เรื่องยาวสั้นจะดูที่นี้

ดังนั้นคุณจะได้คลิกแล้วและเห็นใช่มั้ย? ตกลงถ้าคุณดูรหัสที่มันค่อนข้างง่าย

  $ (document). พร้อม (ฟังก์ชัน () {
		 var hover_in_easing = "easeOutExpo";
		 var hover_out_easing = "easeOutBounce";
		 . $ (". info_container") แสดง ();
		 $ ("div.portfolio_div"). เลื่อน (ฟังก์ชัน () {
			 . $ (this) หา ("info_container.") เคลื่อนไหว ({ด้านบน: "0px"}, {ระยะเวลา: 400 บรรเทา: hover_in_easing}).
		 } ฟังก์ชัน () {
			 . $ (this) หา ("info_container.") เคลื่อนไหว ({ด้านบน: "100px"}, {ระยะเวลา: 500 บรรเทา: hover_out_easing}).
		 });
                 / / 100 px คือขนาดของหน้ากาก
	 }); 

จะใช้ฟังก์ชั่นการเคลื่อนไหวเคลื่อนไหวหน้ากากมากกว่าภาพที่ถูกเก็บซ่อนไว้โดยการวางตำแหน่งที่ค่อนข้าง และด้วยความผ่อนคลายปลั๊กอินเราบรรลุบางผลเย็นของกำยำเมื่อคุณเลื่อนออกจากภาพ คุณสามารถใส่ HTML ใด ๆ ภายใน info_container องค์ประกอบ DIV ตราบใดที่มันไม่ได้ไปเกินขอบเขต มองไปที่สไตล์และคุณจะพบว่ามันเป็น gramatical คุณสามารถกำหนดขนาดโดยการปรับเปลี่ยนการเรียน div

ดาวน์โหลดมา

แรงบันดาลใจ: http://dibusoft.com/portfolio

เคยเห็นคำอธิบายที่โปร่งใสผู้ที่อยู่ในภาพ? คำอธิบายภาพ poping ออกจากด้านล่างหรือด้านบนอธิบายภาพ? ฉันแน่ใจว่าคุณมี มีจำนวนมากของสคริปต์เช่นที่ และนี่รุ่น jQuery ที่ชื่นชอบของที่เรามา

คุณสามารถใส่ธรรมดาข้อความ HTML หรือสิ่งที่มี เพียงแค่ดูที่หน้าบ้านของพวกเขาปลั๊กอินและมันสวยอธิบายไว้อย่างดี ไม่มีเทคนิคที่น่ารังเกียจเป็นสิ่งจำเป็น

http://masterfidgeter.com/projects/captify/

ทำให้หน้าภาพของคุณดูดีกับมัน

สัปดาห์นี้ - มีนาคม 20,09 jQueryMagic เลือก colorbox jQuery เป็นเลือกของสัปดาห์ ทุกท่านเคยได้ยินมาก Lightbox, thickbox greyboxes และซ้อนทับหน้าต่างที่แตกต่างกัน จะได้รับที่ดีขึ้นในรุ่นใหม่ล่าสุดของปลั๊กอิน นี้หินจริงๆ แต่งได้อย่างเต็มที่และใช้งานง่าย มันมีน้ำหนักเบาและดูดี นอกจากนี้ยังมีพวงของตัวอย่างที่จะรวมกับห้องสมุด

colorbox

ไปที่หน้าโครงการ ที่นี่ .