文档章节

Jquery实现弹出选择框选择后返回,支持多级分类

深圳大道
 深圳大道
发布于 2016/12/29 15:38
字数 759
阅读 1
收藏 0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>选择收件人</title>
  <script src="../jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="friend.js" type="text/javascript"></script>
 </head>

 <body>
	收件人:<input type="text" name="my-name" id="my-name" value="请选择收件人" onclick="pop()" />
           <input type="hidden" name="my-value" id="my-value" />

    <!--alert layer-->
	<div id="choose-box-wrapper">
	  <div id="choose-box">
		<div id="choose-box-title">
			<span>选择好友</span>
		</div>
		<div id="choose-a-class">
		</div>
		<div>
            <ul id="choose-a-item">
            </ul>
		</div>
		<div id="choose-box-bottom">
            <input type="button" onclick="doSelect()" value="确定" />  
			<input type="button" onclick="hide()" value="关闭" />
		</div>
	  </div>
	</div>
    <!--alert layer-->
  
  <script type="text/javascript">
	//弹出窗口
	function pop(){
		//将窗口居中
		makeCenter();
		//初始化分类列表
		initLayerClass();
		//默认情况下, 给第一个分类添加choosen样式
		$('[class-id="1"]').addClass('choosen');
		//初始化ITEM列表
		initItemList(1);
	}

	//隐藏窗口
	function hide() {
	    $('#choose-box-wrapper').css("display", "none");
	}

    //获取选择值
	function doSelect() {
	    var list = $(".class-item-ck");
	    var text = "";
	    var value = "";
	    list.each(function () {
	        if ($(this).is(':checked')) {
	            text += $(this).attr("item-name") + ";";
	            value += $(this).attr("item-id");
	        };
	    });
	    $('#my-name').val('').val(text);
	    $('#my-value').val('').val(value);
	    //关闭弹窗
	    hide();
    };

	function initLayerClass()
	{
		//原先的分类列表清空
		$('#choose-a-class').html('');
		for (i = 0; i < itemList.length; i++) {
		    $('#choose-a-class').append('<a class="class-item" class-id="' + itemList[i].id + '">' + itemList[i].name + '</a>');
		}
		//添加分类列表项的click事件
		$('.class-item').bind('click', function () {
		    var item = $(this);
		    var classid = item.attr('class-id');
		    var choosenItem = item.parent().find('.choosen');
		    if (choosenItem) {
		        $(choosenItem).removeClass('choosen');
		    }
		    item.addClass('choosen');
		    //更新列表
		    initItemList(classid);
		}
		);
	}

	function initItemList(classid)
	{
		//原先列表清空
		$('#choose-a-item').html('');
		var mitems = itemList[classid - 1].items;
		for (i = 0; i < mitems.length; i++) {
		    var html = '<li class="itemli">';
		    html += '<a class="mdata-item" item-id="' + mitems[i].id + '">' + mitems[i].name + '</a>';
		    html += '<input type="checkbox" class="class-item-ck" item-id="' + mitems[i].id + '" item-name="' + mitems[i].name + '" />';
		    html += '</li>';
		    $('#choose-a-item').append(html);
		}
		//添加详细列表项的click事件
		$('.mdata-item').bind('click', function(){
				var item=$(this);
				//更新选择文本框中的值
				$('#my-name').val(item.text());
				//关闭弹窗
				hide();
			}
		);
	}

	function makeCenter()
	{
		$('#choose-box-wrapper').css("display","block");
		$('#choose-box-wrapper').css("position","absolute");
		$('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px");
		$('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px");
	}

  </script>
	
  <style type="text/css">
	#choose-box-wrapper{
		width: 652px;
		background-color:#000;
		filter:alpha(opacity=50);
		background-color: rgba(0, 0, 0, 0.5);
		padding:10px;
		border-radius:5px;
		display:none;
	}
	#choose-box{
		border: 1px solid #005EAC;
		width:650px;
		background-color:white;
	}
	#choose-box-title{
		background:#3777BC;
		color: white;
		padding: 4px 10px 5px;
		font-size: 14px;
		font-weight: 700;
		margin: 0;
	}
	#choose-box-title span{
		font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
	}

	#choose-a-class, #choose-a-item{
		margin:5px 8px 10px 8px;
		border: 1px solid #C3C3C3;
	}
	#choose-a-class a{
		display:inline-block;
		height: 18px;
		line-height: 18px;
		color:#005EAC;
		text-decoration: none;
		font-size: 9pt;
		font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
		margin:2px 5px;
		padding: 5px;
		text-align: center;
	}
	#choose-a-class a:hover{
		text-decoration: none;
		cursor:pointer;
	}
	#choose-a-class .choosen{
		background-color: #005EAC;
		color:white;
	}
	
	#choose-a-item{
		overflow-x: hidden;
		overflow-y: auto;
		height: 200px;
	}
	#choose-a-item a{
		height: 18px;
		line-height: 18px;
		color:#005EAC;
		text-decoration: none;
		font-size: 9pt;
		font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
		float: left;
		padding:2px 5px 2px 5px;
		margin: 4px;
		padding-left:10px;
		background:url(2012072500060712.gif) no-repeat 0 9px;
	}
	#choose-a-item a:hover{
		background-color:#005EAC;
		color:white;
		cursor:pointer;
	}
	#choose-a-item .itemli{
	    width:100px; 
	    list-style:none; 
	    float:left;
	}
	#choose-a-item .class-item-ck
	{
	    margin-top:10px;
	    display:inline;
	}
		
	#choose-box-bottom{
		background: #F0F5F8;
		padding: 8px;
		text-align: right;
		border-top: 1px solid #CCC;
		height:40px;
	}
	#choose-box-bottom input{
		vertical-align: middle;
		text-align: center;
		background-color:#005EAC;
		color:white;
		border-top: 1px solid #B8D4E8;
		border-left: 1px solid #B8D4E8;
		border-right: 1px solid #114680;
		border-bottom: 1px solid #114680;
		cursor: pointer;
		width: 60px;
		height: 25px;
		margin-top: 6px;
		margin-right: 6px;
	}
  </style>

 </body>
