摇滚21 选择标签至文本域效果,可多选/可过滤重复/可限制个数(已封装)

js效果:
http://www.oschina.net/code/snippet_129267_3649
(function(){
	$.fn.extend({
		iSelectTags:function(options){
			var iset={
				name:'.tagsbox',//表单或class或id名
				drop:$('#dropbox'),//弹出框定位
				pseudoClass:$('#dropbox>p>a'),//可选择的标签定位
				close:$('em.close'),//关闭按钮定位
				separator:',',//标签间分隔符,建议使用英文逗号
				maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值
			}
			options=$.extend(iset, options || {});
			var _input=$(iset.name);
			var _inputVal=_input.val();
			var _arr=new Array(); //存放标签的数组
			var _left=_input.offset().left; //左绝对距离
			var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度
			var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight'));
			iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});
			//弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.
			var _txt=null;
			var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数
			if(isNaN(_maxCount)){
				_maxCount=iset.maxCount
			}

			_input.click(function(){
				iset.drop.show();
				iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题
            }).bind('keyup change',function(){
				//可以在此处扩展手动输入标签情况下的相关判断
				//if语句可避免清空重新选择时第一个字符为逗号
				if ($(this).val() == '') {
					_arr = new Array();
				}else {
					_arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值
				}
			});

			$(document).click(function(e){
				//点击非弹出框区域时关闭弹出框
				//下面的 if语句是用来判断传入的是class还是id
				if(iset.name.charAt(0)=='#'){
					if(e.target.id!=iset.name.substring(1)){
						iset.drop.hide();
						}
				}else if(iset.name.charAt(0)=='.'){
					if(e.target.className!=iset.name.substring(1)){
						iset.drop.hide();
						}
				}
			});

			iset.drop.click(function(e){
				//阻止弹出框区域默认事件
				e.stopPropagation();
			});

			iset.pseudoClass.click(function(){
				//标签选择
				_txt=$(this).text();
				//下面的$.inArray是用来判断是否重复
				//若想反馈重复提示或走出限制个数提示,可改进下面的if语句
				if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){
					_arr.push(_txt);
					_inputVal=_arr.join(iset.separator);
					_input.val(_inputVal);
				}

			});
			//关闭按钮
			iset.close.click(function(){
				iset.drop.hide();
			});
		}
	});
})(jQuery);

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
城市应急指挥系统是智慧城市建设的重要组成部分,旨在提高城市对突发事件的预防和处置能力。系统背景源于自然灾害和事故灾难频发,如汶川地震和日本大地震等,这些事件造成了巨大的人员伤亡和财产损失。随着城市化进程的加快,应急信息化建设面临信息资源分散、管理标准不统一等问题,需要通过统筹管理和技术创新来解决。 系统的设计思路是通过先进的技术手段,如物联网、射频识别、卫星定位等,构建一个具有强大信息感知和通信能力的网络和平台。这将促进不同部门和层次之间的信息共享、交流和整合,提高城市资源的利用效率,满足城市对各种信息的获取和使用需求。在“十二五”期间,应急信息化工作将依托这些技术,实现动态监控、风险管理、预警以及统一指挥调度。 应急指挥系统的建设目标是实现快速有效的应对各种突发事件,保障人民生命财产安全,减少社会危害和经济损失。系统将包括预测预警、模拟演练、辅助决策、态势分析等功能,以及应急值守、预案管理、GIS应用等基本应用。此外,还包括支撑平台的建设,如接警中心、视频会议、统一通信等基础设施。 系统的实施将涉及到应急网络建设、应急指挥、视频监控、卫星通信等多个方面。通过高度集成的系统,建立统一的信息接收和处理平台,实现多渠道接入和融合指挥调度。此外,还包括应急指挥中心基础平台建设、固定和移动应急指挥通信系统建设,以及应急队伍建设,确保能够迅速响应并有效处置各类突发事件。 项目的意义在于,它不仅是提升灾害监测预报水平和预警能力的重要科技支撑,也是实现预防和减轻重大灾害和事故损失的关键。通过实施城市应急指挥系统,可以加强社会管理和公共服务,构建和谐社会,为打造平安城市提供坚实的基础。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值