最近项目需要开发一个流程化配置商品的功能，就参考了一些著名网站的样式，最后整和CSDN注册页面以及新浪微博的个人信息页面，再加上最近学习的bootstrap，就开始开发。不过为了兼容IE6，我没有用最新的bootstrap3，而是用了bootstrap2（兼容IE6）版本，发上来跟大家分享：
源码下载地址：http://download.csdn.net/detail/c3618392/7603903
相应代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2商品信息配置</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
<![endif]-->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script src="ckeditor/ckeditor.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="ueditor/ueditor.config.js" type="text/javascript" charset="utf-8"></script>
<script src="ueditor/ueditor.all.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css" />-->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/bootstrap-ie.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/top.css" />
<link rel="stylesheet" href="css/productcfg.css" />
<style type="text/css">
.topimg{
margin: 0 auto;
width: 1000px;
height: 35px;
background: url(img/topimg.jpg) no-repeat 0 -45px;
}
.etlContent{
background: #fafafa;
border: 1px solid #ddd;
width: 978px;
/*text-align: center;*/
margin-top: 20px;
padding: 10px 10px;
}
.etlContent .unfold_content ul{margin: 0;padding: 0;}
.etlContent .unfold_content ul li{
list-style: none;
}
.etlContent .unfold_content ul li{
margin-bottom: 20px;
}
.etlContent .unfold_content ul li ul li{
margin-bottom: 0px;
}
.etlContent .unfold_content ul li .name {
/*display: inline-block;*/
/*width: 100px;
text-align: right;*/
}
.divleft{
float: left; text-align: right;width: 300px;height:38px;line-height:38px;vertical-align: middle;padding-right: 14px;
}
.divright{
float: left;text-align: left;width: 600px;vertical-align: middle;
}
.next-step {
background: #4490f7;
/*#dc3c00;*/
display: inline-block;
width: 280px;
height: 44px;
line-height: 44px;
color: #fff;
margin-left: 20px;
border: 0;
}
</style>
<script type="text/javascript" charset="utf-8">
$(function(){
initData();
$(".account_fold .account_title > li").click(function(){
var temp=$(this).parent(".account_title").find(".title_content") .is(":visible");
//如果简介可 见，那么说明整个div是隐藏的，要展开
if(temp){
$(".account_fold").removeAttr("class").addClass("account_fold SW_fun_bg");
$(".account_fold .title_content").show();
$(".account_fold .set_opt").text("编辑");
$(".account_fold .unfold_content").hide();
//本身的操作
$(this).parents(".account_fold").removeClass("SW_fun_bg").addClass("account_unfold");
$(this).parent(".account_title").find(".title_content").hide();
$(this).parent(".account_title").find(".set_opt").text("收起");
$(this).parent(".account_title").siblings(".unfold_content").show();
}else{
$(".account_fold").removeAttr("class").addClass("account_fold SW_fun_bg");
$(".account_fold .title_content").show();
$(".account_fold .set_opt").text("编辑");
$(this).parent(".account_title").siblings(".unfold_content").hide();
}
})
//jquery实现阻止冒泡事件
// $('.unfold_content').click(function(event){
// event.stopPropagation();
// });
//解决2级菜单中IE6下的问题
$(".catalogue").on("mouseenter","li.dropdown-submenu",function(){
$(this).find(".dropdown-menu").show();
}
);
$(".catalogue").on("mouseleave","li.dropdown-submenu",function(){
$(this).find(".dropdown-menu").hide();
});
$("#getva").click(function(){
getHtml();
})
// var pr = UE.getEditor('productMemo');
// var us = UE.getEditor('usingTutorial');
// var se = UE.getEditor('serviceContent');
$( "#sortable").sortable({
revert: false,
items :"tr",
opacity: 0.6,
axis: "y",
update : function(event, ui){ //更新排序之后
var $spans=$(this).find("tr td:first-child span:first-child")
$spans.each(function(i){
$(this).text(i+1);
});
}
});
//单击左边列表
$(".outPrintField ").on("dblclick","li a",function(){
var html="";
var value=$(this).attr("value");
var text=$(this).text();
//判断右边表格是否有孩子
var $obj=$("#sortable").children();
html+='<tr>';
html+='<td><span class="badge badge-info">'+($obj.length+1)+'</span><span style="display: none;" class="oldFieldName">'+text+'</span><span style="display: none;" class="fieldValue">'+value+'</span></td>';
html+='<td class="mifFieldName">'+text+'</td>';
html+='<td><div class="btn-group">';
html+='<button class="btn" style="min-width: 150px;_width:150px;" data-toggle="dropdown">==请选择==</button>';
html+='<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
html+='<ul class="dropdown-menu" style="min-width:173px;_width:173px;">';
html+='<li><a href="javascript:void(0)" value="1">是</a></li>';
html+='<li><a href="javascript:void(0)" value="2">否</a></li>';
html+='</ul></div></td>';
html+='<td><a href="javascript:void(0)" class="delField">删除</a></td>';
html+='</tr>';
$("#sortable").append(html);
$(this).parent().remove();
});
//删除右边表格数据，插回到左边
$("tbody").on("click","a.delField",function(){
$(this).parent().parent().remove();
var fieldValue=$(this).parent().parent().find(".fieldValue").text();
var fieldName=$(this).parent().parent().find(".mifFieldName").text();
var listr='<li><a href="javascript:void(0)" value="'+fieldValue+'">'+fieldName+'</a></li>';
$(".outPrintField").append(listr);
var $spans=$("#sortable").find("tr td:first-child span:first-child")
$spans.each(function(i){
$(this).text(i+1);
});
})
//双击名称则可以修改
$("tbody").on("dblclick","td.mifFieldName",function(){
if($(this).has("input[type='text']").length==0){
var oldName=$(this).text();
var strHtml='<input type="text" class="newName" style="width:280px;font-size:12px;_width:250px;overflow:hidden;_height:20px;_line-height:20px;" value="'+oldName+'"/>';
$(this).html(strHtml);
$(this).find("input[type='text']").focus();
}
});
//表格input失去焦点后变成td
$("tbody").on("blur",".newName",function(){
var value=$(this).attr("value");
if(value.length==0){
alert("字段名不能为空！");
return;
}
$(this).parent().html(value);
});
})
// <tr>
// <td><span class="badge">1</span></td>
// <td>纵云清单表状态更新时间[【移动】欠费用户清单]</td>
// <td>
// <div class="btn-group">
// <button class="btn" style="min-width: 150px;_width:150px;" data-toggle="dropdown">==请选择==</button>
// <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
// <ul class="dropdown-menu" style="min-width:173px;_width:173px;">
// <li><a href="javascript:void(0)" value="1">是</a></li>
// <li><a href="javascript:void(0)" value="1">否</a></li>
// </ul>
// </div>
// </td>
// <td>删除</td>
// </tr>
//获取文本内容
function getHtml(){
alert(UE.getEditor('editor').getContent());
}
function initData(){
var html="";
$(".catalogue").empty();
html+='<li><a href="#" value="1">用户ID</a></li>';
html+=' <li><a href="#" value="1">客户ID</a></li>';
html+='<li class="dropdown-submenu">';
html+='<a tabindex="-1" href="#">营销分析</a>';
html+='<ul class="dropdown-menu" style="display: none;">';
html+='<li><a tabindex="-1" href="#">菜单1</a></li>';
html+='<li><a tabindex="-1" href="#">菜单2</a></li>';
html+='<li><a tabindex="-1" href="#">菜单3</a></li>';
html+='<li><a tabindex="-1" href="#">菜单4</a></li>';
html+='<li><a tabindex="-1" href="#">菜单5</a></li>';
html+='</ul>';
html+='</li>';
$(".catalogue").append(html);
}
</script>
</head>
<body>
<div style="width: 1000px;margin: 0 auto;">
<div class="topimg"></div>
<div class="etlContent">
<div class="W_follow_bg ">
<div>
<div class="account_fold account_unfold" id="div1">
<ul class="account_title clearfixa" style="padding: 0 20px;line-height: 40px;margin: 0;">
<li class="title_name W_fb" style="line-height: 40px;">1.基本信息</li>
<li class="title_content S_txt2" style="line-height: 40px;">配置商品的名称、图标、增减清单等信息</li>
<li class="title_option W_tr" style="line-height: 40px;">
<a class="set_opt" href="javascript:void(0)">编辑</a>
</li>
</ul>
<!--基本信息 -->
<div class="unfold_content clearfixa" node-type="content" >
<div class="acc_form">
<ul>
<li>
<div class="divleft">
<span>商品名称</span>
</div>
<div class="divright" style="padding-top:3px;">
<input type="text" style="width:291px;"/>
</div>
<div class="clearfixa"></div>
</li>
<li>
<div class="divleft">
<span>商品目录</span>
</div>
<div class="divright" style="padding-top:3px;">
<div class="btn-group">
<button class="btn" style="min-width: 280px;_width:280px;" data-toggle="dropdown">==请选择==</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu catalogue" style="min-width:300px;_width:300px;">
<!--<li><a href="#" value="1">用户ID</a></li>
<li><a href="#" value="1">客户ID</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">营销分析</a>
<ul class="dropdown-menu" style="display: none;">
<li><a tabindex="-1" href="#">菜单1</a></li>
<li><a tabindex="-1" href="#">菜单2</a></li>
<li><a tabindex="-1" href="#">菜单3</a></li>
<li><a tabindex="-1" href="#">菜单4</a></li>
<li><a tabindex="-1" href="#">菜单5</a></li>
</ul>
</li>-->
</ul>
</div>
</div>
<div class="clearfixa"></div>
</li>
<li>
<div class="divleft">
<span>适用本地网</span>
</div>
<div class="divright" style="padding-top:3px;">
<div class="btn-group">
<button class="btn" style="min-width: 280px;_width:280px;" data-toggle="dropdown">==请选择==</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu" style="min-width:300px;_width:300px;">
<li><a href="javascript:void(0)" value="1">全省</a></li>
<li><a href="javascript:void(0)" value="1">福州</a></li>
<li><a href="javascript:void(0)" value="1">厦门</a></li>
</ul>
</div>
</div>
<div class="clearfixa"></div>
</li>
<li>
<div class="divleft">
<span>递减清单</span>
</div>
<div class="divright" style="padding-top:3px;">
<div class="btn-group">
<button class="btn" style="min-width: 280px;_width:280px;" data-toggle="dropdown">==请选择==</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu" style="min-width:300px;_width:300px;">
<li><a href="javascript:void(0)" value="1">是</a></li>
<li><a href="javascript:void(0)" value="1">否</a></li>
</ul>
</div>
</div>
<div class="clearfixa"></div>
</li>
<li>
<div class="divleft">
<span>商品图标</span>
</div>
<div class="divright" style="padding-top:3px;">
<span id="filespan">
<input type="file" style="width: 306px;_height:30px;_line-height:30px ;" />
</span>
<input type="button" class="btn btn-info" value="上传"/>
</div>
<div class="clearfixa"></div>
</li>
<li>
<div class="divleft">
<span>图片预览</span>
</div>
<div class="divright" style="padding-top:3px;">
<img src="img/topimg.jpg" style="width:100px;height:100px;" class="img-rounded">
</div>
<div class="clearfixa"></div>
</li>
</ul>
</div>
</div>
</div>
<!--商品描述start-->
<div class="account_fold SW_fun_bg" id="div2">
<ul class="account_title clearfixa" style="padding: 0 20px;line-height: 40px;margin: 0;" action-type="drawer_toggle" suda-uatrack="key=tblog_account&value=info">
<li class="title_name W_fb" style="line-height: 40px;">2.商品描述</li>
<li class="title_content S_txt2" style="line-height: 40px;">配置商品的简介、用户提取规则、服务内容</li>
<li class="title_option W_tr" style="line-height: 40px;">
<a class="set_opt" node-type="drawer_toggle" action-data="open=编辑&close=收起" href="javascript:void(0)">编辑</a>
</li>
</ul>
<div class="unfold_content clearfixa" node-type="content" style="display: none;">
<ul>
<li>
<div class="divleft" style="width: 140px;">
<span>商品简介</span>
</div>
<div class="divright" style="padding-top:3px;width: 740px;">
<textarea name="productMemo"></textarea>
<script type="text/javascript">CKEDITOR.replace('productMemo');</script>
<!--<script id="productMemo" type="text/plain" style="width:700px;height:150px;"></script>-->
</div>
<div class="clearfixa"></div>
</li>
<li>
<div class="divleft" style="width: 140px;">
<span>用户提取规则</span>
</div>
<div class="divright" style="padding-top:3px;width: 740px;">
<textarea name="usingTutorial"></textarea>
<script type="text/javascript">CKEDITOR.replace('usingTutorial');</script>
<!--<script id="usingTutorial" type="text/plain" style="width:700px;height:150px;"></script>-->
</div>
<div class="clearfixa"></div>
</li>
<li>
<div class="divleft" style="width: 140px;">
<span>服务内容</span>
</div>
<div class="divright" style="padding-top:3px;width: 740px;">
<textarea name="serviceContent"></textarea>
<script type="text/javascript">CKEDITOR.replace('serviceContent');</script>
<!--<script id="serviceContent" type="text/plain" style="width:700px;height:150px;"></script>-->
</div>
<div class="clearfixa"></div>
</li>
</ul>
</div>
</div>
<!--商品描述end-->
<!--输出字段配置start -->
<div class="account_fold SW_fun_bg" id="div3">
<ul class="account_title clearfixa" style="padding: 0 20px;line-height: 40px;margin: 0;" action-type="drawer_toggle" suda-uatrack="key=tblog_account&value=edu">
<li class="title_name W_fb" style="line-height: 40px;">3.输出字段配置</li>
<li class="title_content S_txt2" style="line-height: 40px;" node-type="concise">
勾选需要导出的字段 </li>
<li class="title_option W_tr" style="line-height: 40px;">
<a class="set_opt" node-type="drawer_toggle" action-data="open=编辑&close=收起" href="javascript:void(0)">编辑</a>
</li>
</ul>
<div class="unfold_content clearfixa" style="display: none;">
<ul>
<li>
<div class="divleft" style="height:auto; text-align: right;">
<div class="dropdown">
<p class="text-success" style="text-align: center;line-height: 20px;">可选字段（双击插入到右边表格中）</p>
<div class="btn-group">
<button class="btn" style="min-width: 277px;_width:277px;" data-toggle="dropdown">==请选择==</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu" style="min-width:300px;_width:300px;text-align: left;">
<li><a href="javascript:void(0)" value="1">天翼核心视图</a></li>
<li><a href="javascript:void(0)" value="1">源表</a></li>
</ul>
</div>
<ul class="dropdown-menu clearfix outPrintField" role="menu" aria-labelledby="dropdownMenu" style="float: right;display: block; position: static; margin-bottom: 5px;_width:300px;width: 300px;height:600px;_height:600px;text-align: left;overflow-x:hidden;overflow-y:scroll;">
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="fieldId">纵云清单表状态更新时间[【移动】欠费用户清单</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id">天翼客户视图用户id</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id2">天翼客户视图用户id</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id3" >天翼客户视图用户id</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id4">天翼客户视图用户id</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id5">天翼客户视图用户顶顶顶顶顶顶顶顶顶id</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="fieldId">纵云清单表状态更新时间[【移动】欠费用户清单</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id">天翼客户视图用户id</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id2">天翼客户视图用户id</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id3" >天翼客户视图用户id</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id4">天翼客户视图用户id</a></li>
<li><a title="纵云清单表状态更新时间[【移动】欠费用户清单" href="javascript:void(0)" value="cust_id5">天翼客户视图用户顶顶顶顶顶顶顶顶顶id</a></li>
</ul>
</div>
</div>
<div class="divright">
<p class="text-success" style="text-align: left;padding-left: 10px;line-height: 20px;">已选字段（拖动改变顺序）</p>
<table class="table table-bordered">
<thead>
<tr class="text-warning">
<th class="text-warning" style="text-align: center;width: 30px;_width: 30px;">序号</th>
<th style="text-align: center;">字段名（双击修改）</th>
<th style="text-align: center; width: 150px;_width: 150px;">脱敏处理</th>
<th style="text-align: center; width: 26px;_width: 26px;">操作</th>
</tr>
</thead>
<tbody id="sortable">
<tr class="trdouble">
<td><span class="badge badge-info">1</span><span style="display: none;" class="oldFieldName"></span></td>
<td class="mifFieldName">纵云清单表状态更新时间[【移动】欠费用户清单]</td>
<td>
<div class="btn-group">
<button class="btn" style="min-width: 150px;_width:150px;" data-toggle="dropdown">==请选择==</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu" style="min-width:173px;_width:173px;">
<li><a href="javascript:void(0)" value="1">是</a></li>
<li><a href="javascript:void(0)" value="1">否</a></li>
</ul>
</div>
</td>
<td>删除</td>
</tr>
</tbody>
</table>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
</div>
<div style="text-align: center;margin-top:100px;">
<input class="next-step" value="上一步" tabindex="7" type="button" style="width: 170px;font-size: 14px;">
<input class="next-step" value="保存" tabindex="7" type="button" style="width: 170px;font-size: 14px;">
<input class="next-step" value="商品预览" tabindex="7" type="button" style="width: 170px;font-size: 14px;">
<input class="next-step" value="下一步" tabindex="7" type="button" style="width: 170px;font-size: 14px;">
</div>
</div>
<!--输出字段配置end -->
</div>
</div>
</div>
</div>
</body>
</html>
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
