您的位置:首页 > Web前端 > JQuery

Jquery 酷炫 用户 选择效果(js 实现带图片的 select 效果)

2014-04-11 18:15 686 查看
废话不多说,先看效果:





struts2 jsp 环境下。

代码实现:

hml部分:

<!-- 用于“保存”按钮提交时,提供数据 -->

<s:hidden id="userType" name="userType"></s:hidden>

<s:hidden id="associatedRoleIds" name="associatedRoleIds"></s:hidden>

<s:hidden id="associatedRoleNames" name="associatedRoleNames"></s:hidden>

<!--未关联用户 -->

<ul id="unassociatedRoleList" name="unassociatedRoleList" >

<s:iterator value="unassociatedRoleList" id="unauthRole" >

<s:if test="type=='group'">

<li id="${id}">

<img src="<%=path %>/styles/bkm/images/icon_08.gif" style="float:left">

<a id="a${id}" style="font-size:13px;"onclick="unauthorizedSave('${id}')" >${roleName}</a>

</li>

</s:if>

<s:else>

<li id="${id}">

<img src="<%=path %>/styles/bkm/images/t_dm_user_16.gif" style="float:left">

<a id="a${id}" style="font-size:13px;"onclick="unauthorizedSave('${id}')">${roleName}</a>

</li>

</s:else>

</s:iterator>

</ul>

………

<!--箭头按钮 开始-->

<div class="exchange_arrow">

<a href="javascript: void(0);" id="addRoleBtn" class="icon_arrow_green_r"></a>

<a href="javascript: void(0);" id="removeRoleBtn" class="icon_arrow_green_l"></a>

</div>

<!--箭头按钮 结束-->

…………

<!--已关联用户 -->

<ul id="associatedRoleList" name="associatedRoleList" >

<s:iterator value="associatedRoleList" id="authRole" >

<s:if test="type=='group'">

<li
id="${id}">

<img src="<%=path %>/styles/bkm/images/icon_08.gif" style="float:left">

<a id="a${id}" style="font-size:13px;"onclick="authorizedSave('${id}')">${roleName}</a>

</li>

</s:if>

<s:else>

<li
id="${id}">

<img src="<%=path %>/styles/bkm/images/t_dm_user_16.gif" style="float:left">

<a id="a${id}" style="font-size:13px;"onclick="authorizedSave('${id}')">${roleName}</a>

</li>

</s:else>

</s:iterator>

</ul>

…………

<button class="btn_white_84_27" type="button" onclick="submitRole();">提交</button>

js部分:

前言,课外补充。

首先这里的缓存是两个数组:var tempUnauthorizedRoleIds = []; var tempAuthorizedRoleIds = [];

tempUnauthorizedRoleIds.push(id);用于往数组里面插入 tempUnauthorizedRoleIds.splice(same, 1); 用于删除数组里的 index 的值

不懂再看 w3school 里面的相关内容。

步骤一、先抓梗概,页面之间 传递数据,懂后,再来细化其他复杂功能:

//提交

function submitRole() {

var idStr = $("#associatedRoleIds").val();

var nameStr = $("#associatedRoleNames").val();

var type = $("#userType").val();

var organs = [];

organs[0] = {

id: idStr,

userName: nameStr,

userType: type

}

closeDialog(organs);

}

步骤二、点击 左边 和 右边 框中的 item 项

左边选项框

//未关联列表左边选中时

function unauthorizedSave(id){

var idStyle=document.getElementById(id);

var idBackGround = idStyle.style.background;

if(idBackGround == null || idBackGround == ""){

$("#"+id).css({"backgroundColor":"#ccc"});

//添加到缓存

tempUnauthorizedRoleIds.push(id);

}else{

$("#"+id).css({"backgroundColor":""});

//从缓存中移除

var same ;

for(var i = 0 ; i <tempUnauthorizedRoleIds.length; i++){

if (tempUnauthorizedRoleIds[i] == id) {

//记下相同的值

same = i;

}

}

//移除

tempUnauthorizedRoleIds.splice(same, 1);

}

}

右边选项框

//关联列表右边选中时

function authorizedSave(id){

var idStyle=document.getElementById(id);

var idBackGround = idStyle.style.background;

if(idBackGround == null || idBackGround == ""){

$("#"+id).css({"backgroundColor":"#ccc"});

//添加到缓存

tempAuthorizedRoleIds.push(id);

}else{

$("#"+id).css({"backgroundColor":""});

//从缓存中移除

var same ;

for(var i = 0 ; i <tempAuthorizedRoleIds.length; i++){

if (tempAuthorizedRoleIds[i] == id) {

//记下相同的值

same = i;

}

}

//移除

tempAuthorizedRoleIds.splice(same, 1);

}

}

步骤三、>>按钮 和 << 按钮功能

$(function(){

$("#removeRoleBtn").click(function() {

for(var i = 0; i<tempAuthorizedRoleIds.length; i++){

$("#"+tempAuthorizedRoleIds[i]).remove().appendTo($("#unassociatedRoleList"));

$("#"+tempAuthorizedRoleIds[i]).css({"backgroundColor":""});

$("#"+tempAuthorizedRoleIds[i]).find("a").attr("onclick","unauthorizedSave('"+tempAuthorizedRoleIds[i]+"')");

}

populateIds();

//需要清空缓存

tempAuthorizedRoleIds.length = 0;

tempAuthorizedRoleIds.length = 0;

});

$("#addRoleBtn").click(function(){

//关联用户 的列表长度

var authRoleLength = document.getElementById("associatedRoleList").getElementsByTagName("li").length;

for(var i = 0; i<tempUnauthorizedRoleIds.length; i++){

$("#"+tempUnauthorizedRoleIds[i]).remove().appendTo($("#associatedRoleList"));

$("#"+tempUnauthorizedRoleIds[i]).css({"backgroundColor":""});

$("#"+tempUnauthorizedRoleIds[i]).find("a").attr("onclick","authorizedSave('"+tempUnauthorizedRoleIds[i]+"')");

}

populateIds();

//需要清空缓存

tempAuthorizedRoleIds.length = 0;

tempUnauthorizedRoleIds.length = 0;

});

});

步骤四、populateIds();的作用是

更新下面几个标签的值

<s:hidden id="userType" name="userType"></s:hidden>

<s:hidden id="associatedRoleIds" name="associatedRoleIds"></s:hidden>

<s:hidden id="associatedRoleNames" name="associatedRoleNames"></s:hidden>

继续populateIds();源码:

function populateIds() {

var ids = [];

var names = [];

$("#associatedRoleList li").each(function() {

ids[ids.length] = $(this).attr("id");

names[names.length] = $(this).find("a").html();

});

$("#associatedRoleIds").val(ids.join(","));

$("#associatedRoleNames").val(names.join(","));

ids = [];

$("#unassociatedRoleList li").each(function() {

ids[ids.length] = $(this).attr("id");

});

$("#unassociatedRoleList").val(ids.join(","));

}

常言道:送人玫瑰,手留余香。好的东西需要分享,才感快乐。梳理思路也是一种思维提升的良好方法。

转载注明出处: /article/8934087.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