您的位置：首页 > 其它

项目开发经验分享—漂亮的弹出框效果

2015-01-31 19:32 267 查看

上一篇博客我们分享了动态加载页面经验《分页查询》。今天我们来分享一下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赋值给tempStr

var tempValSource=option1.valSource;//option1赋值给tempValSource
option1.valSource=option2.valSource;//交换，option2赋值给option1
option2.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>

效果

总结

从用户角度出发，以用户为主，越靠近用户的使用习惯，软件亲和力越高，开发的软件越受欢迎！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航