DIV+CSS实战（五）
一、说明
前面实现了关键词订阅模块，现在实现站点订阅模块，主要实现的是站点添加界面。站点添加界面里面实现一个提示框不在提示的功能（保存到cookie中），还有就是实现一个站点的选择框，包括输入文字自动筛选的功能。如下效果图：
二、提示框的实现
先把添加的界面整体实现了，就是一个DIV中放了一个表格,表格有一行两列,分别是<td><table></table>（第一列放的是客户ID,状态.....）</td> <td>DIV</td>（第二列放的是一个DIV提示框）。还有就是像顶部的标题，还有标签卡。这些前面都已经说过了，就不再细说。
JSP
<body>
<form id="adduserform" action="<%=basePath%>site/siteAdd" method="post">
<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 class="tabSet " name="typeAdd" href="key/listAllKeys">关键词订阅</a>
<a class="tabSet tabin" name="keyAdd" href="site/siteList">网站论坛订阅</a>
<a class="tabSet" name="keyAdd" href="weibo/weiboList">微博账号订阅</a>
<a class="tabSet" name="keyAdd" href="weixin/weixinList">微信账号订阅</a>
<a class="addOther" href="javascript:history.go(-1);">返回上一级</a>
</div>
<div class="divContent">
<div class="divTab">
<div id="keyadd" class="keyaddClass">
<a class="tabin clickA" rela="keyword_set" name="keyMessage" href="javascript:;">添加站点</a>
<a class="clickA" rela="keyword_set" name="keyMessage" href="site/siteList" style="float: right">返回URL列表</a>
<p class="clr"></p>
</div>
</div>
<div class="divExample">
<table align="left">
<tr>
<td >
<div class="divContent1" style="margin-left: 10px;">
<table align="left" id="addTable">
<tr>
<td >
<label title="1">客 户 ID:</label>
</td>
<td colspan="2">
<input type="text" name="client_id">
</td>
</tr>
<tr>
<td >
<label title="1">状 态:</label>
</td>
<td colspan="2">
<input type="radio" name="status" value="1" id="5"><label for="5">启用</label>
<input type="radio" name="status" value="-1" id="6"><label for="6">禁用</label>
</td>
</tr>
<tr>
<td >
<label title="1">开始时间:</label>
</td>
<td colspan="2">
<input type="text" name="start_time" onClick="WdatePicker()"><br>
</td>
</tr> <tr>
<td >
<label title="1">结束时间:</label>
</td>
<td colspan="2">
<input type="text" name="end_time" onClick="WdatePicker()">
</td>
</tr>
<tr>
<td >
<label title="1">站 点 1:</label>
</td>
<td>
<input type="text" name="site" onblur="" id="siteThis">
<label id="lsite"></label>
</td>
<td>
<img alt="添加" src="data:images/yq/site/newSite.jpg" onclick="IndustrySelect_3()">
</td>
</tr>
<tr>
<td>
<input type="button" value="添加" id="enterImg" >
</td>
<td></td><td></td>
</tr>
</table>
</div>
</td>
<td>
<div class="divTip" style=" width: 377px;margin-top: -50px">
<img alt="" src="data:images/yq/site/hander.jpg" width="20px" height="20px">
<div class="pTip">
<img alt="不再提醒" src="data:images/yq/site/noTip.jpg" title="不再提醒" id="cancleTip">
<p>1.至少选择一个站点</p>
<p>2.也可以点击下面的常用站点进行站点的添加</p>
<p>3.格式: 大洋 http://www.dayang.com.cn</p>
<p>4.红色X按钮，关闭提示框，不再显示</p>
</div>
</div>
</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"></h3>
<div id="drag_con"></div><!-- drag_con end -->
</div>
</div><!-- maskLayer end -->
</form> </body>
CSS设计（site.css）
页面风格基本上和前面的一样，这里就不在说明CSS了
body{
background:url(../../../../images/yq/key/body_bj.gif) repeat 0 0;
color: #818389;
font: 12px "宋体",Arial,Helvetica,sans-serif;
}
a{
cursor: pointer;
}
.jc-demo-box{
width:96%;
text-align: left;
margin: 2em auto;
background: white;
border: 1px #bbb solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
padding: 25px 30px;
min-width: 960px;
}
.divHeader{
height: 28px;
margin-bottom: 13px;
width:100%;
}
.divHeader .headerH1{
background: url("../../../../images/yq/key/blue_user.png") no-repeat 5px 5px;
}
.divHeader .headerH2{
background-image: url("../../../../images/yq/site/hander.jpg");
}
.divHeader h1{
color: #212121;
float: left;
font-family: "微软雅黑";
font-size: 18px;
height: 28px;
line-height: 28px;
padding-left: 34px;
}
.divHeader .f_r{
color: #434343;
line-height: 30px;
float: right;
}
.divHeader .f_r .color2{
color: #257bb4;
}
.divHeader h1{
color: #212121;
float: left;
font-family: "微软雅黑";
font-size: 18px;
height: 28px;
line-height: 28px;
padding-left: 34px;
}
.divTab{
height: 34px;
width:100%;
float: left;
}
.divTab a{
background-color:#E6E6E6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #5e5e5e;
float: left;
font-size: 14px;
height: 34px;
line-height: 34px;
margin-right: 4px;
text-align: center;
width: 96px;
text-decoration:none;
}
.divTab .tabin{
background-color: #257CB5;
color: white;
}
.divTab .addOther {
margin-right: 0px;
float: right
}
.divArrow{
width:100%;
float: left;
padding-left: 40px;
height: 7px;
margin-top: -4px;
z-index:;
}
.divArrow img{
margin-right: 76px;
visibility: hidden;
}
.divArrow .showImage{
visibility: visible;
}
.divContent1{
width: auto;
float: left;
}
.divExample{
width: 100%;
float: left;
margin: auto,auto;
margin-top: 20px;
}
.divExample a{
width: 270px;
height: 170px;
border: 1px solid #dfdfdf;
display: block;
float: left;
margin: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.divExample a:HOVER{
width: 270px;
height: 170px;
border: 1px solid #dcdcdc;
display: block;
float: left;
margin: 10px;
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
}
.imagespan{
display: block;
width: 270px;
}
.imagespan img{
width: 270px;
height: 150px;
}
.titlespan{
display: block;
width: 264px;
padding-left: 6px;
font: 12px "宋体",Arial,Helvetica,sans-serif;
}
.titlespan img{
width:20px;
height: 20px;
margin-top: -2px;
}
.hideImg{
visibility: hidden;
}
.showImg{
visibility: visible;
}
.keyaddClass{
border-bottom: 2px solid #348bc4;
margin-bottom: 15px;
width: 98%;
float: left;
padding-left: 2%;
}
.keyaddClass a{
float: left;
font-size: 12px;
font-weight: bold;
height: 30px;
line-height: 30px;
overflow-y: hidden;
text-align: center;
width: 100px;
color: #818389;
text-decoration: none;
border-radius:4px 4px 0px 0px;
}
.keyaddClass .tabin{
background-color: #257CB5;
color: white;
}
.keyaddClass .notabin:hover{
color:#257CB5;
}
#addTable{
}
#addTable label{
color: #818389;
font: 13px "宋体",Arial,Helvetica,sans-serif;
}
label{
color: #818389;
font: 13px "宋体",Arial,Helvetica,sans-serif;
}
#addTable input[type='text']{
border: 1px solid #dfdfdf;
border-radius: 5px;
height: 30px;
width: 350px;
line-height: 30px;
padding: 0 10px;
color: #818389;
}
#addTable tr td img{
width: 20px;
height: 20px;
margin-left: 3px;
cursor: pointer;
}
#addTable tr:last-child td img{
width: 20px;
height: 20px;
margin-left: 3px;
cursor: pointer;
}
.footer{
width: 100%;
float: left;
margin: auto;
}
.footer span{
text-align:center;
display: block;
width: 100%;
font: 14px "宋体",Arial,Helvetica,sans-serif;
color: gray;
}
.divTip{
}
.divTip img{
width: 20px;
height: 20px;
margin-left: 25px;
}
.divTip .PTip{
margin-left:45px;
width: auto;
border: 1px solid #dcdcdc;
}
.divTip .PTip p{
margin-left: 3px;
}
.divTip .PTip img{
width: 20px;
height: 20px;
text-align: right;
float: right;
margin-top: -10px;
margin-right: -10px;
cursor: pointer;
}
.divContent{
width: 100%;
float: left;
margin-top: 3px;
border: 1px solid #e8e7e7;
padding-top: 20px;
height: auto;
}
.header{
width: 100%;
float: left;
}
.middle{
width: 99%;
float: left;
border: 1px solid #dcdcdc;
}
.middle .tab{
width:98%;
height:40px;
float: left;
border-bottom: 1px solid #dcdcdc;
}
.middle .tab a{
width: 100px;
height: 28px;
line-height: 28px;
margin-left: 10px;
border: 1px solid #dcdcdc;
border-bottom:1px solid white;
display: block;
float: left;
background-color: white;
margin-top: 12px;
text-align: center;
text-decoration: none;
color: #3c3c3c;
font-family: Microsoft YaHei,Simsum,serif;
font-size: small;
}
.content{
width:99%;
float: left;
}
.content li{
height: 28px;
line-height: 28px;
color: #3c3c3c;
font-family: Microsoft YaHei,Simsum,serif;
font-size: small;
}
input[type='button']{
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;
}
input[type='button']:HOVER{
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;
}
input[type='text']{
border: 1px solid #dfdfdf;
border-radius: 5px;
line-height: 30px;
padding: 0 10px;
color: #818389;
}
.middle{
width: 99%;
float: left;
border: 1px solid #dcdcdc;
}
.middle .tab{
width:98%;
height:40px;
float: left;
border-bottom: 1px solid #dcdcdc;
}
.middle .tab .addCheck{
width: 100px;
height: 28px;
line-height: 28px;
margin-left: 10px;
border: 1px solid #dcdcdc;
border-bottom:1px solid white;
display: block;
float: left;
background-color: white;
margin-top: 12px;
text-align: center;
text-decoration: none;
color: #3c3c3c;
font-family: Microsoft YaHei,Simsum,serif;
font-size: small;
}
.middle .tab a{
width: 100px;
height: 28px;
line-height: 28px;
margin-left: 10px;
border: 1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
display: block;
float: left;
background-color: #EEEEEE;
margin-top: 12px;
text-align: center;
text-decoration: none;
color: #3c3c3c;
font-family: Microsoft YaHei,Simsum,serif;
font-size: small;
}
.content{
width:99%;
float: left;
}
.content li{
height: 28px;
line-height: 28px;
color: #3c3c3c;
font-family: Microsoft YaHei,Simsum,serif;
font-size: small;
}
JS设计
JS上的设计比较多，因为弹出框上面的内容都是通过数组形式保存在js文件中，下面说一下都用到那些JS
新闻类：
<script type="text/javascript" src="pages/gather/js/site/start_name_arr.js"></script> （这个是名字：如人民网）
<script type="text/javascript" src="pages/gather/js/site/start_number_arr.js"></script>（这个是网址：如http://www.people.com.cn/）
还有军事、文人、企业高管、政坛官员、互联网风云这几类！可以下载这些js
动态显示弹出框的js，并且实现输入框自动过滤（site_fun.js），要实现自动过滤还需要引入（jquery.fastLiveFilter.js，可以从网上查找），在sit_fun.js中动态引入
//var ind_flag_arr = new Array(); // 已选中数组
var ind_flag_arr = new Array('21','31','37'); var Industry = {
// 行业列表
init : function(){
var _str='',_id='';
if (ind_flag_arr.length>0){
for (var i in ind_flag_arr){
_str+=','+label[ind_flag_arr[i]];
_id+=','+ind_flag_arr[i];
}
$('#btn_IndustryID').val(_str.substring(1));
$('#IndustryID').val(_id.substring(1));
}
}, // 单选输出
Show2 : function(){
var output='',flag,output2='',output3='';
output="<div class='header'>"
+"<script type='text/javascript' src='pages/gather/js/jquery.fastLiveFilter.js'></script>"
+"<input type='text' name='label' id='inputText' style='width:40%;margin-bottom:10px;margin-left:10px'>"
+"<input type='text' name='url' id='inputUrl' style='width:40%;margin-bottom:10px;margin-left:10px'>"
+"<input type='button' name='name' value='添加' style='width:10%;margin-bottom:10px;margin-left:10px' onclick='Industry.confirm2()'>"
+"</div>"
+"<div class='middle'>"
+"<div class='tab'>"
+"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)' class='addCheck' alt='start'>新闻</a>"
+"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)' alt='media'>军事</a>"
+"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)' alt='people'>文人</a>"
+"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)' alt='qiye'>企业高管</a>"
+"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)' alt='department'>政坛官员</a>"
+"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)' alt='internet'>互联网风云</a>"
+"</div>"
+"<div class='content'>"
+"<ul id='search_list'>"; for (var i in start){
output+='<li title="'+start_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+start[i]+'</li>';
} output+="</ul></div></div>";
$('#drag').width('760px');
$('#IndustryList').html(output);
$('#IndustrySelected dd').html(output2);
// 鼠标悬停变色
$('#IndustryAlpha li').hover(function(){$(this).addClass('over')},function(){$(this).removeClass('over')});
$('#inputText').fastLiveFilter('#search_list');
},
confirm2 : function(){
var text=$("#inputText").val()+":";
var url=$("#inputUrl").val();
var trs="<tr>"
+"<td>"
+"<label>"
+text
+"</label>"
+"</td>"
+"<td>"
+"<input type='text' name='site' value='"
+url
+"'>"
+"</td>"
+"<td>"
+"<script type='text/javascript' src='pages/gather/js/sitedelete.js'></script>"
+"<img alt='' src='images/yq/site/noTip.jpg' onclick='deletetr(this)'>"
+"</td>"
+"</tr>";
$("#addTable tr").eq(4).before(trs);
var siteNum=$("#addTable tr").length-5;
var labelText="站点"+siteNum+":";
var trlength=$("#addTable tr").length-2;
$("#addTable tr").eq(trlength).children().children().eq(0).text(labelText);
$("#lsite").text("√");
$("#lsite").hide();
boxAlpha();
},
changeLabel:function(element){
$(".tab a").removeClass("addCheck");
$(element).addClass("addCheck");
//将content中的内容清空，重新载入数据
$(".content ul").html('');
var labelText=$(element).attr("alt");
var nameLabel=labelText;
var nameNumber=nameLabel+"_number";
var content="";
if(nameLabel=="start"){
for (var i in start){
content+='<li title="'+start_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+start[i]+'</li>';
}
}else if(nameLabel=="media"){
for (var i in media){
content+='<li title="'+media_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+media[i]+'</li>';
}
}else if(nameLabel=="people"){
for (var i in people){
content+='<li title="'+people_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+people[i]+'</li>';
}
}else if(nameLabel=="qiye"){
for (var i in qiye){
content+='<li title="'+qiye_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+qiye[i]+'</li>';
}
}else if(nameLabel=="department"){
for (var i in department){
content+='<li title="'+department_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+department[i]+'</li>';
}
}else if(nameLabel=="internet"){
for (var i in internet){
content+='<li title="'+internet_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+internet[i]+'</li>';
}
}
$(".content ul").html(content);
$('#IndustryAlpha li').hover(function(){$(this).addClass('over')},function(){$(this).removeClass('over')});
$('#inputText').fastLiveFilter('#search_list');
},
Chk2 : function(id,element){
var text=$(element).text();
var title=$(element).attr("title");
$('#inputText').val(text);
$("#inputUrl").val(title);
$(element).text();
}
} // 单选
function IndustrySelect_3(){
console.info("进入了")
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);
Industry.Show2();
boxAlpha();
draglayer();
}
当点击关闭的时候，把一个值存入tipHide中，每次加载页面的时候，先读取这个值，当tipHide==show的时候，显示！tipHide==hide的时候，隐藏
window.onload=function(){
$(".divContent1 table tr:odd").addClass("journalBg");
//从cookie中读取，看是否隐藏小提示
var tipHideValue=$.cookie("tipHide");
if(tipHideValue==$.cookie("not_existing")){
$.cookie("tipHide","show",{expires:30});
}
var tipHideValue=$.cookie("tipHide");
if(tipHideValue=="show"){
$(".divTip").show();
}else{
$(".divTip").hide();
}
};
//点击取消提示
$("#cancleTip").click(function(){
$(".divTip").hide();
$.cookie("tipHide","hide",{expires:30});
});
DIV+CSS实战（五）的更多相关文章
- DIV+CSS实战(三)
一.说明 在上篇博客<DIV+CSS实战(二)>中,实现了头部以及Tab标签卡,下面开始实现内容区域,要实现的效果如下: 二.内容最外层的设计(边框) 给最外层加边框,并且设置高度随着里面 ...
- DIV+CSS实战(二)
一.说明 在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名 和上次登录的时 ...
- DIV+CSS实战(四)
一.说明 在上篇博文<DIV+CSS(三)>中,一个页面基本上展示出来了!下面实现以下页面上的一些功能,比方批量删除等功能.这里以批量删除为例,批量禁止,批量启用和批量删除差不多,只不过一 ...
- DIV+CSS实战(一)
一.说明 作为一个后台的程序员,我也是很少写前端,最近有一个项目,前端主要是由我来负责,就把我在项目中所学到的东西,记录下来!我的页面要嵌入到另一个系统中,所以,并不是按照传统的top,left,co ...
- 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行业企业需求最多的人才 结合最新的 ...
随机推荐
- python之函数嵌套与闭包
一:函数的嵌套:在函数内部在定义一个函数,一层套一层 def father(name): print("from father %s" %name) def son(): prin ...
- VirtualBox“切换到无缝模式”和“自动调整显示尺寸”菜单无法使用
现象:VirtualBox“切换到无缝模式”和“自动调整显示尺寸”菜单无法使能,无法全窗口显示虚拟机桌面,菜单状态如下图所示: 原因:该功能的支持需要安装VirtualBox增强功能 方法:安装Vir ...
- Spring,Hibernate 集成解决多hbm.xml文件繁多的方案
开发一个大一点的项目有很多的hbm.xml文件,有时候上百个也不稀奇,如果用 <property name="mappingLocations"> <list&g ...
- out对象以及网上答题系统
out对象的主要功能是向客户输出响应信息,其主要方法为“print()”,可以输出任意类型的数据,HTML标记可以作为out输出的内容. 代码: 程序截图
- springmvc处理url请求步骤
处理步骤: 1.调用DispatcherServlet的doService方法 2.进入DispatchServlet的doDispatch方法 3.进入DispatchServlet的getHand ...
- __init__和__new__，以及self
__new__: 每次实例化类的时候会默认先执行__new__,进行实例化类. 如果想改变默认__new__行为,可以对它进行自定义,必须有返回实例. __init__: 对实例化的类进行初始化, ...
- html中的innerHTML
首先看个例子 <html> <head> <script type="text/javascript"> function getInnerHT ...
- 使用git提交代码到GitHub
0.下载Git Bash,在Windows系统可以用Git Bash通过简单的命令将代码提交到GitHub1.打开项目所在的文件夹,右键,"Git Bash Here"2.初次使用 ...
- 非换行空白：non-breaking space
一 维基百科(英文版)词条 In word processing and digital typesetting, a non-breaking space (" ") (also ...
- Monkey原理初步和改良优化--Android自动化测试学习历程
章节:自动化基础篇——Monkey原理初步和改良优化(第三讲) 主要讲解内容与笔记: 一.理论知识: 直接看文档,来了解monkey的概念.基本原理,以及如何使用. First,what is And ...