DIV+CSS實戰(四)
1、說明javascript
在上篇博文《DIV+CSS（三）》中，一個頁面基本上展現出來了！下面實現如下頁面上的一些功能，比方批量刪除等功能。這裏以批量刪除爲例，批量禁止，批量啓用和批量刪除差很少，只不過一個是刪除，一個是修改，就不一一介紹了，刪除的話，會用到一些插件，例如：alpha.css、css1.css、drag.js,能夠點擊其進行下載！最終實現的效果圖以下：css
2、批量的全選,所有選的實現html
在我前面的博客《checkbox數據回顯問題》中，有詳細介紹這個問題。這裏就不詳細介紹了java
JSP設計微信
1 <body> 2 <form action="" > 3 <div class="jc-demo-box"> 4 <div class="divHeader"> 5 <h1 class="headerH1">全媒體訂閱</h1> 6 <div class="f_r"> 7 <p> 8 歡迎您：<span class="color2">中科大洋</span> 上次登陸時間：2小時前 9 </p> 10 </div> 11 </div> 12 <div class="divTab"> 13 <a href="" class="tabin">關鍵詞訂閱</a> 14 <a href="" class="">網站論壇訂閱</a> 15 <a href="" class="">微博帳號訂閱</a> 16 <a href="" class="">微信帳號訂閱</a> 17 <a href="" class="">返回上一級</a> 18 </div> 19 <div class="divContent"> 20 <div id="keyadd" class="keyaddClass "> 21 <a href="關鍵詞列表" class="tab">關鍵詞列表</a> 22 <a href="返回上一級">返回上一級</a> 23 </div> 24 <div class="divContent1"> 25 <table> 26 <tr> 27 <th>全選</th> 28 <th>主題詞名稱</th> 29 <th>抓取範圍</th> 30 <th>是否追溯</th> 31 <th>是否啓用</th> 32 <th>詞頻</th> 33 <th>操做</th> 34 </tr> 35 <tr> 36 <td><input type="checkbox" name="keyBox"></td> 37 <td>暴力扣殺1</td> 38 <td>網絡媒體</td> 39 <td>是</td> 40 <td>啓用</td> 41 <td>3</td> 42 <td> 43 <a href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a> 44 <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a> 45 </td> 46 </tr> 47 <tr> 48 <td><input type="checkbox" name="keyBox"></td> 49 <td>暴力扣殺2</td> 50 <td>網絡媒體</td> 51 <td>是</td> 52 <td>啓用</td> 53 <td>3</td> 54 <td> 55 <a href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a> 56 <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a> 57 </td> 58 </tr> 59 <tr> 60 <td><input type="checkbox" name="keyBox"></td> 61 <td>暴力扣殺3</td> 62 <td>網絡媒體</td> 63 <td>是</td> 64 <td>啓用</td> 65 <td>3</td> 66 <td> 67 <a href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a> 68 <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a> 69 </td> 70 </tr> 71 </table> 72 </div> 73 74 <div class="footOperation"> 75 <table> 76 <tr> 77 <td><input type="checkbox" id="checkAll"></td> 78 <td> 79 <a href="">批量追溯</a> 80 <a href="">批量刪除</a> 81 <a href="">批量禁用</a> 82 <a href="">批量刪除</a> 83 </td> 84 </tr> 85 </table> 86 </div> 87 </div> 88 <div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div> 89 </div> 90 91 </form> 92 </body>
JQuery設計網絡
1 <script type="text/javascript"> 2 3 $(function(){ 4 //網頁加載完成後調用 5 window.onload=function(){ 6 //表格各行換色 7 $(".divContent1 table tr:odd").addClass("journalBg"); 8 } 9 10 //當點擊全選框的時候 11 $("#checkAll").click(function(){ 12 //看全選框是否被選中 13 var booleanCheck=$(this).prop("checked"); 14 if(booleanCheck){ 15 //若是被選中，那麼全選 16 $("input[name='keyBox']").each(function(i,element){ 17 $(element).prop("checked",true); 18 }); 19 }else{ 20 //若是未被選中，那麼全不選 21 $("input[name='keyBox']").each(function(i,element){ 22 $(element).prop("checked",false); 23 }); 24 } 25 }); 26 27 //當點擊某個關鍵詞前面的複選框的時候 28 $("input[name='keyBox']").click(function(){ 29 //name=keyBox的複選框總共的個數 30 var allSize = $("input[name='keyBox']").length; 31 //被選中的個數 32 var checkSize = $("input[name='keyBox']:checked").length; 33 if(allSize == checkSize){ 34 //若是兩個相等，說明是全選，而後設置全選框被選中 35 $("#checkAll").prop("checked",true); 36 }else{ 37 //若是不相等，說明確定不是全選，設置全選框不被選中 38 $("#checkAll").prop("checked",false); 39 } 40 }); 41 }); 42 43 </script>
3、批量刪除界面的實現ide
原理很簡單，頁面中原本存在一個DIV，當點擊的時候，讓DIV顯示出來，再加一些CSS樣式等，就能夠了。首先引入上面提到的插件alpha.css、css1.css、drag.js ，而後，在頁面的最後加入一段代碼，post
JSP設計網站
1 <body> 2 <form action="" > 3 <div class="jc-demo-box"> 4 <div class="divHeader"> 5 <h1 class="headerH1">全媒體訂閱</h1> 6 <div class="f_r"> 7 <p> 8 歡迎您：<span class="color2">中科大洋</span> 上次登陸時間：2小時前 9 </p> 10 </div> 11 </div> 12 <div class="divTab"> 13 <a href="" class="tabin">關鍵詞訂閱</a> 14 <a href="" class="">網站論壇訂閱</a> 15 <a href="" class="">微博帳號訂閱</a> 16 <a href="" class="">微信帳號訂閱</a> 17 <a href="" class="">返回上一級</a> 18 </div> 19 <div class="divContent"> 20 <div id="keyadd" class="keyaddClass "> 21 <a href="關鍵詞列表" class="tab">關鍵詞列表</a> 22 <a href="返回上一級">返回上一級</a> 23 </div> 24 <div class="divContent1"> 25 <table> 26 <tr> 27 <th>全選</th> 28 <th>主題詞名稱</th> 29 <th>抓取範圍</th> 30 <th>是否追溯</th> 31 <th>是否啓用</th> 32 <th>詞頻</th> 33 <th>操做</th> 34 </tr> 35 <tr> 36 <td><input type="checkbox" name="keyBox"></td> 37 <td>暴力扣殺1</td> 38 <td>網絡媒體</td> 39 <td>是</td> 40 <td>啓用</td> 41 <td>3</td> 42 <td> 43 <a href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a> 44 <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a> 45 </td> 46 </tr> 47 <tr> 48 <td><input type="checkbox" name="keyBox"></td> 49 <td>暴力扣殺2</td> 50 <td>網絡媒體</td> 51 <td>是</td> 52 <td>啓用</td> 53 <td>3</td> 54 <td> 55 <a href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a> 56 <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a> 57 </td> 58 </tr> 59 <tr> 60 <td><input type="checkbox" name="keyBox"></td> 61 <td>暴力扣殺3</td> 62 <td>網絡媒體</td> 63 <td>是</td> 64 <td>啓用</td> 65 <td>3</td> 66 <td> 67 <a href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a> 68 <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a> 69 </td> 70 </tr> 71 </table> 72 </div> 73 74 <div class="footOperation"> 75 <table> 76 <tr> 77 <td><input type="checkbox" id="checkAll"></td> 78 <td> 79 <a href="">批量追溯</a> 80 <a href="">批量刪除</a> 81 <a href="">批量禁用</a> 82 <a href="javascript:void(0)" onclick="IndustrySelect_2()">批量刪除</a> 83 </td> 84 </tr> 85 </table> 86 </div> 87 </div> 88 <div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div> 89 </div> 90 <!-- 用戶顯示彈窗的對話框 --> 91 <div id="maskLayer" style="display:none"> 92 <iframe id="maskLayer_iframe" frameBorder=0 scrolling=no style="filter:alpha(opacity=50)"></iframe> 93 <div id="alphadiv" style="filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5"></div> 94 <div id="drag"> 95 <h3 id="drag_h" style="background-color: #257cb5"></h3> 96 <div id="drag_con"></div><!-- drag_con end --> 97 </div> 98 </div> 99 </form> 100 </body>
除了引入的默認設置外，讀者能夠自行設置樣式，這裏，咱們把顏色變一下，還有就是圓角的設計this
CSS設計
1 /*設置圓角*/ 2 #drag{ 3 border-radius:0px 0px 8px 8px; 4 } 5 #IndustryList table td{ 6 text-align:center; 7 } 8 #IndustryList table td label{ 9 padding:10px; 10 margin-top:40px; 11 color: #818389; 12 font: 13px "宋體",Arial,Helvetica,sans-serif; 13 } 14 /*設置按鈕圓角*/ 15 #IndustryList table td input[type='button']{ 16 margin-top:20px; 17 border: 1px solid #dfdfdf; 18 border-radius: 5px; 19 height: 30px; 20 line-height: 30px; 21 padding: 0 10px; 22 color: #818389; 23 font: 13px "宋體",Arial,Helvetica,sans-serif; 24 cursor:pointer; 25 } 26 27 /*設置按鈕鼠標通過時的特效*/ 28 #IndustryList table td input[type='button']:HOVER{ 29 margin-top:20px; 30 border: 1px solid #257cb5; 31 border-radius: 5px; 32 height: 30px; 33 line-height: 30px; 34 padding: 0 10px; 35 color: white; 36 font: 13px "宋體",Arial,Helvetica,sans-serif; 37 cursor:pointer; 38 background-color: #257cb5; 39 } 40 #IndustryList .centercontent{ 41 margin-top: 25px; 42 }
而後，寫一個keydelete.js，裏面實現了彈出框的顯示，以及關閉按鈕、肯定按鈕、取消按鈕的功能
keydelet.js
1 var KeyDelete = { 2 3 //批量刪除彈出對話框顯示 4 Show2 : function(){ 5 var output='',flag,output2=''; 6 var names=""; 7 8 /* 9 * 下面這段代碼的做用： 10 * 1.顯示要刪除對象name的字符串，比方 你肯定要刪出'全力扣殺，權利.....'？ 若是超過必定字符，自動以.....代替 11 * */ 12 $("input[name='keyBox']:checked").each(function(i,element){ 13 var name=$(element).parent().next().text(); 14 names=name+","+names; 15 }); 16 var names=names.substring(0,names.length-1); 17 if(names.split(",").length>2){ 18 names=names.split(",")[0]+","+names.split(",")[1]+"..."; 19 } 20 if(names!=""){ 21 names="'"+names+"'"; 22 } 23 24 /* 25 * 動態生成DIV裏面的內容，也就是提示內容，肯定，取消按鈕 26 * */ 27 output="<div align='center' class='centercontent'>" 28 +" <table>" 29 +" <tr>" 30 +" <td colspan='2'><label>你肯定要刪除"+names+"？</label></td>" 31 +" </tr>" 32 +" <tr>" 33 +" <td><input type='button' value='肯定' onclick=KeyDelete.Chk2()></td>" 34 +" <td><input type='button' value='取消' onclick=KeyDelete.confirm2()></td>" 35 +" </tr>" 36 +" </table>" 37 +"</div>" 38 39 /*設置彈出框的寬度*/ 40 $('#drag').width('300px'); 41 42 /*前面在JSP設計模塊中，最後面有一個DIV是隱藏的。將內容假如到那個DIV中*/ 43 $('#IndustryList').html(output); 44 }, 45 46 /*當點擊取消的時候*/ 47 confirm2 : function(){ 48 /* 49 * boxAlpha的做用是是彈出框隱藏。 50 * */ 51 boxAlpha(); 52 }, 53 54 /*當點擊肯定的時候*/ 55 Chk2 : function(){ 56 //獲取選中的關鍵詞，而後以client_id-word_id,client_id1-word_id1的格式發送到後臺進行處理 57 var deleteIds=""; 58 $("input[name='keyBox']:checked").each(function(i,element){ 59 /*得到選中的關鍵詞的用戶id，這些我把放入到一個隱藏域中，本次我不在頁面中沒有顯示，讀者能夠本身設置*/ 60 var client_id=$(element).next().val(); 61 62 /*獲取選中的關鍵詞的id，這些我把放入到一個隱藏域中，本次我不在頁面中沒有顯示，讀者能夠本身設置*/ 63 var word_id = $(element).next().next().val(); 64 var deleteObject=client_id+"-"+word_id; 65 66 /*拼接字符串*/ 67 deleteIds=deleteObject+","+deleteIds; 68 }); 69 70 /*截取掉多餘的逗號*/ 71 deleteIds=deleteIds.substring(0,deleteIds.length-1); 72 if(deleteIds !=""){ 73 /*提交到後臺*/ 74 window.location.href="key/keyDeleteMore?deleteIds="+deleteIds; 75 } 76 /*關閉彈出框*/ 77 boxAlpha(); 78 } 79 } 80 81 82 // 單選 83 function IndustrySelect_2(){ 84 var dragHtml ='<div id="IndustryAlpha">'; 85 dragHtml+=' <div id="IndustryList" class="radio"></div>'; 86 dragHtml+='</div>'; 87 $('#drag_h').html('<b>刪除</b><span onclick="boxAlpha()">關閉</span>'); 88 $('#drag_con').html(dragHtml); 89 KeyDelete.Show2(); 90 boxAlpha(); 91 draglayer(); 92 }
特效圖：
相關文章
- 1. divcss佈局實例之完整切圖
- 2. RocketMQ實戰（四）
- 3. Spark 實戰（四）
- 4. Flink實戰（四）
- 5. springcloud實戰四：Hystrix
- 6. 彙編實戰四
- 7. C# Redis實戰(四)
- 8. Spring實戰 (四) AOP
- 9. [DivCss]用圖片實現圓角框框(一)
- 10. android藍牙BLE（四） —— 實戰
- 更多相關文章...
- • XML DOM 實例 - XML DOM 教程
- • XML 實例 - XML 教程
- • RxJava操作符（四）Combining
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. divcss佈局實例之完整切圖
- 2. RocketMQ實戰（四）
- 3. Spark 實戰（四）
- 4. Flink實戰（四）
- 5. springcloud實戰四：Hystrix
- 6. 彙編實戰四
- 7. C# Redis實戰(四)
- 8. Spring實戰 (四) AOP
- 9. [DivCss]用圖片實現圓角框框(一)
- 10. android藍牙BLE（四） —— 實戰