มาดูการเรนเดอร์ก่อน:
รหัสเพจจิ้งง่าย ๆ :
1. คำอธิบายผล:
ปลั๊กอิน jQuery ที่สามารถแสดงได้โดยไม่ต้องปนเปื้อน
ปลั๊กอิน JQuery Paging - jQuery.page.js ใช้งานง่ายมากและมีเอฟเฟกต์ที่ยอดเยี่ยม
2. วิธีการโทร:
$ (". tcdpageCode"). createPage ({pagecount: 10, ปัจจุบัน: 1, backfn: ฟังก์ชัน (p) {// คลิกวิธีการโทรกลับ, p คือหมายเลขหน้าปัจจุบัน}}); Pagecount: จำนวนหน้าทั้งหมดปัจจุบัน: หน้าปัจจุบัน3. รหัสการห่อหุ้ม JS
// ปลั๊กอิน pagination/** ch **/(ฟังก์ชั่น ($) {var ms = {init: function (obj, args) {return (function () {ms.fillhtml (obj, args); ms.bindevent (obj, args); obj.empty (); && args.pagecount! = 4) {obj.append ('<a href = "javascript:;">'+1+ '</a>'); -2, end = args.current+2; 1) {ถ้าเริ่มต้น! = args.current) {obj.append ('<a href = "javascript:;">' + เริ่ม + '</a>'); args.pagecount> 5) {obj.append ('<span> ... </span>'); // หน้าถัดไป (args.current <args.pagecount) {obj.append ('<a href = "javascript:;"> หน้าถัดไป </a>'); }, // การเชื่อมโยงเหตุการณ์ BindEvent: ฟังก์ชั่น (obj, args) {return (function () {obj.on ("คลิก", "a.tcdnumber", ฟังก์ชัน () {var current = parseint ($ (นี่) .Text ()); if (typeof (args.backfn) == "function") {args.backfn (ปัจจุบัน);}}); Ms.Fillhtml (obj, {"current": current-1, "pagecount": args.pagecount}); parseint (obj.children ("span.current"). text ()); - }}} $ .fn.createPage = ฟังก์ชั่น (ตัวเลือก) {var args = $ .extend ({pagecount: 10, ปัจจุบัน: 1, backfn: function () {}}, ตัวเลือก); Ms.init (นี่, args); }}) (jQuery);4. ใช้ตัวอย่าง:
<! doctype html> <html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta charset = "utf-8"/> <title> Padding: 0; list-style: none;} a {text-decoration: none;} a: hover {text-decoration: none;} .tcdpagecode {padding: 15px 20px; text-allign: left; color: #ccc;} .tcdpagecode a ความสูงของสาย: 25px; Padding: 0 10px; Border: 1px Solid #DDD; มาร์จิ้น: 0 2px; แนวชายแดน: 4px; แนวตั้ง-แนวตั้ง: กลาง;} .tcdpagecode a: โฮเวอร์ {การกำหนดข้อความ: ไม่มี; ชายแดน: 1px ของแข็ง #428bca;} .tcdpagecode span.current {display: inline-block; 2px; สี: #FFF; พื้นหลังสี: #428BCA; ชายแดน: 1px Solid #428BCA; Border-Radius: 4px; แนวตั้ง-แนวตั้ง: กลาง;} .tcdpagecode span.disabled {แสดง: inline-block; ความสูง: 25px; สายไฟ: 25px; padding: 0 10px; #BFBF; Border-Radius: 4px; แนวตั้ง-แนว: middle;} </style> </head> <body> <style> .baidu_ads {ความกว้าง: 960px; ความสูง: 90px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านล่าง: 0; ขอบซ้าย: -480px; Overflow: Hidden;} </style> <div> </div> <span style = "display: none;"> </span> <!-ส่วนรหัสเริ่มต้น-> <div> </div> <pre> วิธีการโทร: $ (". tcdpageCode") createPage ({pagecount: 10 PageCount: จำนวนหน้าทั้งหมด: หน้าปัจจุบัน </pre> </body> <script src = "// www.vevb.com/ajaxjs/jquery.min.js"> </script> <script src = "// www.vevb.com/ajaxjs/jquery.page.js"> $ (". tcdpageCode"). createPage ({pagecount: 6, ปัจจุบัน: 1, backfn: ฟังก์ชัน (p) {console.log (p);}}); </script> <!-ส่วนท้ายของรหัส-> </html>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่าทุกคนจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ JavaScript