jquery實現頁面交互的幾個小例子

時間 2020-07-05

原文原文鏈接

翻看了之前留下的筆記，發現本身居然作過這麼多的頁面交互效果，沒有使用原生js，全是經過jquery實現的，因而把他們整理下來，附上表現效果圖及源代碼html

1 業務應用：受權商品組和刪除商品組jquery

本質：複選框及文字的左右移動瀏覽器

表現效果：點擊肯定時談框提示哪些商品組已新受權或新刪除，只是記錄的並不是商品組文字，而是商品組編碼，各商品組之間以~號分隔app

  1 <html >
  2 <head>
  3     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  4     <script src="jquery-1.8.3.js">
  5     </script>
  6    
  7 </head>
  8    
  9    <body>
 10       <div  style="margin-left:30%;margin-top:10%;width:400;height:400px;border:solid">
 11       <table >
 12          <tr>
 13             <td>
 14             <div id="leavediv" style="border:solid;width:150;height:340px">
 15                 <input type="checkbox" autocomplete="off" value="10006" name="leaved"/><span>電視機</span><br/>
 16                 <input type="checkbox" autocomplete="off" value="10007" name="leaved"/><span>洗衣機</span><br/>
 17                 <input type="checkbox" autocomplete="off" value="10008" name="leaved"/><span>冰箱</span><br/>
 18                 <input type="checkbox" autocomplete="off" value="10009" name="leaved"/><span>手錶</span><br/>
 19                  <input type="checkbox" autocomplete="off" value="10010" name="leaved"/><span>奶粉</span><br/>
 20                 <input type="checkbox" autocomplete="off" value="10011" name="leaved"/><span>空調</span><br/>
 21                 <input type="checkbox" autocomplete="off" value="10012" name="leaved"/><span>音像</span><br/>
 22                 
 23                 
 24             </div>
 25             </td>
 26             <td>
 27             <input id="addstr" type="button" value="受權>"><br/>
 28             <input id="delstr" type="button" value="<刪除">
 29             </td>
 30             <td>
 31             <div id="gaineddiv" style="border:solid;width:150;height:340px">
 32                  <input type="checkbox" autocomplete="off" value="10001" name="gained"/><span>箱包</span><br/>
 33                 <input type="checkbox" autocomplete="off" value="10002" name="gained"/><span>3C數碼</span><br/>
 34                 <input type="checkbox" autocomplete="off" value="10003" name="gained"/><span>美妝</span><br/>
 35                 <input type="checkbox" autocomplete="off" value="1004" name="gained"/><span>彩票</span><br/>
 36                   <input type="checkbox" autocomplete="off" value="10005" name="gained"/><span>百貨</span><br/>
 37             </div>
 38             </td>
 39          </tr>
 40       </table>
 41       <div align="center">
 42       <input align="center" type="button" value="關閉" /><input id="confirm" type="button" value="肯定"/>
 43       </div>
 44       <div>
 45       <form id="changedstr" action="cataca.action">
 46       <input id="ch" type="hidden" value="" /><br/>
 47       
 48       </form>
 49    </body>
 50 <script>
 51    $(document).ready(function(){
 52      var addstr="";
 53      var delstr="";
 54      $("#addstr").click(function(){
 55      
 56           var obj=$("input[type=checkbox][name=leaved]:checked");
 57           var count=obj.length;
 58           
 59           for(var i=0;i<count;i++){
 60             
 61               $("#gaineddiv").append("<input type='checkbox' value='"+obj[i].value+"' name='gained'/><span>"+$(obj[i]).next().html()+"</span><br/>");
 62               var objvalue=obj[i].value;
 63               $(obj[i]).next().next().remove();
 64               $(obj[i]).next().remove();
 65               $(obj[i]).remove();
 66               if(delstr.indexOf(objvalue)>-1){
 67                             delstr=delstr.replace(objvalue+"~","");
 68                             }else{
 69                                addstr=addstr+objvalue+"~";
 70                             }
 71              
 72              
 73           }
 74     
 75      })
 76      $("#delstr").click(function(){
 77           var obj=$("input[type=checkbox][name=gained]:checked");
 78           var count=obj.length;
 79           
 80           for(var i=0;i<count;i++){
 81             
 82               $("#leavediv").append("<input type='checkbox' value='"+obj[i].value+"' name='leaved'/><span>"+$(obj[i]).next().html()+"</span><br/>");
 83               var objvalue=obj[i].value;
 84               $(obj[i]).next().next().remove();
 85               $(obj[i]).next().remove();
 86               $(obj[i]).remove();
 87               if(addstr.indexOf(objvalue)>-1){
 88                                 addstr=addstr.replace(objvalue+"~","");
 89                                            }else{
 90                                                 delstr=delstr+objvalue+"~";
 91                                                }
 92             
 93      }
 94     })
 95     
 96     
 97           $("#confirm").click(function(){
 98                alert("受權的商品組:"+addstr);
 99                alert("刪除的商品組:"+delstr);
100           })
101      })
102 </script>
103 </html>

