澳门新葡新京 > 相关资源 > tabs标签切换实现代码_jquery_脚本之家

tabs标签切换实现代码_jquery_脚本之家
2019-12-26 16:08

Why DIY jquery tab 接触jquery 2,八个月了,一直都未动手写过插件。适逢其时方今可比闲,就计划把间接看不美观的档期的顺序中幸存的tab改动风华正茂番(现存的tab未能做成二个控件,copy,past的代码太多)。 想着jQuery这么强盛的库非常的小概未有tabs插件吧,赶紧搜了须臾间,哈,果然!jQuery tabs!心里风姿罗曼蒂克阵窃喜,赶紧load下来用用吧。可查看了弹指间它的用法,才开掘不太适用现存的项目耶,大家的tab每贰个都对应着三个整机的页面,是用iframe嵌入的。而jQuery tabs犹如并未援助iframe哦。这就改动一下啊?得自始至终研商它的代码吧,发烧!还不及自身写叁个得了,赶巧练练手,哈哈。说干就干,因此便出生了我的首先个jQuery插件。 Code 复制代码 代码如下: /* * jquery.tab * Author: 冬季小草 * Date: 2010/12/07 */ jQuery.fn.tab = function { var settings = { activeTabClass: "tab-selected", defaultTabClass: "tab-default", tabContainerClass: "tabContainer", tabPanelCls: "tabPanel", mouseoverTabClass: null, hiddenTabClass: 'tab-hide', tabPanel: null, selectHandler: null, iframeIdPrex: 'iframe_' }; if { jQuery.extend; } //#region public events $.fn.setActiveTab = function { if { return this.each { this.setActiveTab } }; $.fn.getFrameByTabId = function { var iframeId = settings.iframeIdPrex + tabId; return frames[iframeId]; } return null; }; //#endregion public events return this.each { var ts = this; var $tabContainer = $; ts.activeTab = null; ts.tabPanelId = null; ts.selectedTab = null; ts.selectedIndex = 0; ts.iframeId = null; //#region 'private' methods this.setActiveTab = function { if != "number") { return; } var selectedTab = $('li:visible', $tabContainer).eq; if (selectedTab.length == 0) { return; } //click the active tab if (ts.iframeId == settings.iframeIdPrex + selectedTab.attr { return; } else { if { //$.hide; } } $('.' + settings.activeTabClass, $tabContainer).removeClass(settings.activeTabClass); ts.activeTab = selectedTab; ts.activeTab.addClass(settings.activeTabClass); var target = ts.activeTab.attr; if != 'string') { return; } ts.iframeId = settings.iframeIdPrex + selectedTab.attr; if .length == 0) { var iframe = $; iframe.attr .attr .css({ width: '100%', height: '100%' }); iframe.appendTo; } else { $.show(); } }; var initialTabs = function() { $tabContainer.addClass(settings.tabContainerClass); $.addClass; var stopFloatDiv = $; stopFloatDiv.css({ clear: 'both', height: '0px' }) .insertAfter; $.each { var $tab = $; var $link = $; var href = $link.attr; $link.attr; $tab.attr .addClass(settings.defaultTabClass) .click { ts.selectedTab = $tab; ts.selectedIndex = i; if (typeof (settings.selectHandler) == "function") { settings.selectHandler(); } else { ts.setActiveTab; }; //#endregion 'private' methods initialTabs; //set first tab active as default. }卡塔尔国; }; 德姆o 复制代码 代码如下: html code:

场情: 一张页面中原本有叁个超链接按钮,点击后方可获得到短信认证码。如 复制代码 代码如下: 得到短信认证码)

基本代码:复制代码 代码如下:

