仿照CSDN注册+新浪个人信息样式的流程化步骤功能模块
2014-07-07 15:51
369 查看
最近项目需要开发一个流程化配置商品的功能,就参考了一些著名网站的样式,最后整和CSDN注册页面以及新浪微博的个人信息页面,再加上最近学习的bootstrap,就开始开发。不过为了兼容IE6,我没有用最新的bootstrap3,而是用了bootstrap2(兼容IE6)版本,发上来跟大家分享:
源码下载地址:http://download.csdn.net/detail/c3618392/7603903
相应代码如下:
源码下载地址: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>
相关文章推荐
- 后台的grid显示出来的功能模块步骤-----个人总结--12.28
- 后台的grid显示出来的功能模块步骤-----个人总结--12.28
- CSDN修改个人资料的功能,如果内容不符合交互规则,页面没有提示信息
- CRM主要功能模块信息
- 注册CSDN很久,但还没做个人和贡献,实在抱歉。
- 模块功能的注册和取消
- 在csdn中,如何通过短信息功能给我发信息!
- 腾讯 iweibo Java API 1.2.1 补充头像和个人信息更新功能接口
- Ajax个人开发心得(一)先从一个最简单的ajax功能模块说起,Ajax技术其实很简单
- AgileEAS.NET平台开发实例-药店系统-功能发布[模块注册][上]
- AgileEAS.NET平台开发实例-药店系统-功能发布[模块注册][上]
- 如何注册STK功能模块?
- 完全免费功能齐全的个人信息管理系统d1PIM2009 Preview2发布
- 据说CSDN的博客和新浪的微博的信息可以互通了,真假我们来测试一把!
- 个人注册公司步骤
- CSDN个人空间相册功能暂停公告
- 完全免费功能齐全的个人信息管理系统d1PIM隆重发布
- VCL窗口函数注册机制研究手记,兼与MFC比较 (CSDN转载请保留此信息)
- AdminStudio功能模块与版本信息总结