- 浏览: 400315 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
qiuqinjun:
你好,项目的文献能否打包学习下呢
java定时任务管理实现 -
panghaoyu:
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
使用jQuery Autocomplete(自动完成)插件 -
CommonAccount:
我的showModalDialog() 传对象参数,在子窗口用 ...
JS中showModalDialog (模态窗口)详细使用 -
wyfn18:
very good
使用jQuery Autocomplete(自动完成)插件 -
jiangqingtian:
xiexie
使用jQuery Autocomplete(自动完成)插件
之前做一个云计算的项目,涉及到一个安全组自动联想的功能,思想是这样的:
安全组规则之间是可以相互引用的,也可以自己是自己手动输入的ip/mask,这时候可以加一个功能,实现securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。
主要实现方式是:后台处理securityGroupName和SecurityGroupName的组合列表,并且在前台做相应的处理,处理为数组对象,此时对名称和id的联想基本实现,如果再加上ip/task,只需做一些处理,创建一个新数组,拼接到之前的name和id的数组上,这时候就实现了securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。
主要实现方式是:后台处理securityGroupName和SecurityGroupName的组合列表,并且在前台做相应的处理,处理为数组对象,此时对名称和id的联想基本实现,如果再加上ip/task,只需做一些处理,创建一个新数组,拼接到之前的name和id的数组上,这时候就实现了securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。
以下主要是实现ip/mask的转换,涉及一个最小掩码的算法,比如当前ip是10.12.0.0,这个时候需要计算出最小掩码,算法是:将该ip分段处理,如果第一个数不为0(,此处单纯的理解为10进制,也可以处理成2进制数之后相应的判断),那么查看后一位是否为0,这里以第二位为例(12)。因为第一位10后面的数(12)不为零,第二位12的后面的数(0)为零,则对12处理。12处理成2进制数为:00001100,掩码可最后一个1的位置有关,此时得出的数是6,那么第一位后面不为0,则第一位取全掩8,此时得出的值为8+6=14,也就是说该ip最后取出的最小掩码为14,还有三个是固定的,大家都会(14,16,24,34),如果不是以此往下类推。
/** * IP自动联想 * * @param input IP * @return IP/Task */ function getIpArray(input){ var ipArray = input.split('.'); for( var i = 0; i < 4; i++){ if (ipArray[i] == undefined || ipArray[i] == ''){ ipArray[i] = 0; } // // if(ipArray[i].indexOf('0') == 0 && ipArray[i].length > 1){ // ipArray[i] = ipArray[i].substring(1, ipArray[i].length); // } } return ipArray; } function every(arr, func){ var aa = []; for( var i = 0; i < arr.length; i++){ aa.push(func(arr[i])); } return aa; } function indexOfEnd(str){ for( var i = str.length - 1; i >= 0; i--){ if (str.charAt(i) == '1') { return 8 - (str.length - i) + 1; } } return 0; } function getPermissions(input){ var ipArray = getIpArray(input); var ip = ipArray.join('.'); var binaryIpArray = every(ipArray, function(oct){ return Number(oct).toString(2); }); var yanma = 0; for( var i = binaryIpArray.length - 1; i >= 0; i--){ if(binaryIpArray[i] != 0){ yanma = indexOfEnd(binaryIpArray[i]) + i * 8; break; } } var abc = [ 8, 16, 24, 32 ]; var rstArray = [ ip + '/' + yanma ]; for( var i = 0; i < abc.length; i++){ if(abc[i] > yanma){ rstArray.push(ip + '/' + abc[i]); } } return rstArray; }
这里主要是在键盘事件触发的时候的一个脚本,实现自动联想
/** * 创建安全组自动联想DOM */ function createSgDom(input){ var arrayObj = new Array(); var ary = new Array(); this.setNewAry([]); this.setAry([]); var autoData = jsonData.substring(1, jsonData.length -1).split(', '); for ( var element in autoData) { arrayObj.push(autoData[element]); } var permissions = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/; var ip_1 = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))[\.]?){1,3})$/; var str = /^[a-zA-Z]*([a-zA-Z]|[-])*$/; if(null != input && !str.test(input)){ if(ip_1.test(input) || permissions.test(input)){ var except = false; if(input.indexOf('.') > -1){ var value = input.split('.'); for(var val in value){ var inVal = value[val]; if(inVal.indexOf('0') == 0 && inVal.length > 1){ except = true; } if(inVal>255){ except = true; } } } else { if(input>255){ except = true; } } if(!except){ var ips = getPermissions(input); for(var ip in ips){ ary.push(ips[ip]); } } } } if(ary != null){ newAry = arrayObj.concat(ary); } else { newAry = arrayObj; } this.setNewAry(newAry); $('#suggest_value').autocomplete({ source: this.getNewAry(), minLength: 0, close: function(event, ui){ }, focus: function(event, ui){ return false; }, change: function(event, ui){ }, select: function(event, ui){ if(ui.item.label.indexOf('(') > -1 && ui.item.label.indexOf(')') > -1){ ui.item.value = ui.item.label.substring(0, ui.item.label.indexOf('(')); }else{ ui.item.value = ui.item.label.substring(0, ui.item.label.length); } } }); }
最后:
//在输入框加上一个keyup事件,指定执行脚本:createSgDom($('#suggest_value').val()); // 引入自动联想插件和上面处理ip掩码的脚本 <script type="text/javascript" src="theme/default/js/cbms/ip-permissions.js"></script> <%-- <script src="theme/default/jquery-ui/js/jquery-1.8.3.js" type="text/javascript"></script> --%> <script src="theme/default/jquery-ui/js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
请支持原创,欢迎纠错,若转载,请注明出处。
发表评论
-
jQuery实现Session过期提示
2013-06-24 15:46 10641起初项目中session过期的时候需要做一个提示框(并不进 ... -
页面所有元素加载完成之后执行某个js函数
2013-06-08 12:35 95983在页面所有元素加载完成之后执行某个js函数 做项目 ... -
在页面加载完后执行javascript代码
2013-06-04 15:54 0在页面加载完后执行javascript代码 ... -
基于jQuery的waterfall(瀑布流)布局
2013-05-21 15:44 5127<!DOCTYPE html> < ... -
如何提高你的jQuery代码技巧
2013-05-17 21:37 0Query之所以如此流行并被从大公司到个人博客的几乎每个人都 ... -
使用jQuery去掉指定标签里所有文字内容对应的链接
2013-05-21 15:43 1211有时候需要使用jQuery来去除指定的某些标签,例如,删除所有 ... -
Jquery的UI库 w2ui
2013-05-10 16:52 5100很不错的Jquery的UI库 w2ui,基于Jquery的 ... -
Javascript动态生成table的性能调优
2013-05-08 10:08 0客户端动态输出table数 ... -
经典的回到页面顶端
2013-04-25 13:54 1778经典的回到页面顶端,当页面滚动到一定的高度时,给一个回到顶 ... -
js 验证各种格式类型的正则表达式
2013-01-31 14:59 0<script src="scripts/ ... -
amCharts目前最牛逼的图表插件
2012-12-05 23:40 0amCharts,图表插件,目前最牛的图表插件 -
判断几种浏览器类型的表达式
2012-12-03 14:11 1009// IE浏览器 if (/MSIE/.test(n ... -
js获取工程路径以及js调用Servlet
2012-10-18 21:19 0function getRootPath(){ va ... -
jQuery jqplot chart plugins
2012-09-28 00:31 0Charts on this page may depe ... -
jQuery tip plugins
2012-09-25 00:35 01. 一款jQuery提示插件 2. 以下为一个java ... -
使用jQuery Autocomplete(自动完成)插件
2012-09-18 01:25 26360jQuery 的Autocomplete(自动完成、自动 ... -
动态创建js,jQuery
2012-09-18 00:53 0function checkJquery() { ... -
jQuery ajax - getJSON() 方法
2012-09-17 22:41 0<html> <head> ... -
仿IBM导航条实现
2012-09-16 22:57 0<!DOCTYPE html PUBLIC " ... -
jQuery-1.8-Api-中文版,ATF搭建,DOJO,jChart,autoSize
2012-09-21 01:32 21581,jQuery Api1.8中文帮助文档 2,js+ ...
相关推荐
很多示例我都下载看了,要么复杂,要么就实现不了。我这个示例是自己亲手写的。新建一个eslipse项目,...示例包括jquery通过ajax获取selvert类中转换的json数据和javascript通过ajax获取selvert类中转换的json数据。
NULL 博文链接:https://weistar.iteye.com/blog/1874781
用Jquery 添加删除行, 并进行计算 品名 数量 单价 金额(计算得出) 添加(按钮) 品名 数量 单价 金额(计算得出) 删除(按钮) .... --- 总计:
分别用jquery和javaScript实现的图片轮换。tab切换,图片上下滚动,表单验证。
<script type="text/javascript" src="${request.contextPath}/js/common/plug/jquery/jquery.js"></script> <script type="text/javascript" src="${request.contextPath}/js/common/plug/jquery/jquery....
CSS/JavaScript/Jquery API帮助文档三合一
<script src="/jquery/echarts-4.2.1.min.js"></script> <script type="text/javascript" src="js/echarts-gl.min.js"></script> <script language="JavaScript" src="js/echarts-tool.js"></script> ...
前端面试题汇总,HTML/CSS/JavaScript/Jquery/移动App开发/nodejs
javascript实现右下角提示框,支持最小化...<script src="/js/jquery/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //解决代码符号冲突问题 var $j = jQuery.noConflict(); </script>
代码简易,适合入门。
JavaScript与JQuery实现全选/反选/单个全选,全选自动勾选/单个未选,全选自动不勾选的区别
使用jQuery+CSS 做了一个输入框自动完成的功能,代码不多,有例子,简单易懂。有HTML和JSP两个格式的。使用到了JSON数据格式。
javascript实现右下角提示框,支持最小化...<script src="/js/jquery/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //解决代码符号冲突问题 var $j = jQuery.noConflict(); </script>
<script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"></script> <script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"></script> ...
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.poshytip.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></...
好看的select下拉框(带搜索功能),由于默认select样式过丑而且有些东西还不好改,这个是利用input框和ul来实现一个下拉框的效果。分为不带搜索功能和带搜索功能两个部分。以及jquery与javascript两种实现
用 jQuery 替代Prototype/script.aculo.us 在Rails做 helpers 实现 javascript 的功能,jQuery library的优点: 快速简洁优雅. 也支持JQuery与Prototypea共存,方法如下: 1、将jquery.js放到prototype.js后面(这个...
通过jquery的javascript代码及css实现选项卡功能,美观大方,要求加载jQueryUI
JavaScript实现的ajax城市选择控件源代码.rar jcarousellite图片滚动.rar JQuery Tab.rar JQuery zTree v3.1.zip jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动.rar jQuery&CSS图形下拉菜单.rar jQuery...
<script type="text/javascript" src="ui/jquery.ui.core.js"></script> <script type="text/javascript" src="ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="ui/jquery.ui.mouse....