1.幸免接收eval或然Function布局函数 2.幸免接纳with 3.永不在性质供给主要的函数中选用try-catch-finally 4.幸免采取全局变量 5.制止在质量供给重视的函数中使用for-in 6.使用字符串累积计算风格 7.原操作会比函数调用快 8.安装setTimeout 时传递函数名并不是字符串 9.幸免在对象中利用无需的DOM援用 10.最清晰的对象进度,最小化成效域链 11.试着在本子中少使用注释,制止选拔长变量名 12.在这里时此刻成效域存款和储蓄应用的表面变量 13.采取变量缓存值 1.幸免使用eval或然Function构造函数 使用eval可能Function布局函数的代价是极度昂贵的,每趟都亟需剧本引擎调换源代码到可施行代码。 别的,使用eval管理字符串必需在运行时表明。 运行缓慢的代码: 复制代码 代码如下: function addMethod(object, property, code卡塔尔 { object[property] = new Function; } addMethod(myObj, 'methodName', 'this.localVar=foo'卡塔尔(قطر‎; 运行越来越快的代码: 复制代码 代码如下: function addMethod(object, property, func卡塔尔(英语:State of Qatar) { object[property] = func; } addMethod(myObj, 'methodName', function () { 'this.localVar=foo'; }); 2.制止选用with 就算很便利,with必要增大的查找援引时间,因为它在编译的时候并不知道作用域的上下没。 运维缓慢的代码: 复制代码 代码如下: with { foo = 'Value of foo property of object'; bar = 'Value of bar property of object'; } 运转更加快的代码: 复制代码 代码如下: var myObj = test.object; myObj.foo = 'Value of foo property of object'; myObj.bar = 'Value of bar property of object'; 3.不用在性质须要首要的函数中应用try-catch-finally try-catch-finally在运转时每一回都会在现阶段功效域创造一个新的变量,用于分配语句执行的要命。 十分管理相应在本子的高层完毕,在足够不是很频仍产生的地点,比方一个循环体的外部。 假若只怕,尽量完全幸免使用try-catch-finally。 运营缓慢的代码: 复制代码 代码如下: var object = ['foo', 'bar'], i; for (i = 0; i < object.length; i++卡塔尔(قطر‎ { try { // do something that throws an exception } catch { // handle exception } } 运营越来越快的代码: 复制代码 代码如下: var object = ['foo', 'bar'], i; try { for (i = 0; i < object.length; i++) { // do something } } catch { // handle exception } 4.防止选拔全局变量 若是您在多少个函数大概别的成效域中动用全局变量,脚本引擎供给遍历整个作用域去追寻她们。 全局功用域中的变量在剧本的生命周期里都设有,然后局部范围的会在局地范围失去的时候被销毁。 运维缓慢的代码: 复制代码 代码如下: var i, str = ''; function globalScope(卡塔尔 { for { str += i; // here we reference i and str in global scope which is slow } } globalScope(卡塔尔(英语:State of Qatar); 运营越来越快的代码: 复制代码 代码如下: function localScope(卡塔尔国 { var i, str = ''; for { str += i; // i and str in local scope which is faster } } localScope(卡塔尔; 5.防止在性质要求首要的函数中选择for-in for-in循环必要剧本引擎建立一张保有可枚举属性的列表,并检查是还是不是与原先的再一次。 借令你的for循环效用域中的代码未有退换数组,能够优先总计好数组的尺寸用于在for循环中迭代数组。 运营缓慢的代码: 复制代码 代码如下: var sum = 0; for { sum += arr[i]; } 运转更加快的代码: 复制代码 代码如下: var sum = 0; for (var i = 0, len = arr.length; i < len; i++卡塔尔国 { sum += arr[i]; } 6.运用字符串累计计算风格 使用+运算会在内部存款和储蓄器中创设一个新的字符串并把连接的值赋给它。仅仅是将以此结果赋值给三个变量。 为了制止连接结果的中间变量,能够采纳+=来从来赋值结果。 运转缓慢的代码: 复制代码 代码如下: a += 'x' + 'y'; 运维更加快的代码: 复制代码 代码如下: a += 'x'; a += 'y'; 7.原操作会比函数调用快 能够思谋在质量要求首要的大循环和函数中利用能够代替的原操作。 运营缓慢的代码: 复制代码 代码如下: var min = Math.min; 运转越来越快的代码: 复制代码 代码如下: var min = a < b ? a : b; arr[arr.length] = val; 8.设置setTimeout 时传递函数名并非字符串 如若您传递二个字符串到set提姆eout中,字符串将会被eval总括而引致慢性。 使用三个无名函数包装来替代,那样在编写翻译的时候就能够被分解和优化。 运行缓慢的代码: setInterval('doSomethingPeriodically; setTimeOut('doSomethingAfterFiveSeconds; 运营越来越快的代码: 复制代码 代码如下: setInterval(doSomethingPeriodically, 1000卡塔尔(英语:State of Qatar); setTimeOut(doSomethingAfterFiveSeconds, 5000卡塔尔; 9.制止在对象中利用无需的DOM援用 不要这么做: 复制代码 代码如下: var car = new Object(卡塔尔(英语:State of Qatar); car.color = "red"; car.type = "sedan" 越来越好的少年老成种情势: 复制代码 代码如下: var car = { color : "red"; type : "sedan" } 10.最清晰的对象进程,最小化作用域链 低功效方法: 复制代码 代码如下: var url = location.href; 生机勃勃种高效格局: 复制代码 代码如下: var url = window.location.href; 11.试着在本子中少使用注释,制止使用长变量名 尽或然的担保注释少可能幸免采用注释,特别是在函数,循环甚至数组中。 注释不须求的款款脚本试行并且扩充了文件大小。例如: 不建议的款式: 复制代码 代码如下: function someFunction(卡塔尔 { var person_full_name="somename"; /* stores the full name*/ } 越来越好的写法: 复制代码 代码如下: function someFunction(卡塔尔(英语:State of Qatar) { var name="somename"; } 12.在这里时此刻作用域存款和储蓄应用的外表变量 当二个函数被实施的运维上下问被穿件,三个活动的对象会含有全体片段变量会被推到上下文链的前方。 在功用域链中,最慢的是明亮的分辨标记符,意味着部分变量是最快的。存储频仍使用的外表变量读和写都会刚强的增长速度。那对于全局变量和此外深档期的顺序的标志符查找特地扎眼。 雷同,在时下功效域中的变量比对象像属性的访谈速度快。 运维缓慢的代码: 复制代码 代码如下: function doSomething { var divs = document.getElementsByTagName, text = ['foo', /* ... n ... */, 'bar']; for (var i = 0, l = divs.length; i < l; i++) { divs[i].innerHTML = text[i]; } } 运维越来越快的代码: 复制代码 代码如下: function doSomething法斯特er { var doc = document, divs = doc.getElementsByTagName, text = ['foo', /* ... n ... */, 'bar']; for (var i = 0, l = divs.length; i < l; i++) { divs[i].innerHTML = text[i]; } } 如若您供给拜见一个要素在一个大的循环中,使用三个地点的DOM访问会更加快。 运营更加快的代码: 复制代码 代码如下: function doSomethingElse法斯特er(卡塔尔(英语:State of Qatar) { var get = document.getElementsByTagName; for (var i = 0, i < 100000; i++卡塔尔(قطر‎ { get; } } 13.运用变量缓存值 在做重新职业的地点使用部分变量缓存值。 上边包车型客车风姿罗曼蒂克组例子注明了蕴藏值到有些变量的广泛意义。 例子1.总计实行前在循环体内采用变量存款和储蓄数学函数 错误的办法: 复制代码 代码如下: var d=35; for { y += Math.sin*10; } 更加好的管理: 复制代码 代码如下: var d = 55; var math_sind = Math.sin*10; for { y += math_sind; } 例子2.封存数组的尺寸在循环中选择 不佳的管理: 数组的长度每便都会被另行计算 复制代码 代码如下: for (var i = 0; i < arr.length; i++卡塔尔国 { // do something } 越来越好的校正: 更加好的方式是保留数组的尺寸 复制代码 代码如下: for (var i = 0, len = arr.length; i < len; i++卡塔尔(英语:State of Qatar) { // do something } 说来讲去,假设已经做了一回,大家就不须求重新的做不须求的做事。举个例子,成效域只怕函数中频仍利用到计算的贰个表达式的值,保存到变量可以使它往往被运用,不然大家会过度的声美素佳儿(Friso卡塔尔个变量并赋值然后只适用二遍。所以请记住那几个。 添补表明:第2点 顺便说一下JS首要不是编写翻译的是表达的. 虽说不影响表明,但学术照旧严刻点好. 第6点那是还是不是格式搞乱了? a += ‘x' + ‘y'; 运营更加快的代码: a += 'x'; a += 'y'; 9.制止在目的中采纳无需的DOM引用 new Object也是DOM援引? 这一个相应是说不要轻意使用new Object, 以至new Function(卡塔尔(قطر‎ 经常情状使用 {...}, [...], f = function{...} 即: 那和上边那点应当说的是一次事. 最终补充八个少用 位运算, 因为js的具备数值运算最终都以整套转得浮点来算的..所以位运算大概反倒更加慢.

不过考虑到频繁点击获取认证码,对相关设施的下压力,就做了一个点击5秒后才同意再点击的逻辑,于是又来了下二个版本 复制代码 代码如下: function reciverSms{ var sms = getSmsCode(卡塔尔国; obj.disabled = true; windows.setTimeout{ obj.disabled = false; },5000卡塔尔(قطر‎; } 代码逻辑非常轻易,获取一次短信后,链接禁止使用5秒。然则未有想的业务又来了,原本超链接禁止使用了后虽说样子产生禁止使用了,可是还能点击的,原本是个圈套,于是又来了第七个本子 复制代码 代码如下: function reciverSms{ if{ return; } var sms = getSmsCode(卡塔尔; obj.disabled = true; windows.setTimeout{ obj.disabled = false; },5000卡塔尔国; } 至此其后生可畏功效因该是算做好了,可是还应该有后生可畏件令笔者想不的事,以前说超连接disabled属性为true时,表现出来的标准是铜锈绿不可用状态,但此处有个特例,若是这些超链接被安装了 color的css属性样式,在非ie浏览器上显现出来的标准就不是剥夺了,终于看见ie的好了。于是第四个本子现身了。 复制代码 代码如下: function reciverSms{ if{ return; } var sms = getSmsCode(卡塔尔国; obj.disabled = true; addClass; windows.setTimeout{ obj.disabled = false; removeClass; } 通过一步步的修改,二个芝麻功用终于产生了。例子虽小,但却给了自家无数心想。

TextAreaHTML代码: 复制代码 代码如下:

上一篇:没有了 下一篇:没有了