DIV+CSS实战(四)
生活随笔
收集整理的這篇文章主要介紹了
DIV+CSS实战(四)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、說明
在上篇博文《DIV+CSS（三）》中，一個頁面基本上展示出來了！下面實現以下頁面上的一些功能，比方批量刪除等功能。這里以批量刪除為例，批量禁止，批量啟用和批量刪除差不多，只不過一個是刪除，一個是修改，就不一一介紹了，刪除的話，會用到一些插件，例如：alpha.css、css1.css、drag.js,可以點擊其進行下載！最終實現的效果圖如下：
?
二、批量的全選,全部選的實現
在我前面的博客《checkbox數據回顯問題》中，有詳細介紹這個問題。這里就不詳細介紹了
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> View Code?
JQuery設計
1 <script type="text/javascript"> 2 3 $(function(){ 4 //網頁加載完成后調用 5 window.οnlοad=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> View Code?
?
三、批量刪除界面的實現
原理很簡單，頁面中本來存在一個DIV，當點擊的時候，讓DIV顯示出來，再加一些CSS樣式等，就可以了。首先引入上面提到的插件alpha.css、css1.css、drag.js ，然后，在頁面的最后加入一段代碼，
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> View Code
除了引入的默認設置外，讀者可以自行設置樣式，這里，我們把顏色變一下，還有就是圓角的設計
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 } View Code?
然后，寫一個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='確定' οnclick=KeyDelete.Chk2()></td>" 34 +" <td><input type='button' value='取消' οnclick=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 οnclick="boxAlpha()">關閉</span>'); 88 $('#drag_con').html(dragHtml); 89 KeyDelete.Show2(); 90 boxAlpha(); 91 draglayer(); 92 } View Code?
特效圖：
?
轉載于:https://www.cnblogs.com/robert-blue/p/4362980.html
總結
以上是生活随笔為你收集整理的DIV+CSS实战(四)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2013的战略规划
- 下一篇： CSS3 :nth-child(n)使用