</html>
var itemList = [
{
    "id": 1,
    "items": [{
        "id": 1001,
        "name": "张三1"
    },
    {
        "id": 1002,
        "name": "李四1"
    },
    {
        "id": 1003,
        "name": "王五1"
    },
    {
        "id": 1004,
        "name": "赵六1"
    },
    {
        "id": 1005,
        "name": "赵七1"
    }],
    "name": "我的同学"
},
{
    "id": 2,
    "items": [{
        "id": 1001,
        "name": "张三2"
    },
    {
        "id": 1002,
        "name": "李四2"
    },
    {
        "id": 1003,
        "name": "王五2"
    },
    {
        "id": 1004,
        "name": "赵六2"
    },
    {
        "id": 1005,
        "name": "赵七2"
    }],
    "name": "我的同事"
}
]


本文转载自:http://blog.csdn.net/smartsmile2012/article/details/41649965

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
分享简单而实用的网页菜单导航【提供源码】

菜单导航对于一个网站来说非常重要,对于浏览者来说,导航设计的好坏将直接影响用户的体验。这里,我们为网页开发者提供了一系列简单但是实用的导航菜单例子及其源码,仅供参考和学习。 CSS3...

tp_wire
2012/06/14
439
1
JQuery Ajax实现Select多级关联动态绑定数据

关于JQuery选择插件的使用在这里有些心得和大家分享一下,希望能帮到大家。 jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是很...

海岸线的曙光
2018/10/25
90
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
9.3K
6
8 款值得一试的全新 jQuery 插件

今天本文向大家推荐8款最新的jQuery插件,希望你能够喜欢。 1、jQuery带缩略图竖向伸展焦点图 这是一款jQuery的竖向伸展焦点图,该jQuery焦点图有两个特点,第一切换的按钮有缩略图,第二图片...

yykj
2013/10/24
968
3
推荐 15 个 jQuery 选择框插件

jQuery Selectbox 插件可以让你创建漂亮和吸引眼球的选择框,用于替代浏览器自带的老旧的 HTML 选择框效果。本文向你推荐 15 个 jQuery 的选择框插件,可轻松集成到你的 Web 应用中。希望你能...

oschina
2015/07/03
47.5K
13

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
今天
4
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部