MBaas项目--这是进入公司实习接到第二个项目页面，前面第一个EMM项目页面，由于没怎么认真对待，所以也没去认真总结了，感觉稀里糊涂的完成第一个项目后，一点收获都没有，感觉还只是根据他们给的模板界面，进行复制拷贝，没有自己的思考，感觉自己假如没有这些模板代码，让自己去写，可能要憋很久，而且会写的非常不规范，如果，我只是一味的去拷贝粘贴，那么我永远只能靠这种方式来写页面，一旦停止这种模板的提供，让我单独写页面，那么到时又得重头开始，那既然如此，为什么不总结下这些比较规范的模板，然后为我所用呢，之前听前辈说，刚开始做这些页面是从模仿拷贝开始的，但不能一直停留在这个层面，当模仿拷贝到一定程度，后自己自然对这些页面结构布局等有比较清晰的认识了，然后必须赶紧去总结归纳，真正变成自己的东西，慢慢的开始抛弃这些模板，自己真正动手去开发属于自己的一套规范模板；所以，现在抓住每一次项目总结的机会，来进一步掌握这些模板是怎么生成的，下面开始从一个个页面元素开始：
一.创建文件模板首先创建好网站页面需要的几个文件夹，便于项目的管理，具体文件目录如下图：
<img src="https://img-blog.csdn.net/20140824133737463?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ2Jpbmh1aTgxMjE4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
1.其中CSS文件中一般包含四个.CSS文件，分别为：main.css,index.css,style.css,mycss.css;我们一般写的个人css样式写在mycss.css中，其他三个个我还没搞清楚，这个CSS文件书写的一个规范；一般我们不要动前三个别人给我们写好的模板css文件，我们自己写的就放在自己的CSS文件里，不然后期提交给后台整合的时候，没法统一css文件版本，会出现错乱；
2.images文件中存取用PS切取UI图的图片，注意这些图片的一些命名规则，别重复了，一般见名知意；
3.js文件主要放两个文件：一个是JQuery框架的系统包，另一个就是我们自己写的.js文件，一般最好不要把JS代码写在页面中，把他单独提取出来；
4.最后一个文件就用来存放各个页面的html代码的页面文件了
二.设计页面大体布局：
1.首先看下页面的骨架布局：
然后让我们创建一个html骨架模板结构：
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="content-type" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
<title>MBass</title>
<link href="../css/index.css" rel="stylesheet" />
<link href="../css/main.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
<link href="../css/myCss.css" rel="stylesheet" />
<script src="../js/main.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script src="../js/myjs.js" type="text/javascript"></script>
</head>
<body >
</body>
</html></span>然后根据上面的模板和结构设计开始布局：
html代码：
<span style="font-size:14px;"> <div id="content">
<div id="header">header</div>
<div id="contenter">
<div id="border_left" >左侧菜单导航</div>
<div id="border_right" class="border_right">
<div class="back_con">
右侧1
</div>
<div class="kaifa">右侧2</div>
</div>
</div>
</div>
</span>css代码：
在index.css文件中写下骨架模板的css样式：
<span style="font-size:14px;">@charset "utf-8";
a,a:hover{
text-decoration:none;
}
body{
margin:0;
padding:0;
font-family:"微软雅黑","宋体",Arial, "\5B8B\4F53", sans-serif;
background:#eff0f3;
}
#content{
margin:0;
padding:0;
width:100%;
}
#header{
height:50px;
background:#004a8f;
}
#contenter{
width:100%;
margin:0 auto;
overflow: hidden;
}
#border_left{
width:100px;
height:500px;
background: red;
float:left;
}
.border_right {
background: yellow;
/*bottom: 0;*/
left: 100px;
position: absolute;
right: 0;
/*top: 50px;*/
}
.back_con{
height:50px;
background: green;
}
.kaifa{
height:300px;
background: white
}
</span>
效果图：
3.接着我们开始填充这些骨架模块：
（1）填充header部分：
首先是头部的logo部分，直接给一个div设置背景图即可；
<span style="font-size:14px;"><div class="logo"></div></span><span style="font-size:14px;">/*logo*/
.logo{
height:50px;
width:112px;
background: url("../images/logo.png") center center no-repeat;
float:left;
}</span>然后是中部的横向菜单：
<span style="font-size:14px;"> <div class="menu">
<ul>
<li class="development touming">
<a href="#">应用开发</a>
</li>
<li class="management ">
<a href="#">应用管理</a>
</li>
<li class=" plug_in touming">
<a href="#">应用插件</a>
</li>
<li class="template touming">
<a href="#">应用模板</a>
</li>
<li class="transfer touming">
<a href="#">应用转移</a>
</li>
<li class="cloud_service touming">
<a href="#">云服务</a>
</li>
</ul>
</div></span><span style="font-size:14px;">/*中间横向菜单标题*/
.menu{
float:left;
line-height: 50px;
font-size: 16px;
color: #ffffff;
}
.menu ul{
overflow: hidden;
}
.menu li{
float: left;
padding-left: 25px;
margin-right: 10px;
}
.menu a{
color: #ffffff;
}
.development {
background: url("../images/development.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
.management {
background: url("../images/management.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
.plug_in {
background: url("../images/plug_in.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
.template {
background: url("../images/template.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
.transfer {
background: url("../images/transfer.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
.cloud_service {
background: url("../images/cloud_service.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
/*通过设置Li的透明度来实现点中菜单和未选中菜单的字体效果*/
.touming{
opacity: 0.6;
}</span>最后是右侧部分：
<span style="font-size:14px;"> <div class="index_right">
<ul>
<li class="touming"><a href="#">首页</a></li>
<li class="touming"><a href="#">文档教程</a></li>
<li class="touming admin"><a href="#">admin</a></li>
<li class="touming"><a href="#">退出</a></li>
</ul>
</div></span><span style="font-size:14px;">/*右侧菜单*/
.index_right{
float:right;
line-height: 50px;
font-size: 12px;
color: #ffffff;
margin-right: 10px;
}
.index_right ul{
overflow: hidden;
}
.index_right li{
float: left;
margin-right: 10px;
}
.index_right a{
color: #ffffff;
}
.admin{
background: url("../images/admin.png") no-repeat scroll right center rgba(0, 0, 0, 0);
padding-right: 15px;
}</span>效果图：
这个导航栏主要联系logo背景设置。还有ul列表制作带背景图标的横向菜单导航
（2）.填充左侧border_left纵向菜单栏部分：
这边不需要设置ul_li列表浮动，正常设置背景图标就可以
<span style="font-size:14px;"><div id="border_left" >
<div class="left_menu">
<ul>
<li class="list1"><a href="#">管理面板</a></li>
<li class="list2"><a href="#">数据统计</a></li>
<li class="list3"><a href="#">信息推送</a></li>
<li class="list4 newlist">
<a href="#">API统计</a>
<div class="newLogo"></div>
</li>
<li class="list5 newlist">
<a href="#">数据库管理</a>
<div class="newLogo"></div>
</li>
<li class="list6"><a href="#">应用转移</a></li>
<li class="list7"><a href="#">应用开发</a></li>
</ul>
</div>
</div></span><span style="font-size:14px;">/*左侧纵向菜单导航部分*/
.left_menu{
padding-top: 50px;
font-size: 14px;
color: #004a8f;
text-align: center;
}
.left_menu li{
margin-bottom: 10px;
cursor: pointer;
}
.list1{
background: url("../images/list1.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list2{
background: url("../images/list2.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list3{
background: url("../images/list3.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list4{
background: url("../images/APILogo1.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list5{
background: url("../images/shujuLogo1.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list6{
background: url("../images/list1.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list7{
background: url("../images/list1.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.newlist{
position: relative;
}
.newLogo{
background: url("../images/new.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 20px;
left: 63px;
position: absolute;
top: -5px;
width: 29px;
}
</span>效果图：
（3）.左侧内容头部：
<span style="font-size:14px;"><div class="back_con">
<div class="back"></div>
<div class="app_name">应用名称1</div>
<div class="delete"></div>
</div></span><span style="font-size:14px;">/*右侧内容头部*/
.back{
background: url("../images/back.png") no-repeat scroll center center rgba(0, 0, 0, 0);
height: 50px;
width: 50px;
margin-right:10px ;
float:left;
}
.app_name{
color: #000000;
font-size: 18px;
line-height: 50px;
float: left;
margin-right:10px ;
}
.delete{
background: url("../images/delete.png") no-repeat scroll center center rgba(0, 0, 0, 0);
height: 50px;
width: 100px;
float: left;
}</span>效果图：
（4）.添加左侧菜单切换箭头图标：
<span style="font-size:14px;"><div id="jiantou" class="jiantou1">
<div id="jiantou1" class="left_jiantou1"></div>
<div id="jiantou2" class="left_jiantou2"></div>
<div id="jiantou3" class="left_jiantou3"></div>
<div id="jiantou4" class="left_jiantou4"></div>
<div id="jiantou5" class="left_jiantou5"></div>
<div id="jiantou6" class="left_jiantou6"></div>
<div id="jiantou7" class="left_jiantou7"></div>
</div></span><span style="font-size:14px;">/*左侧导航切换箭头图标*/
.jiantou1{
position: absolute;
top: 101px;
left: 101px;
z-index: 30px;
background: red;
}
.left_jiantou1{
background: url("../images/left_jiantou.png") no-repeat scroll left center rgba(0, 0, 0, 0);
height: 16px;
left: -15px;
position: absolute;
top: 25px;
width: 15px;
z-index: 30;
}
.left_jiantou2{
background: url("../images/left_jiantou.png") no-repeat scroll left center rgba(0, 0, 0, 0);
height: 16px;
left: -15px;
position: absolute;
top: 115px;
width: 15px;
z-index: 30;
display: none;
}
.left_jiantou3{
background: url("../images/left_jiantou.png") no-repeat scroll left center rgba(0, 0, 0, 0);
height: 16px;
left: -15px;
position: absolute;
top: 205px;
width: 15px;
z-index: 30;
display: none;
}
.left_jiantou4{
background: url("../images/left_jiantou.png") no-repeat scroll left center rgba(0, 0, 0, 0);
height: 16px;
left: -15px;
position: absolute;
top: 295px;
width: 15px;
z-index: 30;
display: none;
}
.left_jiantou5{
background: url("../images/left_jiantou.png") no-repeat scroll left center rgba(0, 0, 0, 0);
height: 16px;
left: -15px;
position: absolute;
top: 375px;
width: 15px;
z-index: 30;
display: none;
}
.left_jiantou6{
background: url("../images/left_jiantou.png") no-repeat scroll left center rgba(0, 0, 0, 0);
height: 16px;
left: -15px;
position: absolute;
top: 465px;
width: 15px;
z-index: 30;
display: none;
}
.left_jiantou7{
background: url("../images/left_jiantou.png") no-repeat scroll left center rgba(0, 0, 0, 0);
height: 16px;
left: -15px;
position: absolute;
top: 555px;
width: 15px;
z-index: 30;
display: none;
}
</span>(4).向kaifa模块中加入7个切换DIV，每次只有一个div是显示的，其他都带有一个隐藏class,即ul_display_none;
<span style="font-size:14px;"><div id="kaifa" class="kaifa">
<div id="right_menu1" class="">1</div>
<div id="right_menu2" class="ul_display_none">2</div>
<div id="right_menu3" class="ul_display_none">3</div>
<div id="right_menu4" class="ul_display_none">4</div>
<div id="right_menu5" class="ul_display_none">5</div>
<div id="right_menu6" class="ul_display_none">6</div>
<div id="right_menu7" class="ul_display_none">7</div>
</div>
</div></span>,然后我们开始做点击左侧菜单，来切换右侧kaifa中div的效果：
①.当点击菜单时，自身变换背景图，上次点击的元素背景恢复，
②.自身元素旁边的箭头图标出现，上次点击元素旁边箭头图标消失；
③,右侧对应的div出现消失；
为此，我们需要再书写几个用于切换的css属性，包含点击元素背景，menu1~menu7;.list_1~.list_7;箭头图标：left_jiantou1~left_jiantou7;ul_display_none;右侧right_menu1~right_menu7;
<span style="font-size:14px;">/*点击后的图标*/
.list_1{
background: url("../images/list_1.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list_2{
background: url("../images/list_2.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list_3{
background: url("../images/list_3.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list_4{
background: url("../images/APILogo2.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list_5{
background: url("../images/shujuLogo2.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list_6{
background: url("../images/list_1.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
.list_7{
background: url("../images/list_1.png") no-repeat scroll center top rgba(0, 0, 0, 0);
padding-top: 60px;
}
</span>页面结构及样式准备完毕，开始书写JS文件中的JS方法：
为了更好的体现内容--样式--行为分离的思想；我们不在html代码中嵌入任何的js代码，而是通过js添加绑定事件处理程序的方法来为元素添加绑定函数：
首先定义一个简化的通过元素ID获取元素对象的方法：
<span style="font-size:14px;">// 根据id获取元素，简便函数形式
function $$(id) {
return document.getElementById(id);
}
</span>然后定义全局变量：
<span style="font-size:14px;">// 先定义全局变量
var menu_now = 1;//当前点击菜单标号
var jiantou_length;//箭头个数
var kaifa_length;//kaifa内容块中DIV数
window.onload = function() {
// 当资源加载完毕，开始为全局变量赋值；如果在上面直接就赋值的话，会出现错误，因为有可能资源还未加载完全，没法通过$$("");获取元素对象
// 从而导致错误，我刚开始做的时候就出现这种错误，所以，可以先在全局声名变量而暂时不赋值，等资源加载完毕，onload事件
// 启动时，为其赋值，这样既确保文件中所有的function都能公用这些全局变量，而且又能避免上面所提的加载不完全就赋值的错误；
jiantou_length = $$("jiantou").children.length;
kaifa_length = $$("kaifa").children.length;
// 为每一个左侧菜单添加点击事件及其处理程序函数，这边用到了闭包
for(var i=1;i<=7;i++){
$$("menu"+i).οnclick=function(num){
// 创建一个Function对象，然后return返回
var clickFunc=new Function("menu("+num+")");
return clickFunc;
}(i);
}
}
// 左侧导航栏菜单切换函数
function menu(id) {
// 先判断当前选中的菜单是否和你上次选中菜单是否一致，若一致，则className保持不变；
// 当不一致时，需要把当前菜单className赋值点击后的className,而上次选中菜单背景图标恢复；
if (menu_now == id) {
$$("menu" + id).className = "list_" + id;
} else {
$$("menu" + id).className = "list_" + id;
$$("menu" + menu_now).className = "list" + menu_now;
}
// 设置完后，记得更新menu_now的值为传入的id；
menu_now = id;
// 然后处理开发模块中DIV的隐藏和出现
// 该循环主要通过设置当前选中菜单对应的div的className设置为空，不隐藏，然后箭头设置为相对应的背景图标
// 其他不是当前选中的菜单对应的div背景和箭头图标恢复原来的状态（隐藏）
for (var i = 1; i <= kaifa_length; i++) {
if (id == i) {
$$('right_menu' + id).className = '';
$$('jiantou' + id).className = 'left_jiantou' + id + ''
} else {
$$('right_menu' + i).className = 'ul_display_none';
$$('jiantou' + i).className = 'left_jiantou' + i + ' ul_display_none'
}
}
}
</span>(5)填充内容左侧导航栏：
<span style="font-size:14px;"><div id="right_menu4" class="ul_display_none ">
<div class="ul_float_left left_API">
<div id="APIrequest">
<span>API请求</span>
<ul>
<li class="now_click"><a href="#">API总汇</a></li>
<li class="old_click"><a href="#">Great请求</a></li>
<li class="old_click"><a href="#">Find请求</a></li>
<li class="old_click"><a href="#">Get请求</a></li>
<li class="old_click"><a href="#">Update请求</a></li>
<li class="old_click"><a href="#">Delete请求</a></li>
<li class="old_click"><a href="#">短信接口请求</a></li>
</ul>
</div>
<div id="wenjian" >
<span>文件</span>
<ul>
<li class="old_click"><a href="#">存储</a></li>
<li class="old_click"><a href="#">流量</a></li>
<li class="old_click"><a href="#">上传和删除API</a></li>
<li class="old_click"><a href="#">下载API</a></li>
</ul>
</div>
</div>
</div></span><span style="font-size:14px;">#right_menu4{
overflow: hidden;
}</span><span style="font-size:14px;">/*菜单四API请求左侧导航菜单*/
.left_API{
border-right: 1px solid #808080;
}
#APIrequest,#wenjian{
width:150px;
font-size: 14px;
/*background: red;*/
}
#APIrequest span,#wenjian span{
font-size: 12px;
}
#APIrequest li,#wenjian li{
padding-left: 18px;
height:40px;
line-height:40px ;
}
#APIrequest li a,#wenjian li a{
color: #808080;
}
#APIrequest li a:hover,#wenjian li a:hover{
color: #000000;
}
.now_click{
color: #000000;
background: url("../images/now_tui.png") no-repeat left center;
}
.old_click{
color: #808080;
background: url("../images/now_tui.png") no-repeat left center;
}
#wenjian{
margin-top: 30px;
}</span>
然后准备好右侧api内容区域div 11个：
<span style="font-size:14px;"><!-- API 请求右侧内容侧开始-->
<div id="api_contenter">
<div id="api1" class="">1</div>
<div id="api2" class="ul_display_none">2</div>
<div id="api3" class="ul_display_none">3</div>
<div id="api4" class="ul_display_none">4</div>
<div id="api5" class="ul_display_none">5</div>
<div id="api6" class="ul_display_none">6</div>
<div id="api7" class="ul_display_none">7</div>
<div id="api8" class="ul_display_none">8</div>
<div id="api9" class="ul_display_none">9</div>
<div id="api10" class="ul_display_none">10</div>
<div id="api11" class="ul_display_none">11</div>
</div>
<!-- API 请求右侧内容侧结束--></span>该部分的css文件更新一下：
<span style="font-size:14px;">/*菜单四API请求左侧导航菜单*/
#right_menu4{
overflow: hidden;
position: relative;
}
.left_API{
border-right: 1px solid #808080;
}
#APIrequest,#wenjian{
width:150px;
font-size: 14px;
/*background: red;*/
}
#APIrequest span,#wenjian span{
font-size: 12px;
}
#APIrequest li,#wenjian li{
padding-left: 18px;
height:40px;
line-height:40px ;
}
#APIrequest a,#wenjian a{
color: #808080;
}
#APIrequest a:hover,#wenjian a:hover{
color: #000000;
}
.now_click{
background: url("../images/now_tui.png") no-repeat left center;
}
.old_click{
background: url("../images/ch_tui.png") no-repeat left center;
}
#APIrequest .now_click a{
color: #000000;
}
#APIrequest .now_click a:hover{
color: #808080;
}
#wenjian{
margin-top: 30px;
}
/*api右侧内容CSS*/
#api_contenter{
padding:10px;
position: absolute;
top:0px;
right:0px;
left:151px;
background: red;
}</span>然后书写点击菜单切换的js方法：
<span style="font-size:14px;">var api_now=1;//当前api点击菜单
var apiContenter_length;//api内容div个数
// api菜单切换
apiContenter_length=$$("api_contenter").children.length;
for(var i=1;i<=apiContenter_length;i++){
// alert(apiContenter_length);
$$("api_list"+i).οnclick=function(num){
//
var api_click=new Function("APIrequest("+num+")");
// alert(num);
return api_click;
}(i);
}
function APIrequest(id){
if(api_now==id){
$$("api_list"+id).className="now_click";
}else{
$$("api_list"+id).className="now_click";
$$("api_list"+api_now).className="old_click";
}
api_now=id;
for(var i=1;i<apiContenter_length;i++){
if(id==i){
$$("api"+i).className="";
}else{
$$("api"+i).className="ul_display_none";
}
}
}
</span>
这时会看到页面有个问题，就是kaika内容区域在那些没有内容填充的区域是没撑开的；所以需要用JS写一个内容高度适配函数；
<span style="font-size:14px;">// kaifa DIV高度自适应函数
// 思路很简单，首先先获得屏幕的高度，然后在获得左侧right_menu+id对应的DIV的高度，然后比较两者的大小，
// 谁大，则kaifa DIV就取谁的高度，当然，不一定是说一定要去这两者的高度，可以根据实际适当的换成任意你想调换的高度;
// 其中有两个涉及获取屏幕大小及普通DIV大小的函数分别为：
// window.screen.height;$$("right_nemu"+id).offsetHeight;
function kaifa_height(id){
var screenHeight=parseInt(window.screen.height)-240;
var rightMenuHeight=parseInt($$("right_menu"+id).offsetHeight);
// alert(screenHeight);
// alert(rightMenuHeight);
if(screenHeight>(rightMenuHeight+40)){
$$("kaifa").style.height=screenHeight+"px";
}else{
$$("kaifa").style.height=(rightMenuHeight+40)+"px";
}
// alert($$("kaifa").style.height);
}
</span>效果图：
未加这个函数前：
加了该函数后效果：
然后我们开始写数据库管理的中间页签导航部分：
<span style="font-size:14px;"> <!-- 数据库管理中间页签部分开始 -->
<div id="shuju_left" class="shuju_left">
<div class="shuju_left_search">
<div class="search_input">
<input type="text" placeholder="搜索Class Nam"/>
</div>
<a href="#"></a>
</div>
<ul class="sjl_margin_top1">
<li><a href="#">aa<span>0</span></a></li>
<li><a href="#">aa<span>0</span></a></li>
<li><a href="#">aa<span>0</span></a></li>
<li><a href="#">aa<span>0</span></a></li>
<li><a href="#">aa<span>0</span></a></li>
<li><a href="#">aa<span>0</span></a></li>
</ul>
<div class="sjl_margin_top1">
<a href="#" class="myBotton">创建class</a>
<a href="#" class="myBotton sjl_margin_top2">数据导入</a>
</div>
</div>
<!-- 数据库管理中间页签部分结束--></span><span style="font-size:14px;">/*左侧菜单栏css*/
.shuju_left{
padding:10px 5px 10px 0px;
width: 170px;
border-right: 1px solid #d0d0d0;
}
.shuju_left_search{
display: inline-block;
padding-left: 5px;
overflow: hidden;
border: 1px solid #d0d0d0;
}
.search_input{
float:left;
margin-right: 10px;
}
.shuju_left_search input{
width: 110px;
line-height: 23px;
border: none;
outline: none;
}
.shuju_left_search a{
background: url('../images/search.png') no-repeat left center;
width: 16px;
height: 25px;
float: right;
margin-right: 5px;
display: inline-block;
}
.sjl_margin_top1{
margin-top: 20px;
}
.sjl_margin_top2{
margin-top: 10px;
}
.shuju_left li a{
overflow: hidden;
display: block;
width: 140px;
line-height: 40px;
background: url('../images/now_tui.png') no-repeat left center;
font-size: 12px;
color: #d0d0d0;
padding-left: 18px;
}
.shuju_left li a:hover{
background: url('../images/ch_tui.png') no-repeat left center;
color: black;
}
.shuju_left li span{
float: right;
}
a.myBotton{
display: block;
width:140px;
line-height:30px;
background-color:#357ae9;
color: #ffffff;
text-align: center;
border: 1px solid #2f5bb7;
border-radius: 3px;
font-size: 14px;
}
a.myBotton:hover{
background: #e0f0ff;
color: #007ccd;
border: 1px solid #96c5f1;
}
</span>效果图：
然后我们就开始写数据右侧的几个内容区域框架了，首先确定8个菜单对应8个内容快（其中有一个菜单块是隐藏的）；默认内容快是当我点击最左侧导航栏中的图标进入数据库管理内容区域显示的内容；其他的内容块可通过刚开始都是设置为隐藏状态的，在onload事件发生时为每一个数据库管理块的左侧菜单绑定onclick事件处理程序，基本上和前面最左侧菜单切换还有API菜单切换方法是一致的；所以在这里不再多述；切换效果再说明下吧：当绑定事件处理程序后，点击菜单，当前点击菜单字体颜色变黑，图标变量，而其他菜单成相反变化；然后右侧对应的内容块显示，其他内容块隐藏，其实就是加减className;
首先是写最左侧的8个内容DIV：
<span style="font-size:14px;"> <!-- 数据库管理右侧切换内容区域开始 -->
<div id="shuju_right" class="shuju_right ul_hidden">
<!-- 默认页开始 -->
<div id="shuju_right0" class="ul_display_none">
默认页
</div>
<!-- 默认页结束 -->
<!-- _File开始 -->
<div id="shuju_right1" class="">
_File
</div>
<!-- _File结束 -->
<!-- _Followee开始 -->
<div id="shuju_right2" class="ul_display_none">
_Followee
</div>
<!-- _Followee结束 -->
<!-- _Follewer开始 -->
<div id="shuju_right3" class="ul_display_none">
_Follewer
</div>
<!-- _Follewer结束 -->
<!-- _Installation开始 -->
<div id="shuju_right4" class="ul_display_none">
_Installation
</div>
<!-- _Installation结束 -->
<!-- _Notification开始 -->
<div id="shuju_right5" class="ul_display_none">
_Notification
</div>
<!-- _Notification结束 -->
<!-- _Role开始 -->
<div id="shuju_right6" class="ul_display_none">
_Role
</div>
<!-- _Role结束 -->
<!-- _User开始 -->
<div id="shuju_right7" class="ul_display_none">
_User
</div>
<!-- _User结束 -->
</div>
<!-- 数据库管理右侧切换内容区域结束 --></span>
然后为数据库管理中间菜单a加上后缀数字递增的id名称（主要是为了后面JS菜单切换函数做准备），包括刚才我们写的右侧切换的内容区域也是类似命名的，这算是一个命名技巧吧；
<span style="font-size:14px;"><ul id="sjl_menu" class="sjl_margin_top1">
<li><a href="#" id="sjl_menu1" class="now_menu">aa<span>0</span></a></li>
<li><a href="#" id="sjl_menu2" class="old_menu">aa<span>0</span></a></li>
<li><a href="#" id="sjl_menu3" class="old_menu">aa<span>0</span></a></li>
<li><a href="#" id="sjl_menu4" class="old_menu">aa<span>0</span></a></li>
<li><a href="#" id="sjl_menu5" class="old_menu">aa<span>0</span></a></li>
<li><a href="#" id="sjl_menu6" class="old_menu">aa<span>0</span></a></li>
</ul></span>并且还要为其添加上一个供切换使用的className:now_menu及old_menu;
<span style="font-size:14px;">.now_menu{
background: url('../images/now_tui.png') no-repeat left center;
color: black;
}
.old_menu{
background: url('../images/ch_tui.png') no-repeat left center;
color: #d0d0d0;
}
</span>然后书写菜单切换方法function shuju_qiehuan(id)
<span style="font-size:14px;">// 数据库管理中间页签切换函数
function shuju_qiehuan(id){
//
if(id==now_click_sji_menu){
$$("sjl_menu"+id).className="now_menu";
}else{
$$("sjl_menu"+id).className="now_menu";
$$("sjl_menu"+now_click_sji_menu).className="old_menu";
}
now_click_sji_menu=id;
for(var i=0;i<shuju_right_length;i++){
if(i==id){
$$("shuju_right"+id).className="";
}else{
$$("shuju_right"+i).className="ul_display_none";
}
}
}</span>然后在onload方法中为每个菜单绑定事件处理程序：
<span style="font-size:14px;">var now_click_sji_menu=1;//当前点击的菜单编号
var sjl_menu_length;//数据管理菜单长度
var shuju_right_length;//右侧切换内容块个数
// 数据库管理中间页签切换函数
sjl_menu_length=$$("sjl_menu").children.length;
for(var i=1;i<=sjl_menu_length;i++){
$$("sjl_menu"+i).οnclick=function(num){
return new Function("shuju_qiehuan("+num+")");
}(i);
}
</span>
效果图：
然后开始写_File右侧内容的头部：
<span style="font-size:14px;"> <!-- _Flie头部开始 -->
<div class="_File_header">
<ul>
<li><a href="#">添加行</a></li>
<li><a href="#">删除行</a></li>
<li><a href="#">添加列</a></li>
<li><a href="#">查询</a></li>
<li><a href="#">刷新</a></li>
<li><a href="#" class="qita_a">其他</a></li>
</ul>
<div class="_File_header_right">
<a href="#" class="shehzilie_a">设置列</a>
<a href="#" class="yincang_a">隐藏左侧导航栏</a>
</div>
</div>
<!-- _Flie头部结束 --></span><span style="font-size:14px;">/*头部样式*/
._File_header{
overflow: hidden;
}
._File_header ul{
border: 1px solid #c2cfd8;
overflow: hidden;
border-radius: 3px;
float: left;
}
._File_header li{
float: left;
}
._File_header li a{
display: block;
line-height: 30px;
padding: 0px 12px;
}
._File_header li a:hover,._File_header li a.qita_a:hover{
background-color: #e0f0ff;
}
._File_header li a.qita_a{
padding-right: 22px;
background: url('../images/shujuxia.png') no-repeat 80% 50%;
}
._File_header_right{
float:left;
margin-left: 28px;
}
._File_header_right a{
float: left;
padding-left: 25px;
margin-right: 30px;
line-height: 30px;
}
a.shehzilie_a{
background: url("../images/shezhilie1.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
a.yincang_a{
background: url("../images/hideNav1.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
a.shehzilie_a:hover{
background: url("../images/shezhilie2.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
a.yincang_a:hover{
background: url("../images/hideNav2.png") no-repeat scroll left center rgba(0, 0, 0, 0);
}
</span>效果图：
接着是书写表格内容区域块：
这边需要注意的是,初始化表格样式：table{ border-collapse:collapse;border-spacing: 0px;}表示表格边框合并，然后边框间距为0px;
<span style="font-size:14px;"> <div class="sjr_content_content">
<table>
<thead>
<tr>
<th width=3%>
<input type="checkbox" class="ul_display_none"/>
<a href="#" class="checkbox_icon"></a>
</th>
<th>objectId STRING</th>
<th>ACL ACL</th>
<th>name STRING</th>
<th>url STRING</th>
<th>_type STRING</th>
<th>createdAt DATE</th>
<th>updatedAt DATE</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="ul_display_none "/><a href="#" class="checkbox_icon"></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="ul_display_none"/><a href="#" class="checkbox_icon"></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div></span><span style="font-size:14px;">/*_File内容部分*/
.sjr_content_content{
margin-top: 30px;
overflow-x:scroll;
}
.sjr_content_content table{
width: 1052px;
text-align: center;
border-collapse:collapse;
border-spacing: 0px;
}
.sjr_content_content th,.sjr_content_content td{
height: 41px;
border-right: 1px solid #c2cfd8;
}
.sjr_content_content th{
background-color: #DCDEDF;
}
.sjr_content_content td{
border-bottom: 1px solid #c2cfd8;
}
a.checkbox_icon{
display: block;
margin-left: 5px;
width: 20px;
height: 20px;
background-image: url('../images/checkIcon.png');
}
</span>这边还需要注意的是在设置checkbox的时候，要先写个checkbox组件隐藏，然后再写一个a标签覆盖背景图，然后调他的位置的时候要特别注意，默认他会紧贴表格左侧，当我们此时设置margin-left时，他虽然会向右偏移，但是同时也会撑大表格，使表格整体向右移，这是因为表格长度没有定死，表格的每个单元格也是没有定死长度大小，所以单元格完全是自适应长度大小的，所以会出现上面的情况，所以为了解决这一问题，我们可以采取两种方法：一是把表格单元格定死（第一列），然后再设置margin，二是为单元格设置relative定位，然后为要偏移的元素设置绝对定位；
效果图：
接着为这个表格中的checkbox_icon a标签添加点击事件处理程序，使其点击后切换图标，并且如果是td中的checkbox_icon被点击还会使整行的颜色背景变成蓝色
首先写个// 切换$checkbox_icon图标
function change_checkbox_icon(click_checkbox,thisobj)切换函数，然后将绑定在checkbox_icon上，参数说明：1.click_checkbox是当前点击checkbox_icon的相邻元素
checkbox元素；2.thisobj表示当前点击checkbox_icon元素；
<span style="font-size:14px;">// 切换$checkbox_icon图标
function change_checkbox_icon(click_checkbox,thisobj){
var checkbox_checked=click_checkbox.checked;
var checked_td=thisobj.parentNode;
if(checkbox_checked){
thisobj.className="checkbox_icon";
if(checked_td.tagName=="TD"){
checked_td.parentNode.style.background="#ffffff";
}
click_checkbox.checked=false;
}else{
thisobj.className="checkbox_icon2";
if(checked_td.tagName=="TD"){
checked_td.parentNode.style.background="#3090e4";
}
click_checkbox.checked=true;
}
}</span>我们在绑定该事件函数的时候首先我是通过JQUERY$(".checkbox_icon")获取所有的checkbox_icon的元素，然后这边可不能继续用JQUERY的click(function(){});这个点击事件函数，因为这个点击事件函数是要在$(function(){});或$(document).ready(function(){});这个函数中进行调用的，不然是不可以调用的，为此，我只好用传统的点击事件进行绑定了，由于JQUERY对象是没法直接调用JS原生方法的，所以需要把JQUERY对象转化为js对象，然后进行绑定，所以，根据这次经验，其实很多时候，我可以使用JQUERY的选择对象来拾取元素，然后再将其转化为JS对象，再应用js方法，毕竟JQUERY选择元素还是很方便的，然后呢在这两个函数中还用到了两个比较重要的对象属性，一个是previousSbling,表示元素的前一个相邻兄弟对象，然后parentNode表示元素的父对象，
<span style="font-size:14px;">// 为表格中的所有checkbox_icon绑定点击事件
var checkbox_icon_length=$(".checkbox_icon").length;
for (var i = 0; i < checkbox_icon_length; i++) {
$(".checkbox_icon")[i].οnclick=function(){
var click_checkbox = this.previousSibling ;
// console.log("aa");
change_checkbox_icon(click_checkbox,this);
}
};
</span>需要特别强调下，总结道这里的时候，我回头去看了下以前的代码，并测了下起代码发现一个严重的BUG，之前我做的页面中右侧的内容区的代码都是公用一套样式结构的，所以我就没怎么想，直接复制里面的元素，结果！！！结果！！自己都没想到这样子做有多严重的隐藏后果，假如我这样直接复用这些元素代码，我必须注意里面是否有重复的ID元素，我们知道，页面中元素ID是唯一的，假如你重复定义ID，那么取这些id元素时，他默认是取第一个ID元素对象的，而且，你在JS方法中运用的这些ID元素对象值都是同一个值，所以之前页面中，由于我把右侧内容区的代码无脑复用，导致表格中的checkbox的id都是和第一个内容区里的三个checkbox一致的，相当于我把第一个内容区表格中的三个checkbox连同ID值一起复制了6份，然后，我在js方法中写切换checkbox图标方法时，我首先要获取checkbox的id值，然后取得该ID对应的checkbox对象，然后取得其checked属性值，并根据该值来进行判断是否切换图标或td背景色，很不幸，假如我向上面说的，连同ID复制那些元素的话，会发现，当我点击第一个_file内容快中的checkbox_icon时，此时其相邻checkbox默认的checked值为false;则此时会切换图标，然后把相对应的checkbox中的checked值设为true;然后我再打开第二个_Followee的内容块，点击其表格中的checkbox_icon会发现，没有任何的反应，然后再点击一次，才进行切换，之前，我没有认真对待这个BUG，以为之前会出现这种错误时因为缓存问题，就没太在意，现在终于明白，原来是当我第一次点击_Followee的checkbox_icon时，我通过ID获取的checkbox元素其实是第一个_file内容块的checkbox，因为他们的id名是一致的，那么这时只能取第一个命名为id的元素，那么之前点击改变了checkbox的值设为true,那么现在——followee内容块再点击其checkbox中的checked值也为true那么此时根据函数定义，他是不切换图标和背景色，所以就出现这个BUG了，所以为了解决这个问题，一定要注意，代码不要随便拷贝，要先分析清楚他的结构和样式，当然还要注意检查他的id class等一些属性，不然，虽然页面效果可以出来，可后面自己写J方法，或则和后台对接的时候，也许就会出现很多问题的，还有就是，样式共用，主要通过class来指定，最好不要通过ID指定，id是独一无二的，记住千万不要重复！！！！然后我们选取元素的时候根据这一原则，也最好不要轻易用class选取元素，你要想清楚，里面很多元素可能都共有class属性，你有可能选取了一些你根本不需要改变的元素，可能他们没有同时显示在页面上，你没发察觉是否出错，所以这一点隐藏错误时很难发现的；所以一般选取元素就用ID吧；
页面切换效果图：
然后我准备做一个表格中按钮点击出现下拉框的效果，而且这个下拉菜单出现的位置刚好是按钮文字对应下的正下中位置；
首先先做出个按钮，然后再写出下拉菜单，然后将菜单display设为none，然后在按钮中绑定onclick事件进行focus的模拟，然后再绑定oblur事件当失去焦点时隐藏；
首先是按钮设置一般样式，然后向右移设置margin-right,下面是下拉菜单，思路很简单，首先切一张下拉菜单的三角符背景，然后构造下拉菜单的结构框架，包括三部分：
一是最外层框架，二是三角背景符号，三是ul列表项，最外层和三角背景div都要设置绝对定位，然后ul列表项只要按照一般下拉列表的样式即可，现在下拉菜单做好了，这边有个头疼的问题就是，你怎么让这个菜单刚好在按钮正下中位置呢，而且得考虑到不同长度分辨率的电脑，因为这边之所以头疼就是我在测试的时候在不同分辨下，起位置会发生偏差，现在我来 分析下为什么会发生偏差，因为现在我的做法是，为下拉菜单的最外层DIV设绝对定位，他是以div#shuju_right这个div做定位的，所以假设我在600x800分辨率下的屏幕上设置好位置，设置我菜单位置为left:300px,top:100px;然后我在另一个900x600的屏幕上，会发现菜单相对于按钮向左移动了一些，但是这是菜单设置的位置还是相对于div#shuju_right这个div，left:300px,top:100px,为什么会向左偏移呢，既然菜单相对div#shuju_right这个div没有动，那么可以确定是按钮的位置发生变化了，那看看按钮的位置为什么会发生变化呢，因为按钮在表格中，然后按钮向右浮动，相对于表格单元格左边框有5个px像素的距离，这个距离也是不会改变的，那么有推出是表格单元格的长度变化引起的，由于这个表格单元格的长度是自适应缩小或边长的，所以就会导致按钮位置向左移活向右移，那么久造成按钮的偏移；解决这一问题的方法，我还没实施，但是有了一个新的想法：就是我把菜单写在单元格中，然后也为其设位置为position定位，只不过是我需要把菜单放在按钮右边相邻的一个单元格，然后不设置他的left属性值，只是设置负的margin-left，使其向左偏移，这是因为左边框是固定的，按钮相对于左边框的位置总是5px,所以这个做法应该是可以解决的；这边还涉及一个很重的问题：
那就是设置了position为absolute的元素，在其还没有设置left和top属性值的时候，他的位置是在当前父元素中的默认位置的，但只要已设置left或top属性值，那么他就会在当前设置方向以最近的设置定位的父元素进行偏移，然后绝对定位后的元素设置margin-left 或margin-top值，他会相对于当前left,top片以后的位置进行偏移，所以根据这两个原理，就可以解决这一问题了；
效果图：
同理，为qita菜单添加一个下拉菜单，样式是公用的，只不过需要改下id名称，和把两者不一样的left和top属性提出来，单独设置即可，然后还需要注意的是，在chrome浏览器下，当一个元素获取焦点后，会出现颜色边框线，这是outline，也就是轮廓线，只需要设置outline_style:none即可；
关于右侧内容区域脚步的页码部分：
<span style="font-size:14px;"> <!-- _Flie脚步部分开始-->
<div id="sjr_content_footer" class="sjr_content_footer">
<ul>
<li><a href="#" class="left_right">上一页</a></li>
<li><a href="#" class="current_a">1</a></li>
<li><a href="#" class="footer_a">2</a></li>
<li><a href="#" class="footer_a">3</a></li>
<li><a href="#" class="left_right">下一页</a></li>
</ul>
</div>
<!-- _Flie脚步部分结束--></span><span style="font-size:14px;">/*数据内容区域的脚步CSS*/
.sjr_content_footer{
margin-top: 30px;
position: relative;
}
.sjr_content_footer ul{
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
margin-left: -476px;
margin-top: -12px;
}
.sjr_content_footer li{
float: left;
margin: 0px 10px;
}
.sjr_content_footer li a.footer_a,.sjr_content_footer li a.current_a{
display: block;
width: 22px;
line-height: 22px;
border: 1px solid #EFEFEF;
border-radius: 3px;
text-align: center;
}
.sjr_content_footer li a:hover{
background-color:#D4EBFF;
}
.sjr_content_footer li a.current_a{
background-color:#EFEFEF;
}
.sjr_content_footer li a.current_a{
background-color:#D4EBFF;
}
.sjr_content_footer li a.left_right{
display: block;
text-align: center;
line-height: 22px;
color: #0091DA;
}
.sjr_content_footer li a.left_right:hover{
color: black;
background: white;
}</span>个人遇到的问题是，当我设置脚步水平居中的时候，发现脚步会被隐藏一步分，为什么呢，分析下，由于shuju_right这个DIV中我设置了overFlow：hidden属性值，来清除左侧菜单栏左浮动的影响，于是shuju_right由于这个性质具有了包裹性，其大小取决于其中内容的大小，然后我们再看脚步最外层div,为了让内部ul绝对定位，我们为最外层设置relative定位，ul设置absolute定位，那么会发现，最外层div虽然在文档流中，但是其中的ul是absolute的，脱离文档流，所以不占据任何空间，导致最外层就没了高度，长度倒是自适应于其父元素，那么此时shuju_right的高度就是当前shuju_right+id内容大小再加上脚步最外层div margin-top：30px的高度+自身20px的padding，而由于ul是相对于最外层div进行定位的，而最外层div高度又为0，那相当于此时ul是排列在当前shuju_right+id内容大小再加上脚步最外层div margin-top：30px的高度以下的部分，那么由于shuju_right这DIV最多还剩10px padding供ul显示，所以ul有一部分被隐藏；既然分析清楚了原因，那我们就可以提出解决办法了；我觉得有两种思路，一种是增加垂直padding的距离，以便padding部分能有足够的空间包容下脚步；第二中方案是增加shuju_right的高度，我们可以设置一个类似于前面写过的kaifa_height()的函数，当我们点击左侧菜单时就对shuju_right的高度进行设置，通过获取shuju_right+id的高度再加上足够容下脚步的高度值，就解决了；
<span style="font-size:14px;">// shuju_right DIV高度自适应
function shuju_right_height(id){
var rightMenuHeight=parseInt($$("shuju_right"+id).offsetHeight)+60;
$$("shuju_right").style.height=rightMenuHeight+"px";
}
</span>
<span style="font-size:14px;"><!-- _Flie脚步部分开始-->
<div id="sjr_content_footer" class="sjr_content_footer">
<ul>
<li><a href="#" class="left_right">上一页</a></li>
<li><a href="#" class="current_a">1</a></li>
<li><a href="#" class="footer_a">2</a></li>
<li><a href="#" class="footer_a">3</a></li>
<li><a href="#" class="left_right">下一页</a></li>
</ul>
</div>
<!-- _Flie脚步部分结束--></span><span style="font-size:14px;">/*数据内容区域的脚步CSS*/
.sjr_content_footer{
margin-top: 30px;
position: relative;
}
.sjr_content_footer ul{
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -122px;
}
.sjr_content_footer li{
float: left;
margin: 0px 10px;
}
.sjr_content_footer li a.footer_a,.sjr_content_footer li a.current_a{
display: block;
width: 22px;
line-height: 22px;
border: 1px solid #EFEFEF;
border-radius: 3px;
text-align: center;
}
.sjr_content_footer li a:hover{
background-color:#D4EBFF;
}
.sjr_content_footer li a.current_a{
background-color:#EFEFEF;
}
.sjr_content_footer li a.current_a{
background-color:#D4EBFF;
}
.sjr_content_footer li a.left_right{
display: block;
text-align: center;
line-height: 22px;
color: #0091DA;
}
.sjr_content_footer li a.left_right:hover{
color: black;
background: white;
}</span><span style="font-size:14px;">// shuju_right DIV高度自适应
function shuju_right_height(id){
var rightMenuHeight=parseInt($$("shuju_right"+id).offsetHeight)+60;
$$("shuju_right").style.height=rightMenuHeight+"px";
}
</span>然后在shuju_qiehuan中条用该函数：
<span style="font-size:14px;">shuju_right_height(id);</span>
接着写弹出窗口，弹出窗口结构很简单，包括两部分，头和内容区域，头部包括标题部和关闭图标部，分析还是比较简单的
<span style="font-size:14px;"><!-- 重命名弹出框部分开始 -->
<div id="popWind" class="popWind">
<div class="popWind_header">
<h1>重命名列</h1>
<a href="#" id="guanbi_icon"></a>
</div>
<div class="popWind_content">
<form action="#">
<div class="form_margin_bottom">
<label for="">选择要重命名的列</label>
<div>
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
<div class="form_margin_bottom">
<label for="">输入新列名</label>
<div>
<input type="text" placeholder="输入新列名" class="form_input1"/>
</div>
<p>限制：表的记录数不超过 1 万</p>
</div>
<div class="a_container">
<a href="#" id="guanbi_btn" class="mybtn">关闭</a>
<a href="#" id="save_btn" class="mybtn">保存</a>
</div>
</form>
</div>
</div>
<!-- 重命名弹出框部分结束 --></span><span style="font-size:14px;">/*弹出框部分CSS*/
.popWind{
/*width:451px;*/
cursor: pointer;
z-index: 70;
position: absolute;
left: 331px;
top: 109px;
display: none;
}
.popWind_header{
width: 431px;
border-top: 3px solid #004A8F;
background: #f3f3f3;
padding: 0px 10px;
line-height: 51px;
overflow: hidden;
}
.popWind_header h1{
font-size: 14px;
display: block;
float: left;
}
.popWind_header a{
background: url('../images/guanbi.png') no-repeat center center;
width: 18px;
height: 51px;
display: block;
float: right;
}
.popWind_content{
padding:32px 20px;
background: white;
}
.popWind_content label{
line-height: 30px;
}
.popWind_content p{
color: #929292;
line-height: 30px;
}
.a_container{
margin-left: 54px;
margin-top: 11px;
overflow: hidden;
}
a.mybtn{
display: block;
background: #357ae9;
font-size: 14px;
color: #FFF;
text-align: center;
line-height: 30px;
width: 140px;
color: #ffffff;
float:left;
margin-right: 20px;
border: 1px solid #2f5bb7;
}
a.mybtn:hover{
background: #e0f0ff;
color: #007ccd;
border: 1px solid #96c5f1;
}
</span>然后还要注意这边和弹出框一起出现的还有一层蒙版，下面提供蒙版的写法：（直接在BODY作为父元素）
<span style="font-size:14px;"><div id="mengban" class="mengban"></div></span><span style="font-size:14px;">/*蒙版部分*/
.mengban{
position: absolute;
background: black;
opacity: 0.6;
filter:alph(opacity=50);
width: 100%;
height: 130%;
left: 0px;
top: 0px;
z-index: 50;
display: none;
}</span>然后写弹出窗口的打开和关闭函数
<span style="font-size:14px;">// 打开弹出框封装函数
function openPopWind(id){
$("#mengban").show();
$("#"+id).show();
}
function closePopWind(id){
$("#mengban").hide();
$("#"+id).hide();
}
</span><span style="font-size:14px;"> $$("addLie").οnclick=function(){
openPopWind("popWind");
};
$$("guanbi_btn").οnclick=function(){
closePopWind("popWind");
};
$$("guanbi_icon").οnclick=function(){
closePopWind("popWind");
};</span>
然后让我们继续写一个下拉select组件：这边需要走三步，首先准备好select组件的html代码结构：（我们这边写两个不同背景的select下拉组件便于比较）
但在这之前，我想先画出一个组件的结构简图：（更正错误，其实在下图的最外层div和第二层背景DIV中海油一层动态生成的div,对应的classname为：select_box，id为：select_fenlei，画图的时候没注意）
然后写出其基础结构：
<span style="font-size:14px;"> <!-- 第一组下拉框开始 -->
<div class="fenlei" id="">
<select id="resetName" name="resetName" >
<option value="第一种下拉框" selected="selected">第一种下拉框</option>
<option value="ACL" >ACL</option>
<option value="_type" >_type</option>
<option value="createdAt" >createdAt</option>
<option value="name" >name</option>
<option value="objectId" >objectId</option>
<option value="updateAt" >updateAt</option>
<option value="url" >url</option>
</select>
</div>
<!-- 第一组下拉框结束 --></span><span style="font-size:14px;"> <!-- 第二组下拉框开始 -->
<label for="">第二种下拉框</label>
<div class="fenlei2" id="">
<select id="resetName2" name="resetName2" >
<option value="第二种下拉框" selected="selected">第二种下拉框</option>
<option value="aa" >aa</option>
<option value="bb" >bb</option>
</select>
</div>
<!-- 第二组下拉框结束 --></span>其实就是在select标签外包上一层设置了特定class的div，注意这个div的class的name是唯一的，要区分开来，然后select标签要设置相应的id，name，因为这些设置对于后面JS动态生成下拉组件是必须的，所以这三个属性切记一定要设置成唯一的；然后结构基础写好了，开始设置要用的css样式：
这边需要大致的解释下下拉组件的css属性：
<span style="font-size:14px;">/*下拉框样式*/
/*****非全屏下拉框开始******/
/*共用部分*/
/*这一部分，我们是可以公用的样式，就是假如我们有多个不同背景长度的下拉组件，那么这一部分的
样式算是基础样式，必须设置，而且是一样的，所以当我们设置这一部分样式的时候，为了更好的复用，只要
粘贴复制一份相对应的class层叠选择器即可
*/
/*主要设置第二层背景DIV层的字体颜色大小，内边距，行高*/
.fenlei div.tag_select,.fenlei div.tag_select_hover, .fenlei div.tag_select_open,
.fenlei2 div.tag_select,.fenlei2 div.tag_select_hover, .fenlei2 div.tag_select_open
{
display: block;
color: #000000;
padding: 0 10px;
line-height: 30px;
font-size:12px;
}
/*设置下拉列表的定位及边框，使其位置刚好是在外层div的紧贴底部位置*/
.fenlei ul.tag_options,
.fenlei2 ul.tag_options
{
position: absolute;
margin: 0;
list-style: none;
border-bottom:1px solid #d0d0d0;
border-left:1px solid #d0d0d0;
border-right:1px solid #d0d0d0;
}
/*设置下拉列表项的背景，内边距，字体颜色大小*/
.fenlei ul.tag_options li,
.fenlei2 ul.tag_options li
{
background:#ffffff;
display: block;
padding: 0 10px;
text-decoration: none;
color: #000000;
font-size:12px;
}
/*设置下拉列表项，当鼠标悬停时的背景及颜色*/
.fenlei ul.tag_options li.open_hover,
.fenlei2 ul.tag_options li.open_hover
{
background:#e8e8e8;
color: #000000;
}
/*设置下拉列表项，当选项被选中时的背景及颜色*/
.fenlei ul.tag_options li.open_selected,
.fenlei2 ul.tag_options li.open_selected
{
background:#e8e8e8;
color: #000000;
}
/*需要独立设置部分*/
/*不同尺寸不同背景图下拉框样式*/
/*这部分主要是下拉组件由于各自独特的外形而分别定义的样式，因为有时候，我们自定义的下拉框的背景
还有大小都是不一样的，所以需要为其设置单独的样式背景大小等属性，下面我们拿第一种下拉组件做说明：
*/
/*下拉组件1开始*/
/*这边设置下拉组件第二层背景图div的自我长宽大小*/
.fenlei div.tag_select,.fenlei div.tag_select_hover, .fenlei div.tag_select_open{
width: 110px;
height: 27px;
}
/*分别设置未选中，鼠标悬浮，鼠标点击选中第二层背景div时的背景图*/
.fenlei div.tag_select {
background: transparent url("../images/feiping.png") no-repeat;
}
.fenlei div.tag_select_hover {
background: transparent url("../images/afeiping.png") no-repeat;
}
.fenlei div.tag_select_open {
background: transparent url("../images/afeiping.png") no-repeat;
}
/*由于上面第二层背景DIV是单独设置大小长宽的，与之对应的下拉列表也需要相对应设置长度，宽度是下拉列表
项撑大的
*/
.fenlei ul.tag_options {
width: 128px;
}
/*设置相对应下拉列表项的长宽高度*/
.fenlei ul.tag_options li {
width: 108px;
height: 30px;
line-height: 30px;
}
/*下拉组件1结束*/
/*下拉组件2开始*/
.fenlei2 div.tag_select,.fenlei2 div.tag_select_hover, .fenlei2 div.tag_select_open{
width: 390px;
height: 30px;
}
.fenlei2 div.tag_select {
background: transparent url("../images/selectIcon.png") no-repeat;
}
.fenlei2 div.tag_select_hover {
background: transparent url("../images/selectIcon2.png") no-repeat;
}
.fenlei2 div.tag_select_open {
background: transparent url("../images/selectIcon2.png") no-repeat;
}
.fenlei2 ul.tag_options {
width: 408px;
}
.fenlei2 ul.tag_options li {
width: 388px;
height: 30px;
line-height: 30px;
}
/*下拉组件2结束*/</span>接下来就要解释下这个下拉组件核心的js动态生成下拉select组件的函数了，这有些复杂，但其实只要掌握其中的几个参数就好了，然后在后面还要为其设置一下模拟下拉select组件失去焦点的函数：
首先从文档中获取select元素：
<span style="font-size:14px;">var selects = document.getElementsByTagName('select');</span>然后在文档资源加载完毕的时候执行rSelects() 函数，动态生成下拉组件所需的一些元素：
/*
这个函数首先遍历每一个select元素，然后将其的dispaly设置为none,隐藏，然后动态生成一个DIV，为其设置classname和id,分别为： 'select_' +selects[i].name;'select_box';并将其加入到最外层div中，，然后在新生成的这个div中又生成一个id为： 'select_info_' + selects[i].name;，classname为： 'tag_select'的div,并设置其cursor属性为pointer,然后在第二层div中再动态生成一个下拉无序列表ul,id为： 'options_' + selects[i].name;，classname为：'tag_options';并且设置他的三个csss属性，定位：absolute，display :none隐藏，z-index：999,设置其在最上层，其实就是将其刚好定位在第三层背景div的正下方。然后调用rOptions(i, selects[i].name);，动态生成下拉无序列表的列表项，接着为第三层背景div绑定各种鼠标事件；
*/
<span style="font-size:14px;">function rSelects() {
for (i = 0; i < selects.length; i++) {
selects[i].style.display = 'none';
select_tag = document.createElement('div');
select_tag.id = 'select_' + selects[i].name;
select_tag.className = 'select_box';
selects[i].parentNode.insertBefore(select_tag, selects[i]);
select_info = document.createElement('div');
select_info.id = 'select_info_' + selects[i].name;
select_info.className = 'tag_select';
select_info.style.cursor = 'pointer';
select_tag.appendChild(select_info);
select_ul = document.createElement('ul');
select_ul.id = 'options_' + selects[i].name;
select_ul.className = 'tag_options';
select_ul.style.position = 'absolute';
select_ul.style.display = 'none';
select_ul.style.zIndex = '999';
select_tag.appendChild(select_ul);
rOptions(i, selects[i].name);
mouseSelects(selects[i].name);
if (isIE) {
selects[i].onclick = new Function("clickLabels3('" + selects[i].name + "');window.event.cancelBubble = true;");
} else
if (!isIE) {
selects[i].onclick = new Function("clickLabels3('" + selects[i].name + "')");
selects[i].addEventListener("click", stopBubbling, false);
}
}
}</span>*/
<span style="font-size:14px;">function rOptions(i, name) {
var options = selects[i].getElementsByTagName('option');
var options_ul = 'options_' + name;
for (n = 0; n < selects[i].options.length; n++) {
option_li = document.createElement('li');
option_li.style.cursor = 'pointer';
option_li.className = 'open';
$$(options_ul).appendChild(option_li);
option_text = document.createTextNode(selects[i].options[n].text);
option_li.appendChild(option_text);
option_selected = selects[i].options[n].selected;
if (option_selected) {
option_li.className = 'open_selected';
option_li.id = 'selected_' + name;
$$('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML));
}
option_li.onmouseover = function() {
this.className = 'open_hover';
}
option_li.onmouseout = function() {
if (this.id == 'selected_' + name) {
this.className = 'open_selected';
} else {
this.className = 'open';
}
}
option_li.onclick = new Function("clickOptions(" + i + "," + n + ",'" + selects[i].name + "')");
}
}</span>/*
该函数主要是为了实现点击下拉列表选项，然后变换填充第三层背景DIV中的文本，并且隐藏自身下路无序列表的函数三个参数分别对应：select序号，li序号，select名称，首先获取该select下的所有下拉列表项，将前面选中的下拉列表项的id设为空，classname恢复为默认的open,然后把当前选中的下拉列表项的id设置为 'selected_' + name;，并且classname 设置为'open_hover';，然后直接根据当前选中的下拉列表项中文本修改第三层背景div中的文本；然后把当前选中的下拉无序列表UL设置隐藏，并且把第三层背景DIV的classname恢复为默认的'tag_select';，并且设置当前下拉列表项对应的select可选项的selected为：selected；
*/
<span style="font-size:14px;">function clickOptions(i, n, name) {
var li = $$('options_' + name).getElementsByTagName('li');
$$('selected_' + name).className = 'open';
$$('selected_' + name).id = '';
li[n].id = 'selected_' + name;
li[n].className = 'open_hover';
/*这边的代码我觉得是多余的，因为我们没有必要删除第三层背景DIV然后有重新生成
其实原先作者的意思是为了改变该DIV种的文本信息而已，所以我这边修改的方法是只是修改 $$('select_info_' + name).innerHTML
为当前选中下拉列表项的innerHTML即可；
*/
// $$('select_' + name).removeChild($$('select_info_' + name));
// select_info = document.createElement('div');
// select_info.id = 'select_info_' + name;
// select_info.className = 'tag_select';
// select_info.style.cursor = 'pointer';
// $$('options_' + name).parentNode.insertBefore(select_info, $$('options_' + name));
// mouseSelects(name);
// $$('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML));
/*修改开始*/
$$('select_info_' + name).innerHTML=li[n].innerHTML;
/*修改结束*/
$$('options_' + name).style.display = 'none';
$$('select_info_' + name).className = 'tag_select';
selects[i].options[n].selected = 'selected';
}</span>/*该函数主要为第三层背景DIV绑定各种鼠标事件，首先是鼠标进入元素，悬浮状态时，先判断其classname是否为默认的'tag_select'，如果为true,则将其classname设置为'tag_select_hover';同理，onmouseout事件时在鼠标离开当前div时，先判断当前divclassname是否为：'tag_select_hover'，true则设置为'tag_select';后面就是根据在不同浏览器为div绑定鼠标点击事件函数
*/
<span style="font-size:14px;">function mouseSelects(name) {
var sincn = 'select_info_' + name;
$$(sincn).onmouseover = function() {
if (this.className == 'tag_select')
this.className = 'tag_select_hover';
}
$$(sincn).onmouseout = function() {
if (this.className == 'tag_select_hover')
this.className = 'tag_select';
}
if (isIE) {
$$(sincn).onclick = new Function("clickSelects('" + name + "');window.event.cancelBubble = true;");
} else
if (!isIE) {
$$(sincn).onclick = new Function("clickSelects('" + name + "');");
$$('select_info_' + name).addEventListener("click", stopBubbling, false);
}
}</span>/*该函数主要是为了实现该div的鼠标点击事件处理，首先遍历所有的select组件，并判断是否为当先点击的select组件，如果是，则进一步判断当前点击div的classname,及当前div状态，他可分为两种状态：一种是鼠标没有点击，只是悬浮，所以相对应的classname为'tag_select_hover，第二种是，点击打开了的状态，第一种状态下，我们需要将其classname设置为tag_select_open，然后其样式display设置为空，即显示，而另外一种状态下恰好相反；假如遍历的select不是当前点击的select,则把该select的classname恢复为默认的classname=tag_select,样式display:none;
*/
<span style="font-size:14px;">function clickSelects(name) {
var sincn = 'select_info_' + name;
var sinul = 'options_' + name;
for (i = 0; i < selects.length; i++) {
if (selects[i].name == name) {
if ($$(sincn).className == 'tag_select_hover') {
$$(sincn).className = 'tag_select_open';
$$(sinul).style.display = '';
} else
if ($$(sincn).className == 'tag_select_open') {
$$(sincn).className = 'tag_select_hover';
$$(sinul).style.display = 'none';
}
} else {
$$('select_info_' + selects[i].name).className = 'tag_select';
$$('options_' + selects[i].name).style.display = 'none';
}
}
}</span>最后还没结束呢，还需要模拟写一个单层div失去焦点的函数：
// 下拉select选项组件隐藏方法
/*
该函数主要设置当前select失去焦点后，将其classname设置恢复为tag_select，并且隐藏该select组件的无序列表；
*/
<span style="font-size:14px;">function select_display_none(){
for (i = 0; i < selects.length; i++) {
$$('select_info_' + selects[i].name).className = 'tag_select';
$$('options_' + selects[i].name).style.display = 'none';
}
}</span>/*通过在$$("mengban")和$$("popWind")这两个元素中绑定点击事件，来模拟第三层背景div失去焦点的事件函数这边需要注意的一点就是，不要在BODY中绑定这个点击事件，这边其实是利用了事件冒泡，当我们点击屏幕上任意一个可点击区域，都会触发select_display_none();，但是假如我们只在body中设置绑定这个函数，那么当点击其他部分的时候，是不会冒泡触发这个函数的，原因刚开始我也搞不清，但一想到原来下面两个元素都是绝对定位，不在文档流中，所以我猜是不是这个原因导致了他们上的点击事件不会冒泡到body中，我想大致原因是这个
*/
<span style="font-size:14px;"> $$("mengban").onclick = function() {
select_display_none();
}
$$("popWind").onclick = function() {
select_display_none();
}</span>基本上这个下拉select插件就介绍到这里，这个插件以后再用到应该可以很熟练的运用了；
在此我想特别说一下 关于表单布局的一些基本规范：
就上面的表单布局而言是比较乱的；首先要确定一个基本的结构：
首先来看最简单的一种垂直排列的布局：
我们对前面的html做一些小改动，使其布局结构更加合理：
<span style="font-size:14px;"><div class="popWind_content">
<form action="#">
<!-- 第一组下拉框开始 -->
<div class="form_margin_bottom">
<label for="">第一种下拉框</label>
<!-- 下拉框组件 -->
<div class="fenlei" id="">
<select id="resetName" name="resetName" >
<option value="第一种下拉框" selected="selected">第一种下拉框</option>
<option value="ACL" >ACL</option>
<option value="_type" >_type</option>
<option value="createdAt" >createdAt</option>
<option value="name" >name</option>
<option value="objectId" >objectId</option>
<option value="updateAt" >updateAt</option>
<option value="url" >url</option>
</select>
</div>
</div>
<!-- 第一组下拉框结束 -->
<!-- 第二组下拉框开始 -->
<div class="form_margin_bottom">
<label for="">第二种下拉框</label>
<div class="fenlei2" id="">
<select id="resetName2" name="resetName2" >
<option value="第二种下拉框" selected="selected">第二种下拉框</option>
<option value="aa" >aa</option>
<option value="bb" >bb</option>
</select>
</div>
<!-- 第二组下拉框结束 -->
</div>
<div class="form_margin_bottom">
<label for="">输入新列名</label>
<div>
<input type="text" placeholder="输入新列名" class="form_input1"/>
</div>
<p>限制：表的记录数不超过 1 万</p>
</div>
<div class="a_container">
<a href="#" id="guanbi_btn" class="mybtn">关闭</a>
<a href="#" id="save_btn" class="mybtn">保存</a>
</div>
</form>
</div></span>解释下这些结构改动：首先是最外层div.popWind_content,在这里我们首先要为其添加一个设置padding的css样式：
.popWind_content{
padding:20px;
background: white;
}
是内容块与外边框有一定的距离；然后接下来就是排列各个内容组件了，分别用一个div来分隔布局；这个div可以不需要设置约定俗成的classname，因为这个div主要是调节各个组件之间垂直距离的，所以要为其添加一个设置垂直外边距的classname,
.form_margin_bottom{
margin-bottom: 10px;
}
当然根据继承性，我们还可以为其再增加一个设置字体大小及行高的classname:
.form_line_height{
font-size: 12px;
line-height: 30px;
}
但是需要注意的是，一般表单中只有一些行内元素（span .a. label. ）及p. DIV元素会继承这一性质，但例如input，select等元素是不继承其祖先元素的line-height属性的，所以需要单独设置
,然后特别说明下表单中input type=text元素的样式设定：
.form_input1{
padding-left: 5px;
width: 403px;
line-height: 30px;
border: 1px solid #d0d0d0;
}
基本的样式就是这样，要注意，他的元素总账度是width+padding+border；所以width，需要根据padding,border灵活跳动，调到最适合位置
最后就是按钮的位值调整，需要为btn的外层div专门设定一个大的margin-top进行一次垂直外边距的叠加，结果最下面的一个元素和btn的div的垂直外边距就是btnde div设置的margin-top值；
div.a_container{
margin-top: 30px;
overflow: hidden;
}
效果图：
表单布局还有一种就是水平布局：
就是标签和input控件在一行中排列，然后再垂直排列：
如下图：
看着有些复杂，我们写个小例子出来试一下：
<span style="font-size:14px;"><!--修改信息弹出框部分开始 -->
<div id="reset_info" class="popWind">
<div class="popWind_header">
<h1>重命名列</h1>
<a href="#" id="reset_info_close"></a>
</div>
<div class="popWind_content">
<form action="#">
<div class="form_margin_bottom form_line_height ul_hidden">
<label for="" class="label1 ul_float_left">用户名:</label>
<span class="ul_float_left">wahahah</span>
</div>
<div class="form_margin_bottom form_line_height ul_hidden">
<label for="" class="label1 ul_float_left">昵称:</label>
<div class="ul_float_left">
<input type="text" placeholder="哇哈哈" class="form_input2"/>
</div>
</div>
<div class="form_margin_bottom form_line_height ul_hidden">
<label for="" class="label1 ul_float_left">手机号:</label>
<div class="ul_float_left">
<input type="text" placeholder="哇哈哈" class="form_input2"/>
</div>
</div>
<div class="form_margin_bottom form_line_height ul_hidden">
<label for="" class="label1 ul_float_left">邮箱:</label>
<div class="ul_float_left">
<input type="text" placeholder="哇哈哈" class="form_input2"/>
</div>
</div>
<div class="form_margin_bottom form_line_height ul_hidden">
<label for="" class="label1 ul_float_left">在线状态:</label>
<div class="ul_float_left ul_margin_right">
<input type="radio"/>
<span>在线</span>
</div>
<div class="ul_float_left">
<input type="radio"/>
<span>离线</span>
</div>
</div>
<div class="form_margin_bottom form_line_height ul_hidden">
<label for="" class="label1 ul_float_left">记录：</label>
<div class="ul_float_left">
<textarea name="" id="" class="form_textarea"></textarea>
</div>
</div>
<div class="a_container form_line_height">
<a href="#" class="mybtn">关闭</a>
<a href="#" class="mybtn">确定</a>
</div>
</form>
</div>
</div>
<!-- 修改信息弹出框部分结束 --></span>首先结构上主要也分为三部分：
1.主体还是最外层.popWind_content
.popWind_content{
padding:20px;
background: white;
}
设置内边距：
2.用于分隔每个内容快的div,但这里的div和上面垂直排列的div不同，不仅要包括form_line_height,form_margin_bottom,还需要添加一个新的classname为ul_hidden,因为他里面的元素时水平排列的，需要浮动来实现，所以这层div除了分隔内容还要有清除浮动的作用；
<span style="font-size:14px;"><div class="form_margin_bottom form_line_height ul_hidden">
</div></span>3.div中的内容快，可以分为四类：
（1）.label+span类型：
为label添加两个个类：.label1和ul_float_left，一个用于指定其显示为块状元素，并指定其长度，便于后面的对齐显示，然后向左浮动，与后面的元素能水平排列开来
.label1{
display: block;
width: 69px;
}
由于span本身为行内元素，则可以对齐不做任何处理，只需要继承其父元素相关的字体，行高即可，便可以和label水平对齐排列；
(2).label+input[type=text]类型
这种类型对label的classname,及样式不变，对input，需要为其包裹一层div设置做浮动，然后本身添加一个classname,用于指定行高，长度，左内边距，还有边框
.form_input2{padding-left: 5px;
width: 300px;
line-height: 30px;
border: 1px solid #d0d0d0;
}，
其他都是一致的；
(3).label+input[text="radio"]类型，
label及其父元素DIV的classname,及样式不变，只需要为每一对radio与label外层加上一层div,并为该div添加左外边距classname,还有左浮动，ul_float_left;其他不需要怎么变化；
(4).label+textarea类型，
其实这种类和input[type="text"]是一值的，主要是textarea需要多设定一个高度，其他一模一样；
4.然后最后的按钮，还是沿用上面垂直排列时的样式classname;
css:
<span style="font-size:14px;">.form_margin_bottom{
margin-bottom: 10px;
}
.form_margin_top{
margin-top:30px;
}
.form_margin_right{
margin-right:5px;
}
.form_line_height{
font-size: 12px;
line-height: 30px;
}</span><span style="font-size:14px;">.form_textarea{
height: 400px;
padding-left: 5px;
width: 300px;
line-height: 30px;
border: 1px solid #d0d0d0;
}
/*水平排列表单样式*/
.label1{
display: block;
width: 69px;
}
.form_input2{
padding-left: 5px;
width: 300px;
line-height: 30px;
border: 1px solid #d0d0d0;
}</span><span style="font-size:14px;">.popWind_content{
padding:20px;
background: white;
}
div.a_container{
margin-top: 30px;
overflow: hidden;
}
a.mybtn{
display: block;
background: #357ae9;
font-size: 14px;
color: #FFF;
text-align: center;
/*line-height: 30px;*/
width: 140px;
color: #ffffff;
float:left;
margin-right: 20px;
border: 1px solid #2f5bb7;
}
a.mybtn:hover{
background: #e0f0ff;
color: #007ccd;
border: 1px solid #96c5f1;
}
</span>效果图：
然后我们开始未该弹出框添加一个浏览上传的控件；
首先准备好html结构：分为四部分：（1）.最外层div.file_box,主要控制整个控件位置，需要为其设置整体长度和一个相对定位i，便于后面input.liulan_file的定位；（2）input.liulan_text,主要是为了显示上传路径地址；需要设置的样式是行高，长度，边框，有外边距，左内边距（3）input.liulan_btn（4）.input.liulan_file主要是用于弹出上传文件窗口，在这里我们需要设置其为隐藏状态，但不是通过display:none,这样他是无法被点击的，所以我们需要通过设置他的透明度来隐藏他，而且此时他是可点击的；我吗设置其绝对定位，然后设置他的top和left都为0，然后为其设置透明度，为了浏览器兼容，需要设opacity:0;和filter:alpha(opcity:0);即可；最后再为其设置长度高度；
最后部分就是当点击隐藏的liulan_file控件时，触发其onchange方法，然后把自身里面的上传文件地址赋给liulan_text的value；
<span style="font-size:14px;"><div class="form_margin_bottom form_line_height file_box">
<input type="text" placeholder="选择图片" class="liulan_text" id="liulan_text"/>
<input type="button" value="浏览" class="liulan_btn"/>
<input type="file" class="liulan_file" id="liulan_file"/>
</div></span><span style="font-size:14px;">.file_box{
position:relative;
}
.liulan_text{
width: 285px;
line-height: 30px;
border: 1px solid #CDCDCD;
padding-left: 5px;
margin-right: 12px;
}
.liulan_btn{
width: 70px;
border: 1px solid #CDCDCD;
line-height: 30px;
background: #ffffff;
cursor: pointer;
}
.liulan_file{
position: absolute;
top: 0px;
left:80px;
line-height: 30px;
height: 30px;
width: 376px;
opacity: 0;
filter:alpha(opacity:0);
}
</span><span style="font-size:14px;"> //为浏览上传按钮添加onchange函数事件
$$("liulan_file").οnchange=function(){
$$("liulan_text").value=this.value;
};</span>
接着，我需要把上面两种排列方式写在统一个弹出框，但是不会同时出现，通过内容头部的页签来进行切换：
首先我先写出一个固定切换的变化效果结构：
这个切换页签导航包括了三部分：
1.最外层div.popwindow_qiehuan主要是控制位置和标识作用
2.然后在里面嵌套一个无序列表ul，popwind_qiehuan ul 为其设置样式，首先清除浮动，统一设置行高及高度，字体，还要设置一个,底部边框；这个边框是很微妙的；
然后设置.popwind_qiehuan li做浮动和有外边距；接着设置 popwind_qiehuan li a的基本样式，包括，上左右边框，左右内边距，行高，还要注意的是一定要将其display设
为block,否则其高度和宽度是自适应其内容大小的，其背景颜色也扩展不开来；这个一定要注意；
3.设置完一般样式，接下来就要为点击切换的popwind_qiehuan li a 样式了，当点击切换该页签的时候，其背景及字体会发生变化，然后ul的下边框部分会被遮盖，这个遮盖效果主要是通过为a添加margin-top：1px，将其下移刚好一个边框的距离，刚好将ul下边框遮住；所以后面我们写js切换函数的时候，在切换样式方面，只要添加和删减这三个部分的样式就可以了；
<span style="font-size:14px;"><div class="popwind_qiehuan form_margin_bottom">
<ul>
<li><a href="#" class="popwind_qiehuan_change">导入class</a></li>
<li><a href="#">导入relation</a></li>
</ul>
</div></span><span style="font-size:14px;">/*popwind_qiehuan切换css*/
.popwind_qiehuan ul{
overflow: hidden;
border-bottom: 1px solid #CDCDCD;
font-size: 14px;
line-height: 30px;
height: 30px;
}
.popwind_qiehuan li{
float:left;
margin-right: 10px;
}
.popwind_qiehuan li a{
border-top: 1px solid #CDCDCD;
border-left: 1px solid #CDCDCD;
border-right: 1px solid #CDCDCD;
padding: 0px 10px;
display: block;
line-height: 30px;
}
.popwind_qiehuan_change{
font-weight: bold;
background: #CDCDCD;
margin-top: 1px;
}
</span>然后为切换的内容区添加两个内容块，在这边例子中我设的div为：div#popWind_content_form1,div#popWind_content_form2,然后把两块相应内容填充；
然后开始写js方法；其实这个切换方法和之前的都一样的，首先要先设置一个变量reset_info_tb_now用于记录当前被选中的页签，然后根据当前页签标号和传入的id参数做比较，然后来改变相应的classname;通过改变这个classname，从而实现页签切换的样式效果，但是一定要注意，改变玩clasname后，需要把id的赋给变量reset_info_tb_now，但此时只是实现页签样式效果，真正的内容切换还没实现，为此，我们要需要为新建的两个div的父元素，设置一个id名称，主要通过的这个id获取父元素，然后取得该父元素下的子元素数，然后对所有子元素进行遍历，当遍历到当前子元素时，将其display属性值设为“block,反之设为none;在这个例子中，我是直接采用JQUERY中的show()和hide()方法直接实现的，这样基本上就实现了切换内容的效果；
全局变量定义：
<span style="font-size:14px;">var reset_info_tb_now = 1;//当前点击修改信息页签标号
var reset_info_content_length ;//页签对应内容块的数量</span><span style="font-size:14px;">// 为修改信息弹出框的页签绑定鼠标点击事件
for(var i=1;i<=2;i++){
$$("reset_info_tb"+i).οnclick=new Function("reset_info_qiehuan("+i+")");
}</span><span style="font-size:14px;">// 页签事件处理函数
function reset_info_qiehuan(id) {
if (id == reset_info_tb_now) {
$$("reset_info_tb" + id).className = "popwind_qiehuan_change";
} else {
$$("reset_info_tb" + id).className = "popwind_qiehuan_change";
$$("reset_info_tb" + reset_info_tb_now).className = "";
}
reset_info_tb_now = id;
$("#popWind_content_form" + id).show();
for (var i = 1; i <= reset_info_content_length; i++) {
if (i != id) {
$("#popWind_content_form" + i).hide();
}
}
}</span>效果图：
进一步增强表格布局：
例子：
<span style="font-size:14px;"><div class="popWind_content">
<form action="#">
<div class="form_line_height ul_hidden ul_margin_bottom">
<div class="ul_float_left ul_font_weight label_width">
<span>昵称:</span>
</div>
<div class="ul_float_left">
<div class="ul_hidden">
<div class="ul_float_left ul_margin_right">
<input type="text" class="form_input"/>
</div>
<div class="ul_float_left cuowu"></div>
</div>
<div class="jinggao"></div>
</div>
</div>
<div class="form_line_height ul_hidden ul_margin_bottom">
<div class="ul_float_left ul_font_weight label_width">
<span>开发者:</span>
</div>
<div class="ul_float_left">
<div class="ul_hidden">
<div class="ul_float_left ul_margin_right">
<input type="text" class="form_input"/>
</div>
<div class="ul_float_left cuowu">错误信息</div>
</div>
<div class="jinggao">警告信息</div>
</div>
</div>
<div class="form_line_heiht ul_hidden ul_margin_bottom">
<div class="ul_float_left ul_font_weight label_width">
<span>开发者类型:</span>
</div>
<div class="ul_float_left ul_hidden">
<div class="ul_float_left ul_margin_right">
<a href="#" class="radioButton"></a>
<input type="radio" class="ul_display_none"/>
</div>
<div class="ul_float_left ul_margin_right">
<span>个人</span>
</div>
<div class="ul_float_left ul_margin_right">
<a href="#"class="radioButton"></a>
<input type="radio" class="ul_display_none"/>
</div>
<div class="ul_float_left">
<span>企业</span>
</div>
</div>
</div>
<div class="form_line_height ul_hidden ul_margin_bottom">
<div class="ul_float_left ul_font_weight label_width must_icon ">
<span class="ul_padding_left">开发者:</span>
</div>
<div class="ul_float_left">
<div class="ul_hidden">
<div class="ul_float_left ul_margin_right">
<input type="text" class="form_input"/>
</div>
<div class="ul_float_left cuowu">错误信息</div>
</div>
<div class="jinggao">警告信息</div>
</div>
</div>
<div class="form_line_height ul_hidden ul_margin_bottom">
<div class="ul_float_left ul_font_weight label_width must_icon ">
<span class="ul_padding_left">开发者简介:</span>
</div>
<div class="ul_float_left">
<div class="ul_hidden">
<div class="ul_float_left ul_margin_right">
<textarea class="form_textarea"></textarea>
</div>
<div class="ul_float_left cuowu">错误信息</div>
</div>
<div class="jinggao">警告信息</div>
</div>
</div>
<div class="form_line_height ul_hidden ul_margin_bottom">
<div class="ul_float_left ul_font_weight label_width must_icon ">
<span class="ul_padding_left">Email地址:</span>
</div>
<div class="ul_float_left">
123@qq.com
</div>
</div>
<div class="form_line_height ul_hidden ul_margin_bottom">
<div class="ul_float_left ul_font_weight label_width must_icon ">
<span class="ul_padding_left">手机号:</span>
</div>
<div class="ul_float_left">
<div class="ul_hidden">
<div class="ul_float_left ul_margin_right">
<input type="text" class="form_input"/>
</div>
<div class="ul_float_left cuowu">错误信息</div>
</div>
<div class="jinggao">警告信息</div>
</div>
</div>
<div class="form_line_height ul_hidden ul_margin_bottom">
<div class="ul_float_left ul_font_weight label_width ">
<span class="">联系地址:</span>
</div>
<div class="ul_float_left">
<div class="ul_hidden">
<div class="ul_float_left ul_margin_right">
<div class="fenlei">
<select name="select_province" id="select_province" class="ul_display_none">
<option value="aa" selected="selected">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
</select>
</div>
</div>
<div class="ul_float_left ul_margin_right">
<div class="fenlei">
<select name="select_city" id="select_city" class="ul_display_none">
<option value="aa" selected="selected">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
</select>
</div>
</div>
<div class="ul_float_left ul_margin_right">
<div class="fenlei">
<select name="select_xian" id="select_xian" class="ul_display_none">
<option value="aa" selected="selected">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
</select>
</div>
</div>
<div class="ul_float_left cuowu">错误信息</div>
</div>
<div class="jinggao ul_margin_top">
<textarea class="form_textarea jinggao">填写具体街道地址</textarea>
</div>
</div>
</div>
<div class="form_line_height ul_hidden ul_margin_bottom">
<div class="ul_float_left ul_font_weight label_width must_icon ">
<span class="ul_padding_left">证件扫描件上传:</span>
</div>
<div class="ul_float_left">
<div class="ul_hidden">
<div class="ul_float_left ul_margin_right">
<input type="text" class="form_input" id="viewfiles"/>
</div>
<div class="ul_float_left">
<label for="upload" class="liulan_btn">浏览..</label>
</div>
<div>
<input type="file" id="upload" class="form_file" οnchange="document.getElementById('viewfiles').value=this.value;"/>
</div>
</div>
<div class="jinggao">警告信息</div>
</div>
</div>
</form>
</div></span>css样式：
<span style="font-size:14px;">.form_line_height{
line-height: 30px;
font-size: 12px;
}
.label_width{
width: 110px;
}
.form_input{
width: 200px;
height: 25px;
border: 1px solid #d0d0d0;
}
.cuowu{
color: #f12737;
}
.jinggao{
color: #919191;
}
.radioButton {
background: url(../images/noradio.png) no-repeat;
cursor: pointer;
width: 20px;
height: 20px;
display: block;
}
.must_icon{
background: url(../images/xingxing.png) no-repeat left center;
}
.form_textarea{
width: 200px;
height: 110px;
}
.liulan_btn{
width: 70px;
height: 30px;
background: url(../images/shangzhuan.png) no-repeat 0 0;
cursor: pointer;
display:block;
line-height:30px ;
text-indent: -9999px;
}
.form_file{
width: 400px;
margin-top: -28px;
display: none;
}</span>效果图：
基本上上面的表单结构可以为以后工作开发提供一个模板作用：
第一阶段总结：
断断续续写了这个总结好久，每次想进下心来把项目总结完，中间因为工作原因各种耽误，导致没法连续记录，这也是自己在考虑到底要不要总结的一个矛盾原因；因为真的很多时候真的没有太多时间来做这个总结工作，而且由于没法连续进行记录工作，要接上之前的总结记录工作，往往又要离殇一段时间，总结这个工作的，真心是把双刃剑，因为很多时候，这意味着，你必须花费更多本应该学习或工作的时间去做这些事儿，我现在因为这个记录，已经延迟太多自己的计划了，可能有到公司到现在，延迟计划两周左右，很多工作，本应该在两周前做完的，到现在还没搞完，对自己是一个不小的心理打击；这两周也因为生活上的一些琐事而搞的有些心烦意乱，没心思去学，而转向去游戏中去了，前面还是太放松了；现在开始必须严格要求自己，一步一步按计划走了，每天提高效率；好吧，接下的时间，每天给自己一个严格的计划实施吧；
1230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
