DIV+CSS实战(四)
一、说明
在上篇博文《DIV+CSS（三）》中，一个页面基本上展示出来了！下面实现以下页面上的一些功能，比方批量删除等功能。这里以批量删除为例，批量禁止，批量启用和批量删除差不多，只不过一个是删除，一个是修改，就不一一介绍了，删除的话，会用到一些插件，例如：alpha.css、css1.css、drag.js,可以点击其进行下载！最终实现的效果图如下：
二、批量的全选,全部选的实现
在我前面的博客《checkbox数据回显问题》中，有详细介绍这个问题。这里就不详细介绍了
JSP设计
<body>
<form action="" >
<div class="jc-demo-box">
<div class="divHeader">
<h1 class="headerH1">全媒体订阅</h1>
<div class="f_r">
<p>
欢迎您：<span class="color2">中科大洋</span> 上次登录时间：2小时前
</p>
</div>
</div>
<div class="divTab">
<a href="" class="tabin">关键词订阅</a>
<a href="" class="">网站论坛订阅</a>
<a href="" class="">微博账号订阅</a>
<a href="" class="">微信账号订阅</a>
<a href="" class="">返回上一级</a>
</div>
<div class="divContent">
<div id="keyadd" class="keyaddClass ">
<a href="关键词列表" class="tab">关键词列表</a>
<a href="返回上一级">返回上一级</a>
</div>
<div class="divContent1">
<table>
<tr>
<th>全选</th>
<th>主题词名称</th>
<th>抓取范围</th>
<th>是否追溯</th>
<th>是否启用</th>
<th>词频</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="keyBox"></td>
<td>暴力扣杀1</td>
<td>网络媒体</td>
<td>是</td>
<td>启用</td>
<td>3</td>
<td>
<a href=""><img src="data:images/yq/key/paint.png" alt="修改" title="修改" ></a>
<a ><img src="data:images/yq/key/cancle.png" alt="删除" title="删除"></a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="keyBox"></td>
<td>暴力扣杀2</td>
<td>网络媒体</td>
<td>是</td>
<td>启用</td>
<td>3</td>
<td>
<a href=""><img src="data:images/yq/key/paint.png" alt="修改" title="修改" ></a>
<a ><img src="data:images/yq/key/cancle.png" alt="删除" title="删除"></a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="keyBox"></td>
<td>暴力扣杀3</td>
<td>网络媒体</td>
<td>是</td>
<td>启用</td>
<td>3</td>
<td>
<a href=""><img src="data:images/yq/key/paint.png" alt="修改" title="修改" ></a>
<a ><img src="data:images/yq/key/cancle.png" alt="删除" title="删除"></a>
</td>
</tr>
</table>
</div> <div class="footOperation">
<table>
<tr>
<td><input type="checkbox" id="checkAll"></td>
<td>
<a href="">批量追溯</a>
<a href="">批量删除</a>
<a href="">批量禁用</a>
<a href="">批量删除</a>
</td>
</tr>
</table>
</div>
</div>
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
</div> </form>
</body>
JQuery设计
<script type="text/javascript">
$(function(){
//网页加载完成后调用
window.onload=function(){
//表格各行换色
$(".divContent1 table tr:odd").addClass("journalBg");
}
//当点击全选框的时候
$("#checkAll").click(function(){
//看全选框是否被选中
var booleanCheck=$(this).prop("checked");
if(booleanCheck){
//如果被选中，那么全选
$("input[name='keyBox']").each(function(i,element){
$(element).prop("checked",true);
});
}else{
//如果未被选中，那么全不选
$("input[name='keyBox']").each(function(i,element){
$(element).prop("checked",false);
});
}
});
//当点击某个关键词前面的复选框的时候
$("input[name='keyBox']").click(function(){
//name=keyBox的复选框总共的个数
var allSize = $("input[name='keyBox']").length;
//被选中的个数
var checkSize = $("input[name='keyBox']:checked").length;
if(allSize == checkSize){
//如果两个相等，说明是全选，然后设置全选框被选中
$("#checkAll").prop("checked",true);
}else{
//如果不相等，说明肯定不是全选，设置全选框不被选中
$("#checkAll").prop("checked",false);
}
});
});
</script>
三、批量删除界面的实现
原理很简单，页面中本来存在一个DIV，当点击的时候，让DIV显示出来，再加一些CSS样式等，就可以了。首先引入上面提到的插件alpha.css、css1.css、drag.js，然后，在页面的最后加入一段代码，
JSP设计
<body>
<form action="" >
<div class="jc-demo-box">
<div class="divHeader">
<h1 class="headerH1">全媒体订阅</h1>
<div class="f_r">
<p>
欢迎您：<span class="color2">中科大洋</span> 上次登录时间：2小时前
</p>
</div>
</div>
<div class="divTab">
<a href="" class="tabin">关键词订阅</a>
<a href="" class="">网站论坛订阅</a>
<a href="" class="">微博账号订阅</a>
<a href="" class="">微信账号订阅</a>
<a href="" class="">返回上一级</a>
</div>
<div class="divContent">
<div id="keyadd" class="keyaddClass ">
<a href="关键词列表" class="tab">关键词列表</a>
<a href="返回上一级">返回上一级</a>
</div>
<div class="divContent1">
<table>
<tr>
<th>全选</th>
<th>主题词名称</th>
<th>抓取范围</th>
<th>是否追溯</th>
<th>是否启用</th>
<th>词频</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="keyBox"></td>
<td>暴力扣杀1</td>
<td>网络媒体</td>
<td>是</td>
<td>启用</td>
<td>3</td>
<td>
<a href=""><img src="data:images/yq/key/paint.png" alt="修改" title="修改" ></a>
<a ><img src="data:images/yq/key/cancle.png" alt="删除" title="删除"></a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="keyBox"></td>
<td>暴力扣杀2</td>
<td>网络媒体</td>
<td>是</td>
<td>启用</td>
<td>3</td>
<td>
<a href=""><img src="data:images/yq/key/paint.png" alt="修改" title="修改" ></a>
<a ><img src="data:images/yq/key/cancle.png" alt="删除" title="删除"></a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="keyBox"></td>
<td>暴力扣杀3</td>
<td>网络媒体</td>
<td>是</td>
<td>启用</td>
<td>3</td>
<td>
<a href=""><img src="data:images/yq/key/paint.png" alt="修改" title="修改" ></a>
<a ><img src="data:images/yq/key/cancle.png" alt="删除" title="删除"></a>
</td>
</tr>
</table>
</div> <div class="footOperation">
<table>
<tr>
<td><input type="checkbox" id="checkAll"></td>
<td>
<a href="">批量追溯</a>
<a href="">批量删除</a>
<a href="">批量禁用</a>
<a href="javascript:void(0)" onclick="IndustrySelect_2()">批量删除</a>
</td>
</tr>
</table>
</div>
</div>
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
</div>
<!-- 用户显示弹窗的对话框 -->
<div id="maskLayer" style="display:none">
<iframe id="maskLayer_iframe" frameBorder=0 scrolling=no style="filter:alpha(opacity=50)"></iframe>
<div id="alphadiv" style="filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5"></div>
<div id="drag">
<h3 id="drag_h" style="background-color: #257cb5"></h3>
<div id="drag_con"></div><!-- drag_con end -->
</div>
</div>
</form>
</body>
除了引入的默认设置外，读者可以自行设置样式，这里，我们把颜色变一下，还有就是圆角的设计
CSS设计
/*设置圆角*/
#drag{
border-radius:0px 0px 8px 8px;
}
#IndustryList table td{
text-align:center;
}
#IndustryList table td label{
padding:10px;
margin-top:40px;
color: #818389;
font: 13px "宋体",Arial,Helvetica,sans-serif;
}
/*设置按钮圆角*/
#IndustryList table td input[type='button']{
margin-top:20px;
border: 1px solid #dfdfdf;
border-radius: 5px;
height: 30px;
line-height: 30px;
padding: 0 10px;
color: #818389;
font: 13px "宋体",Arial,Helvetica,sans-serif;
cursor:pointer;
} /*设置按钮鼠标经过时的特效*/
#IndustryList table td input[type='button']:HOVER{
margin-top:20px;
border: 1px solid #257cb5;
border-radius: 5px;
height: 30px;
line-height: 30px;
padding: 0 10px;
color: white;
font: 13px "宋体",Arial,Helvetica,sans-serif;
cursor:pointer;
background-color: #257cb5;
}
#IndustryList .centercontent{
margin-top: 25px;
}
然后，写一个keydelete.js，里面实现了弹出框的显示，以及关闭按钮、确定按钮、取消按钮的功能
keydelet.js
var KeyDelete = {
//批量删除弹出对话框显示
Show2 : function(){
var output='',flag,output2='';
var names="";
/*
* 下面这段代码的作用：
* 1.显示要删除对象name的字符串，比方 你确定要删出'全力扣杀，权利.....'？ 如果超过一定字符，自动以.....代替
* */
$("input[name='keyBox']:checked").each(function(i,element){
var name=$(element).parent().next().text();
names=name+","+names;
});
var names=names.substring(0,names.length-1);
if(names.split(",").length>2){
names=names.split(",")[0]+","+names.split(",")[1]+"...";
}
if(names!=""){
names="'"+names+"'";
}
/*
* 动态生成DIV里面的内容，也就是提示内容，确定，取消按钮
* */
output="<div align='center' class='centercontent'>"
+" <table>"
+" <tr>"
+" <td colspan='2'><label>你确定要删除"+names+"？</label></td>"
+" </tr>"
+" <tr>"
+" <td><input type='button' value='确定' onclick=KeyDelete.Chk2()></td>"
+" <td><input type='button' value='取消' onclick=KeyDelete.confirm2()></td>"
+" </tr>"
+" </table>"
+"</div>"
/*设置弹出框的宽度*/
$('#drag').width('300px');
/*前面在JSP设计模块中，最后面有一个DIV是隐藏的。将内容假如到那个DIV中*/
$('#IndustryList').html(output);
},
/*当点击取消的时候*/
confirm2 : function(){
/*
* boxAlpha的作用是是弹出框隐藏。
* */
boxAlpha();
},
/*当点击确定的时候*/
Chk2 : function(){
//获取选中的关键词，然后以client_id-word_id,client_id1-word_id1的格式发送到后台进行处理
var deleteIds="";
$("input[name='keyBox']:checked").each(function(i,element){
/*获得选中的关键词的用户id，这些我把放入到一个隐藏域中，本次我不在页面中没有显示，读者可以自己设置*/
var client_id=$(element).next().val();
/*获取选中的关键词的id，这些我把放入到一个隐藏域中，本次我不在页面中没有显示，读者可以自己设置*/
var word_id = $(element).next().next().val();
var deleteObject=client_id+"-"+word_id;
/*拼接字符串*/
deleteIds=deleteObject+","+deleteIds;
});
/*截取掉多余的逗号*/
deleteIds=deleteIds.substring(0,deleteIds.length-1);
if(deleteIds !=""){
/*提交到后台*/
window.location.href="key/keyDeleteMore?deleteIds="+deleteIds;
}
/*关闭弹出框*/
boxAlpha();
}
}
// 单选
function IndustrySelect_2(){
var dragHtml ='<div id="IndustryAlpha">';
dragHtml+=' <div id="IndustryList" class="radio"></div>';
dragHtml+='</div>';
$('#drag_h').html('<b>删除</b><span onclick="boxAlpha()">关闭</span>');
$('#drag_con').html(dragHtml);
KeyDelete.Show2();
boxAlpha();
draglayer();
}
特效图：
DIV+CSS实战(四)的更多相关文章
- DIV+CSS实战(三)
一.说明 在上篇博客<DIV+CSS实战(二)>中,实现了头部以及Tab标签卡,下面开始实现内容区域,要实现的效果如下: 二.内容最外层的设计(边框) 给最外层加边框,并且设置高度随着里面 ...
- DIV+CSS实战(二)
一.说明 在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名 和上次登录的时 ...
- DIV+CSS实战(一)
一.说明 作为一个后台的程序员,我也是很少写前端,最近有一个项目,前端主要是由我来负责,就把我在项目中所学到的东西,记录下来!我的页面要嵌入到另一个系统中,所以,并不是按照传统的top,left,co ...
- DIV+CSS实战（五）
一.说明 前面实现了关键词订阅模块,现在实现站点订阅模块,主要实现的是站点添加界面.站点添加界面里面实现一个提示框不在提示的功能(保存到cookie中),还有就是实现一个站点的选择框,包括输入文字自动 ...
- 2天驾驭DIV+CSS （实战篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 第6天：DIV+CSS页面布局实战
今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...
- 项目实战之玩转div+css制作自己定义形状
项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- DIV+CSS系统学习：转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
随机推荐
- HIBERNATE知识复习记录2-继承关系
发现了一篇和我类似的学习尚硅谷视频写的文章,内容如下,比我说的详细全面,可以看一下: [原创]java WEB学习笔记87:Hibernate学习之路-- -映射 继承关系(subclass , jo ...
- Spring 中的国际化Message的简单例子（ApplicationContext） 不跟框架集成的版本
首先,建立一个描述message的XML文件,名为messages.xml <?xml version="1.0" encoding="UTF-8" ...
- python判断unicode是否是汉字，数字，英文，或者其他字符
下面这个小工具包含了 判断unicode是否是汉字,数字,英文,或者其他字符. 全角符号转半角符号. unicode字符串归一化等工作. 还有一个能处理多音字的汉字转拼音的程序,还在整理中. #!/u ...
- js indexOf within Switch
https://stackoverflow.com/questions/22277447/indexof-within-switch switch (true) { case (msgRes.inde ...
- SQL Server 2016/2014/2012/2008/2005/2000简体中文企业版下载地址
为什么只提供企业版下载呢?因为不管你是学生还是工作研究人员,企业版都是功能最为齐全的一个版本,比如企业版都集成了SQL Server Management Studio管理界面(俗称企业管理器的可视化 ...
- struck 模块
struck.pack(type,num) type : 是num的类型 num : int类型 r = struck.pack 把一个num内容打包成一个c规定的字节bytes的个数 struck ...
- MySQL5.7.10配置和使用
前两天搞mybatis和springmvc的结合,搞了半天项目就是跑不起来,由于都没有接触过,也不知道原因出在哪里.今天想彻底学习下mybatis,于是就想使用MySQL.从官网上下了,MySQL-5 ...
- Struts2的拦截器技术
1. 拦截器的概述 * 拦截器就是AOP(Aspect-Oriented Programming,面向切面)的一种实现.(AOP是指用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作 ...
- PAT 1048 数字加密(20)（代码+思路）
1048 数字加密(20)(20 分) 本题要求实现一种数字加密方法.首先固定一个加密用正整数A,对任一正整数B,将其每1位数字与A的对应位置上的数字进行以下运算:对奇数位,对应位的数字相加后对13取 ...
- geoserver 通过代码实现发布地图服务
GeoServer:代码实现批量发布地图服务 利用GeoServer发布WCS服务,那么如果我有很多数据需要进行发布,这样利用GeoServer提供的UI界面进行操作显然很不显示.那能不能利用GeoS ...