2業務應用：須要對錶格相同的部分進行合併，但後臺程序每每沒法作到這樣的效果，或者即便作到也很複雜ui

對於內容相同的行進行合併編碼

合併的js相對仍是比較難理解的,須要注意的是，js代碼必須放在html結尾，不然瀏覽器會先加載js，js被加載後就好立馬執行，但這時頁面的表格並未加載完成，js會由於找不到表格的行而不進行任何操做，這樣不會有任何效果。spa

　　　　　　　　　　　　　　　　　　　　　　　　　　如上圖所示，重複的單元格被合併設計

Code以下：3d

 1 <head>
 2      <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
 3      <script src="jquery-1.8.3.js"></script> 
 4 </head>
 5 <div id="groupManage">
 6 <table   border="1" cellpadding ="0" cellspacing="0" >
 7     <tr><td>年級</td><td>班級</td><td>姓名</td></tr>
 8     <tr><td>二年級</td><td>二年級（1）班</td><td>小紅</td></tr>
 9     <tr><td>二年級</td><td>二年級（2）班</td><td>小明</td></tr>
10     <tr><td>三年級</td><td>三年級（1）班</td><td>花花</td></tr>
11     <tr><td>三年級</td><td>三年級（2）班</td><td>草草</td></tr>
12 </table>
13 </div>
14 
15 <script>
16     var grid = $("#groupManage"); 
17     var rowCount = grid.find("tr").length - 1; 
18     var flagRow = grid.find("tr:eq("+rowCount+")").find("td:eq(0)").html(); 
19     var sp = 0; 
20     for(var i = rowCount; i >=0; i--) { 
21         var tempRow = grid.find("tr:eq("+i+")"); 
22         if(flagRow == tempRow.find("td:eq(0)").html()) { 
23             tempRow.find("td:eq(0)").remove(); 
24         } 
25         else { 
26             $("<td/>").attr("rowspan", rowCount-i-sp).html(flagRow).prependTo(tempRow.parent().find("tr:eq("+(i+1)+")")); 
27             flagRow = tempRow.find("td:eq(0)").html(); 
28             sp = rowCount-i; 
29             if(i != 0) { 
30                 tempRow.find("td:eq(0)").remove(); 
31             } 
32           } 
33     } 
34 </script>

3實現遮罩層和彈窗效果code

寫到這不得不講一個故事，

　　聯合利華引進了一條香皂包裝生產線，結果發現這條生產線有個缺陷：經常會有盒子裏沒裝入香皂。總不能把空盒子賣給顧客啊，他們只得請了一個學自動化的博士後設計一個方案來分揀空的香皂盒。博士後拉起了一個十幾人的科研攻關小組，綜合採用了機械、微電子、自動化、X射線探測等技術，花了幾十萬，成功解決了問題。每當生產線上有空香皂盒經過，兩旁的探測器會檢測到，而且驅動一隻機械手把空皁盒推走。　
　　中國南方有個鄉鎮企業也買了一樣的生產線，老闆發現這個問題後大爲發火，找了個小工來講：「你他媽給老子把這個搞定，否則你給老子爬走。」小工很快想出了辦法：他花了90塊錢在生產線旁邊放了一臺大功率電風扇猛吹，因而空皁盒都被吹走了。

　　拋開故事的瑕疵不論，這個故事告訴咱們要化繁爲簡，用簡單的方法去實現目的，達到效果。

我寫彈框的時候就是這樣，當時想方設法想要經過 jquery 去建立一個彈框對象，後來發現用window.open()方法更加方便快捷，這種方法其實是打開另一個瀏覽器窗口疊加在原窗口上，並非本頁面的彈框，但確足夠好用

js代碼：

window.open ('${ctx}/emailTmpl/queryEmailTmplForMass.do', 'newwindow', 'left=400,top=150,height=400,width=800,resizable=yes,scrollbars=yes');

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。