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
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
相关文章推荐
- 原生js和jquery实现图片轮播淡入淡出效果
- js+jquery+html实现在三种不通的情况下,点击图片放大的效果
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- JS实现的radio图片选择按钮效果
- 360浏览器搜索框下拉选择图片js模拟select效果
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- JS实现的radio图片选择按钮效果
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select
- select下拉选择框美化实现代码(js+css+图片)
- select下拉选择框美化实现代码(js+css+图片)
- 用JS实现的radio图片选择按钮效果
- jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
- 纯CSS3实现多种不同的等待效果(无js/jquery/无图片)
- 非常惊艳的Css3的桌面上散落的相片效果,以及单击放大图片的LightBox效果(独立Js非jQuery)的实现原理
- jQuery模拟实现的select点击选择效果【附demo源码下载】
- [分享黑科技]纯js突破localstorage存储上线,远程抓取图片,并转码base64保存本地,最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制,单页应用最新黑科技
- 利用jquery-fform.js插件实现图片所见即所得效果
- 网页中图片轮翻效果(js+jQuery实现)