1 .coverDiv{
2 display: none;
3 position: fixed;
4 top: 0;
5 left: 0;
6 width: 100%;
7 height: 100%;
8 background-color: rgb(47, 79, 79);
9 opacity: 0.6;
10 filter: alpha(opacity = 60);/*半透明兼容*/
11 }
2：接下來要有一個滾動的塊元素。于是就有了一個塊元素，樣式如下2 display: none;
3 position: fixed;
4 top: 0;
5 left: 0;
6 width: 100%;
7 height: 100%;
8 background-color: rgb(47, 79, 79);
9 opacity: 0.6;
10 filter: alpha(opacity = 60);/*半透明兼容*/
11 }
1 .msgDiv {
2 display: none;
3 border-top-left-radius: 8px;/*注意IE*/
4 border-bottom-left-radius: 8px;
5 position: fixed;
6 right: -300px;
7 width: 300px;
8 height: 400px;
9 top: 50%;
10 margin-top: -200px;
11 background-color: #fff;
12 }
3:水平的滑動，可以使用jQuery提供的animate方法，控制元素的margin-left或者margin-right來實現2 display: none;
3 border-top-left-radius: 8px;/*注意IE*/
4 border-bottom-left-radius: 8px;
5 position: fixed;
6 right: -300px;
7 width: 300px;
8 height: 400px;
9 top: 50%;
10 margin-top: -200px;
11 background-color: #fff;
12 }
1 //提示信息呈現
2 $("觸發提示信息呈現的元素").click(function(){
3 $(".coverDiv").fadeIn(200);
4 $(".msgDiv").css("display","block");
5 $(".msgDiv").animate({
6 marginRight:'300'
7 },300);
8 });
9
10 //點擊遮罩層，提示信息隱藏
11 $(".coverDiv").click(function(){
12 $(".coverDiv").fadeOut(200);
13
14 $(".msgDiv").css("display","block");
15 $(".msgDiv").animate({
16 marginRight:'-=300'
17 },300);
18 });
在此記述了實現該功能的一種思路，拋磚引玉，如果你有更好的思路，歡迎留言共勉。2 $("觸發提示信息呈現的元素").click(function(){
3 $(".coverDiv").fadeIn(200);
4 $(".msgDiv").css("display","block");
5 $(".msgDiv").animate({
6 marginRight:'300'
7 },300);
8 });
9
10 //點擊遮罩層，提示信息隱藏
11 $(".coverDiv").click(function(){
12 $(".coverDiv").fadeOut(200);
13
14 $(".msgDiv").css("display","block");
15 $(".msgDiv").animate({
16 marginRight:'-=300'
17 },300);
18 });
]]>
1 (function($){
2 //演示，僅僅是修改包裝集中元素的字體顏色
3 $.fn.changeColor = function(color){
4 //注意，此處的this已經是包裝集了，不需要再添加$()來包裝為jQuery對象了
5 this.each(function(){
6 //此處的this又是Dom節點了，需要添加$()來包裝為jQuery對象
7 $(this).css("color",color);
8 });
9 //鏈式編程是一個很好的特性，插件一定要返回包裝集來支持鏈式編程
10 return this;
11 };
12 })(jQuery);
13
測試頁面2 //演示，僅僅是修改包裝集中元素的字體顏色
3 $.fn.changeColor = function(color){
4 //注意，此處的this已經是包裝集了，不需要再添加$()來包裝為jQuery對象了
5 this.each(function(){
6 //此處的this又是Dom節點了，需要添加$()來包裝為jQuery對象
7 $(this).css("color",color);
8 });
9 //鏈式編程是一個很好的特性，插件一定要返回包裝集來支持鏈式編程
10 return this;
11 };
12 })(jQuery);
13
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>Jquery_18_基于包裝集的插件</title>
7 <meta name="author" content="Administrator" />
8 <script type="text/javascript" src="jquery-1.11.1.js"></script>
9 <!-- jQuery類庫之后再導入自定義插件 -->
10 <script type="text/javascript" src="jquery.wrapperBasedFun.plugIn.js"></script>
11 <script type="text/javascript">
12 $(function(){
13 //直接對包裝集進行操作，并且支持鏈式編程
14 $("li").changeColor("red").css("fontSize","25px");
15 });
16 </script>
17 </head>
18 <body>
19 <ul>
20 <li>你</li>
21 <li>我</li>
22 <li>他</li>
23 </ul>
24 </body>
25 </html>
26
案例很簡單，只是記錄一下基于包裝集插件的拓展手段。2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>Jquery_18_基于包裝集的插件</title>
7 <meta name="author" content="Administrator" />
8 <script type="text/javascript" src="jquery-1.11.1.js"></script>
9 <!-- jQuery類庫之后再導入自定義插件 -->
10 <script type="text/javascript" src="jquery.wrapperBasedFun.plugIn.js"></script>
11 <script type="text/javascript">
12 $(function(){
13 //直接對包裝集進行操作，并且支持鏈式編程
14 $("li").changeColor("red").css("fontSize","25px");
15 });
16 </script>
17 </head>
18 <body>
19 <ul>
20 <li>你</li>
21 <li>我</li>
22 <li>他</li>
23 </ul>
24 </body>
25 </html>
26
]]>
下面就給出一個插件的案例jquery.plugIn.demo.js，在插件js中，為了兼顧開發效率并縮減代碼量，使用閉包的方式將jQuery關鍵字傳入，在閉包中繼續使用$作為別名。
1 //如果有必要，消除$符號的沖突
2 //jQuery.noConflict();
3 (function($){
4
5 //一個簡單的插件方法
6 $.simple = function(name){
7 alert("hello " + name);
8 };
9
10 //一個稍復雜的插件方法。如果某個函數需要多個參數，或含有可選的參數，使用options（對象的方式）對默認參數進行覆蓋
11 //p1和p2作為必選參數，options參數傳入可選參數將默認數值進行覆蓋
12 $.complex = function(p1,options,p2){
13 //alert(p1 + " " + options + " " + p2);
14
15 var ops = $.extend({
16 p3:'#3',
17 p4:'#4',
18 p5:'#4'
19 }, options||{});
20
21 alert(p1 + " - " + p2 +" - ops:" + "p3=" + ops.p3 + ";p4=" + ops.p4 + ";p5=" + ops.p5);
22
23 };
24 })(jQuery);
25
測試頁面：2 //jQuery.noConflict();
3 (function($){
4
5 //一個簡單的插件方法
6 $.simple = function(name){
7 alert("hello " + name);
8 };
9
10 //一個稍復雜的插件方法。如果某個函數需要多個參數，或含有可選的參數，使用options（對象的方式）對默認參數進行覆蓋
11 //p1和p2作為必選參數，options參數傳入可選參數將默認數值進行覆蓋
12 $.complex = function(p1,options,p2){
13 //alert(p1 + " " + options + " " + p2);
14
15 var ops = $.extend({
16 p3:'#3',
17 p4:'#4',
18 p5:'#4'
19 }, options||{});
20
21 alert(p1 + " - " + p2 +" - ops:" + "p3=" + ops.p3 + ";p4=" + ops.p4 + ";p5=" + ops.p5);
22
23 };
24 })(jQuery);
25
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_16_Jquery插件基礎</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <!--
11 一般來說，插件需要定義在一個單獨的文件中，可以更好的維護
12 *需要在jquery類庫導入之后再導入
13 -->
14 <script type="text/javascript" src="jquery.plugIn.demo.js"></script>
15 <script type="text/javascript">
16 $(function(){
17 $.simple("duyt");
18
19 $.complex("I'am",{p3:"111",p4:"222",p5:"333"},"duyt");
20 $.complex("I'am",{},"duyt");
21 });
22 </script>
23 </head>
24 <body>
25 </body>
26 </html>
27
基于上述兩個簡單的插件方法，就可以試著寫一個具有功能性的插件了，下面實現一個處理長文本標題的小插件jquery.simpleTextCutter.plugIn.js2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_16_Jquery插件基礎</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <!--
11 一般來說，插件需要定義在一個單獨的文件中，可以更好的維護
12 *需要在jquery類庫導入之后再導入
13 -->
14 <script type="text/javascript" src="jquery.plugIn.demo.js"></script>
15 <script type="text/javascript">
16 $(function(){
17 $.simple("duyt");
18
19 $.complex("I'am",{p3:"111",p4:"222",p5:"333"},"duyt");
20 $.complex("I'am",{},"duyt");
21 });
22 </script>
23 </head>
24 <body>
25 </body>
26 </html>
27
1 (function($){
2 //文本截留插件
3 $.toFixedStr = function(OriStr,options){
4 var settings = $.extend({
5 fill:".",//可指定的省略符號
6 length:12,//可指定的保留長度
7 fillLength:3//可指定的省略符號顯示長度，例如"XXX..."
8 },options||{});
9
10 if(OriStr.length >12){
11 OriStr = OriStr.substring(0,12);
12 for(var i = 0;i<settings.fillLength;i++){
13 OriStr+=settings.fill;
14 }
15 }
16 return OriStr;
17 };
18
19 })(jQuery);
20
測試頁面2 //文本截留插件
3 $.toFixedStr = function(OriStr,options){
4 var settings = $.extend({
5 fill:".",//可指定的省略符號
6 length:12,//可指定的保留長度
7 fillLength:3//可指定的省略符號顯示長度，例如"XXX..."
8 },options||{});
9
10 if(OriStr.length >12){
11 OriStr = OriStr.substring(0,12);
12 for(var i = 0;i<settings.fillLength;i++){
13 OriStr+=settings.fill;
14 }
15 }
16 return OriStr;
17 };
18
19 })(jQuery);
20
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_感受插件_簡易文本處理插件</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <script type="text/javascript" src="jquery.simpleTextCutter.plugIn.js"></script>
11 <!-- Date: 2014-12-01 -->
12 <script type="text/javascript">
13 $(function(){
14 $("ul li").each(function(index) {
15 var newStr = $.toFixedStr($(this).text(),{
16 fill:"~",
17 });
18 $(this).text(newStr);
19 });
20 });
21
22 </script>
23 </head>
24 <body>
25 <ul>
26 <li>123你你你444444444444444444</li>
27 <li>456我我我77777777</li>
28 <li>789他他他0000</li>
29 </ul>
30 </body>
31 </html>
32
以上就是實現jQuery插件的一個初步的感受2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_感受插件_簡易文本處理插件</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <script type="text/javascript" src="jquery.simpleTextCutter.plugIn.js"></script>
11 <!-- Date: 2014-12-01 -->
12 <script type="text/javascript">
13 $(function(){
14 $("ul li").each(function(index) {
15 var newStr = $.toFixedStr($(this).text(),{
16 fill:"~",
17 });
18 $(this).text(newStr);
19 });
20 });
21
22 </script>
23 </head>
24 <body>
25 <ul>
26 <li>123你你你444444444444444444</li>
27 <li>456我我我77777777</li>
28 <li>789他他他0000</li>
29 </ul>
30 </body>
31 </html>
32
]]>
剛開始的時候考慮使用ajax請求數據，之后通過js在頁面上填充到指定位置，但是真是懶得給這個ajax請求單獨再配一個請求映射了，干脆直接在后臺把需要的內容全部拼成JSON字符串，直接在前臺解析，分頁。
頁面比較簡單，就不上html代碼了，大概思路就是：兩個“換一換”按鈕分別對應兩套數據，共用一個分頁的方法，分別傳入各自的頁數，顯示對應頁數的內容。當然了，實現“換一換”的方法多種多樣，我在此只是記錄一下自己的思路，歡迎批評指教，拍磚輕拍，愛護新人，3Q。
節約口水，直接上代碼~
1 $(function(){
2
3 //“換一換”功能家居，雜貨點擊計數器
4 var jiajubrandCount = 0;
5 var zahuobrandCount = 0;
6
7 //初始化家居品牌內容
8 jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
9 //初始化雜貨品牌內容
10 zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
11
12 //家居換一換點擊
13 $("#jiajuBrandChange").click(function(){
14 jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
15 });
16
17 //雜貨換一換點擊
18 $("#zahuoBrandChange").click(function(){
19 zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
20 });
21
22 //品牌“換一換”功能
23 //container:目標容器
24 //valSrc:值存放的容器
25 //brandCount:計數
26 function ClickToChangeBrand(container,valSrc,brandCount){
27
28 //$("#" + container).empty();//清空既存內容
29 var s = $("#" + valSrc).val(); //取得品牌所有數據
30 var obj = $.parseJSON(s.toString());//轉換為JSON
31 var totalCount = obj.length;//總記錄數
32 var perPageCount = 20;//預定每頁顯示數
33 var pageCount = 0;//總頁數
34 var actualPerPageCount = 0;//實際每頁的顯示數
35 var strTotal = "";//待打印內容的緩沖變量
36
37 var tempRs = totalCount%perPageCount;//根據實際品牌數計算總頁數
38 if(tempRs!=0){
39 pageCount = parseInt(totalCount/perPageCount) + 1;
40 }
41 else{
42 pageCount = parseInt(totalCount/perPageCount);
43 }
44
45 //取實際每次需要顯示的記錄數，若最后一頁不足一頁的
46 if(brandCount * perPageCount + perPageCount > totalCount){
47 actualPerPageCount = totalCount - brandCount * perPageCount;
48 }
49 else{
50 actualPerPageCount = perPageCount;
51 }
52
53 /* alert("計數器:"+brandCount);
54 alert("實際每頁數:"+actualPerPageCount);
55 alert("預定每頁數:"+perPageCount);
56 alert("總頁數："+ pageCount); */
57
58 //獲取當前頁的內容
59 for(i = brandCount * perPageCount;i < brandCount * perPageCount + actualPerPageCount;i++){
60 //obj[i].title為顯示標題，obj[i].name為該品牌的類目id
61 strTotal += "<a href='' target='_blank'>" + obj[i].title + "</a>";
62 }
63
64 //計數器大于等于頁數的時候歸零
65 brandCount++;
66 if(brandCount>=pageCount){
67 brandCount = 0;
68 }
69
70 //淡出
71 $("#" + container).empty().append(strTotal).hide().stop(true,true).fadeIn("slow");
72
73 return brandCount;
74 }
75 });
2
3 //“換一換”功能家居，雜貨點擊計數器
4 var jiajubrandCount = 0;
5 var zahuobrandCount = 0;
6
7 //初始化家居品牌內容
8 jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
9 //初始化雜貨品牌內容
10 zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
11
12 //家居換一換點擊
13 $("#jiajuBrandChange").click(function(){
14 jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
15 });
16
17 //雜貨換一換點擊
18 $("#zahuoBrandChange").click(function(){
19 zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
20 });
21
22 //品牌“換一換”功能
23 //container:目標容器
24 //valSrc:值存放的容器
25 //brandCount:計數
26 function ClickToChangeBrand(container,valSrc,brandCount){
27
28 //$("#" + container).empty();//清空既存內容
29 var s = $("#" + valSrc).val(); //取得品牌所有數據
30 var obj = $.parseJSON(s.toString());//轉換為JSON
31 var totalCount = obj.length;//總記錄數
32 var perPageCount = 20;//預定每頁顯示數
33 var pageCount = 0;//總頁數
34 var actualPerPageCount = 0;//實際每頁的顯示數
35 var strTotal = "";//待打印內容的緩沖變量
36
37 var tempRs = totalCount%perPageCount;//根據實際品牌數計算總頁數
38 if(tempRs!=0){
39 pageCount = parseInt(totalCount/perPageCount) + 1;
40 }
41 else{
42 pageCount = parseInt(totalCount/perPageCount);
43 }
44
45 //取實際每次需要顯示的記錄數，若最后一頁不足一頁的
46 if(brandCount * perPageCount + perPageCount > totalCount){
47 actualPerPageCount = totalCount - brandCount * perPageCount;
48 }
49 else{
50 actualPerPageCount = perPageCount;
51 }
52
53 /* alert("計數器:"+brandCount);
54 alert("實際每頁數:"+actualPerPageCount);
55 alert("預定每頁數:"+perPageCount);
56 alert("總頁數："+ pageCount); */
57
58 //獲取當前頁的內容
59 for(i = brandCount * perPageCount;i < brandCount * perPageCount + actualPerPageCount;i++){
60 //obj[i].title為顯示標題，obj[i].name為該品牌的類目id
61 strTotal += "<a href='' target='_blank'>" + obj[i].title + "</a>";
62 }
63
64 //計數器大于等于頁數的時候歸零
65 brandCount++;
66 if(brandCount>=pageCount){
67 brandCount = 0;
68 }
69
70 //淡出
71 $("#" + container).empty().append(strTotal).hide().stop(true,true).fadeIn("slow");
72
73 return brandCount;
74 }
75 });
]]>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_屬性操作</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <script type="text/javascript">
11
12 $(function(){
13 //屬性名
14 var props = ["num","name","class","grade"];
15 var objs = new Array();
16
17 $("tbody tr").each(function(){
18 var obj = new Object();
19 $(this).find("td").each(function(n){
20 obj[props[n]] = $(this).html();
21 });
22 objs.push(obj);
23 });
24
25 for(var i=0;i<objs.length;i++){
26 alert(objs[i]["num"] + " -- " + objs[i]["name"] + " -- " + objs[i]["class"] + " -- " + objs[i]["grade"]);
27 }
28
29 });
30
31 </script>
32 <!-- Date: 2014-11-23 -->
33 </head>
34 <body>
35 <table width="500px" height="300px" cellpadding="0px" cellspacing="0px" border="1px solid black">
36 <thead>
37 <tr><th>編號</th><th>姓名</th><th>班級</th><th>年級</th></tr>
38 </thead>
39 <tbody>
40 <tr><td>01</td><td>duyt111</td><td>01class</td><td>01grade</td></tr>
41 <tr><td>02</td><td>duyt222</td><td>02class</td><td>02grade</td></tr>
42 <tr><td>03</td><td>duyt333</td><td>03class</td><td>03grade</td></tr>
43 <tr><td>04</td><td>duyt444</td><td>04class</td><td>04grade</td></tr>
44 <tr><td>05</td><td>duyt555</td><td>05class</td><td>05grade</td></tr>
45 <tr><td>06</td><td>duyt666</td><td>06class</td><td>06grade</td></tr>
46 </tbody>
47 </table>
48 </body>
49 </html>
50
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_屬性操作</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <script type="text/javascript">
11
12 $(function(){
13 //屬性名
14 var props = ["num","name","class","grade"];
15 var objs = new Array();
16
17 $("tbody tr").each(function(){
18 var obj = new Object();
19 $(this).find("td").each(function(n){
20 obj[props[n]] = $(this).html();
21 });
22 objs.push(obj);
23 });
24
25 for(var i=0;i<objs.length;i++){
26 alert(objs[i]["num"] + " -- " + objs[i]["name"] + " -- " + objs[i]["class"] + " -- " + objs[i]["grade"]);
27 }
28
29 });
30
31 </script>
32 <!-- Date: 2014-11-23 -->
33 </head>
34 <body>
35 <table width="500px" height="300px" cellpadding="0px" cellspacing="0px" border="1px solid black">
36 <thead>
37 <tr><th>編號</th><th>姓名</th><th>班級</th><th>年級</th></tr>
38 </thead>
39 <tbody>
40 <tr><td>01</td><td>duyt111</td><td>01class</td><td>01grade</td></tr>
41 <tr><td>02</td><td>duyt222</td><td>02class</td><td>02grade</td></tr>
42 <tr><td>03</td><td>duyt333</td><td>03class</td><td>03grade</td></tr>
43 <tr><td>04</td><td>duyt444</td><td>04class</td><td>04grade</td></tr>
44 <tr><td>05</td><td>duyt555</td><td>05class</td><td>05grade</td></tr>
45 <tr><td>06</td><td>duyt666</td><td>06class</td><td>06grade</td></tr>
46 </tbody>
47 </table>
48 </body>
49 </html>
50
]]>