项目开发经验分享—漂亮的弹出框效果
来源：互联网 发布：开淘宝需要多少资金 编辑：程序博客网 时间：2024/04/30 10:31
上一篇博客我们分享了动态加载页面经验《分页查询》。今天我们来分享一下UI设计经验：漂亮的弹出框效果！
引言
大家在使用软件的时候应该有看到过这样的弹出框（如下图），通过双击就可以达到选择的效果，可以单选，可以全部选择，比起我们常用的一个一个勾选的方式，不仅样式漂亮，还更方便：
所以当我们的项目遇到类似的功能时，比如，给不同的课程类型指定模板，可以单个指定，也可以全部指定，同时也要方便取消单个（或全部）指定，这时，我们就可以借鉴提供这样的功能，给用户更高的体验度！下面我们来看看具体的实现吧：
思路
1、根据需求设计UI样式
2、通过js代码实现效果
实现
1.根据需求设计UI样式，布局：
<body><div id="openClassType" class="easyui-window" title="添加课程类型" data-options="modal:true,closed:true,maximizable:false,minimizable:false,conCls:'icon-save'" style="width: 430px; height: 480px; padding: 10px;" > <div title="模版名称">模板名称：<input class="easyui-combobox" id="template" name="template" style="width:150px"data-options="url:'queryTemplate',method:'get',valueField:'id',textField:'templateName',panelHeight:'auto',panelWidth:'150px'"></div><div>_______________________________________________<br><br> 待选课程类型： 已选课程类型: <br> </div> <table style="width:100%;padding:5px;" border="0" cellpadding="0" cellspacing="0" > <tr> <td> <select multiple="multiple" id="select1" style="width:150px;height:300px; float:left; "> <option value="专业选修课实践">专业选修课实践</option> <option value="专业选修课理论">专业选修课理论</option> <option value="公共课实践">公共课实践</option> <option value="公共课理论">公共课理论</option> <option value="专业必修课实践">专业必修课实践</option> <option value="专业必修课理论">专业必修课理论</option> <option value="公共必修课理论">公共必修课理论</option> <option value="公共必修课实践">公共必修课实践</option> <option value="公共选修课理论">公共选修课理论</option> <option value="公共选修课实践">公共选修课实践</option> </select> <div style="float:left" style=" padding:20px; margin-top:20px;" > <span id="add1" style="width: 420px; height: 480px; padding:10px;" hidden="true" > <a type="button" class="easyui-linkbutton" value=">" data-options="iconCls:'icon-redo'" >添加</a> </span><br /> <span id="add2" style="width: 420px; height: 480px; padding:10px;"hidden="true" > <a type="button" class="easyui-linkbutton" value=">" data-options="iconCls:'icon-redo'" >添加</a> </span><br /> <span id="add3" style="width: 420px; height: 480px; padding:10px;"hidden="true" > <a type="button" class="easyui-linkbutton" value=">" data-options="iconCls:'icon-redo'" >添加</a> </span><br /> <span id="add" style="width: 420px; height: 480px; padding:10px;" > <a type="button" class="easyui-linkbutton" value=">" data-options="iconCls:'icon-redo'" >添加</a> </span><br /> <span id="add_all" style=" padding:10px;"> <a type="button" class="easyui-linkbutton" value=">>" data-options="iconCls:'icon-ok'">全选</a> </span> <br /> <span id="remove" style="width: 420px; height: 480px; padding:10px; "> <a type="button" class="easyui-linkbutton" value="<" data-options="iconCls:'icon-undo'">删除</a> </span><br /> <span id="remove_all" style="width: 420px; height: 480px; padding:10px;"> <a type="button" class="easyui-linkbutton" value="<<" data-options="iconCls:'icon-cancel'">全删</a> </span> <br /> <span id="move_top" style="width: 420px; height: 480px; padding:10px;"> <a type="button" value="↑" class="easyui-linkbutton" data-options="iconCls:'icon-add'" >向上</a> </span><br /> <span id="move_mutton" style="width: 420px; height: 480px; padding:10px;"> <a type="button" class="easyui-linkbutton" value="↓" data-options="iconCls:'icon-remove'">向下</a> </span><br /> <span id="top" style="width: 420px; height: 480px; padding:10px;" hidden="true"><input type="button" class="easyui-linkbutton" data-options="iconCls:'icon-add'" value="置于顶部" /></span><br /><span id="buttom" style="width: 420px; height: 480px; padding:10px;"hidden="true"> <input type="button" class="easyui-linkbutton" data-options="iconCls:'icon-add'" value="置于底部"/><a href="###"></a></span></div> <div> <select multiple="multiple" id="select2" style="width: 150px;height:300px; float:lfet; " > </select> </div> </div></td> </tr></table> <div id="addone-buttons" style="width: 160px; margin-left: 110px;"><a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="saveTemplate()" style="width: 60px">确定</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#openClassType').window('close')" style="width: 60px">取消</a></div> </div></body>2、通过js代码实现添加、全选、删除、全删等功能<script type="text/javascript"> //添加课程类型信息function saveTemplate() { $('#fm').form('submit',{success:function(data){$('#fm').form('clear');$('#addone').window('close'); $('#dg').datagrid("reload"); $.messager.alert('提示','添加成功');},error:function(data){ alert("添加失败"); }}); $('#openClassType').window('close')}//下拉框交换JQuery$(function(){ //移到右边 $('#add').click(function() { //获取选中的选项，删除并追加给对方 $('#select1 option:selected').appendTo('#select2'); }); //移到左边 $('#remove').click(function() { $('#select2 option:selected').appendTo('#select1'); }); //全部移到右边 $('#add_all').click(function() { //获取全部的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'); }); //全部移到左边 $('#remove_all').click(function() { $('#select2 option').appendTo('#select1'); }); //双击选项 $('#select1').dblclick(function(){ //绑定双击事件 //获取全部的选项,删除并追加给对方 $("option:selected",this).appendTo('#select2'); //追加给对方 }); //双击选项 $('#select2').dblclick(function(){ $("option:selected",this).appendTo('#select1'); }); //上移一行 $("#move_top").click(function(){if(null == $('#select2').val()){ alert('请选择一项'); return false; } var selected = $("#select2 option:selected"); if(selected.get(0).index!=0){ selected.each(function(){ $(this).prev().before($(this)); }); } }); //下移一行 $("#move_mutton").click(function(){if(null == $('#select2').val()){ alert('请选择一项'); return false; } var allOpts = $("#select2 option"); var selected = $("#select2 option:selected"); if(selected.get(selected.length-1).index!=allOpts.length-1){ for(i=selected.length-1;i>=0;i--){ var item = $(selected.get(i)); item.insertAfter(item.next()); } } }); //移至底部 $("#buttom").click(function(){if(null == $('#select2').val()){ alert('请选择一项'); return false; } var allOpts = $("#select2 option"); var selected = $("#select2 option:selected"); if(selected.get(selected.length-1).index!=allOpts.length-1){ for(i=selected.length-1;i>=0;i--){ var item = $(selected.get(i)); var buttom = $(allOpts.get(length-1)); item.insertAfter(buttom); } } }); //移至顶部 $("#top").click(function(){if(null == $('#select2').val()){ alert('请选择一项'); return false; } var allOpts = $("#select2 option"); var selected = $("#select2 option:selected"); if(selected.get(0).index!=0){ for(i=0;i<selected.length;i++){ var item = $(selected.get(i)); var top = $(allOpts.get(0)); item.insertBefore(top); } } });});//向上移动function moveUp(selectObj){ var theObjOptions=selectObj.options;//最上面的一个不需要移动，所以直接从i=1开始 for(var i=1;i<theObjOptions.length;i++) { if( theObjOptions[i].selected && !theObjOptions[i-1].selected ) { swapOptionProperties(theObjOptions[i],theObjOptions[i-1]); } }}//向下移动function moveDown(selectObj){ var theObjOptions=selectObj.options;//向下移动，最后一个不需要处理，所以直接从倒数第二个开始 for(var i=theObjOptions.length-2;i>-1;i--) { if( theObjOptions[i].selected && !theObjOptions[i+1].selected ) { swapOptionProperties(theObjOptions[i],theObjOptions[i+1]); } }}//操作向下向上移动function swapOptionProperties(option1,option2){//交换三部曲 var tempStr=option1.value;//option1赋值给tempStr option1.value=option2.value;//交换，option2赋值给option1 option2.value=tempStr;//交换，tempValSource赋值给tempStrvar tempValSource=option1.valSource;//option1赋值给tempValSourceoption1.valSource=option2.valSource;//交换，option2赋值给option1option2.valSource=tempValSource;//交换，tempValSource赋值给option2//获取值 tempStr=option1.text; option1.text=option2.text; option2.text=tempStr; tempStr=option1.selected; option1.selected=option2.selected; option2.selected=tempStr;}function onrightClick() { var selected = $('#select2').text();alert(selected); }function onleftClick(){var selected =$("#select1").text(); alert(selected);}</script>效果
总结
从用户角度出发，以用户为主，越靠近用户的使用习惯，软件亲和力越高，开发的软件越受欢迎！
1 0
- 项目开发经验分享—漂亮的弹出框效果
- 漂亮的弹出层效果
- 项目开发经验分享—分页查询
- 项目开发经验分享—导出Excel
- 项目开发经验分享—导入Excel
- 【分享C#项目开发经验】
- 游戏项目开发经验分享
- 游戏项目开发经验分享
- 分享项目经验：一个净水器的显示操作面板开发
- 【转】超漂亮的zDialog弹出框效果（兼容主流浏览器）
- Ajax弹出漂亮可拖动的提示层(窗)效果
- 强烈推荐，功能强大，超漂亮的弹出层效果
- 一个简单又漂亮的JS弹出窗体效果
- 软件开发：项目组长经验分享
- 软件开发：项目组长经验分享
- Display 开发的经验分享
- 漂亮的点击弹出的登陆框
- 【项目经验】分享iphone开发的好网站，希望大家也能提供一些分享下
- 1590 - IP Networks
- OpenSSL源码分析—MD4算法实现
- SQL小技巧
- java枚举使用详解
- Android之launcher学习（三）
- 项目开发经验分享—漂亮的弹出框效果
- 多柱汉诺塔最优算法设计探究
- github开源Android组件资源整理（五）ScrollView, TimeView, TipView, FlipView, ColorPickView
- GLib双向链表
- SSH的一些简单理解
- 项目开发经验分享—分页查询
- Android之launcher学习（四）
- 【运筹学】第一遍宏观总结
- Java语言程序设计-基础篇-4.19编程-金字塔
