_ 坚持不一定会胜利,但放弃一定会失败。

JS ajax 分页导航 -- By Mr.K [ 原创 ]

JS ajax 分页导航 -- By Mr.K [ 原创 ]

分享原创JS Ajax 分页导航 (基于jQuery), 希望大家多提提意见,一起改进JS代码:/** * 分页导航 * Description JS Lib * Power By Mr.K * QQ 908526866 * E-mail lnend@sina.cn Please respect the developers, thank you. */ var pageNav = function(navDom, opts){ if(!navDom) return false; var defaultOpt = { pageSize: 10, pageIndex: 1, pageMax: 0, navMath: 5 } var opts = $.extend(defaultOpt, opts); var me = this; me.init = function(){ var navUl = $('<ul />').addClass('k-pagination'), prev = $('<li />').attr('id', 'nav_prev').html('<a href="javascript:;">< 上一页</a>'), next = $('<li />').attr('id', 'nav_next').html('<a href="javascript:;">下一页 ></a>'); //生成导航 var html = '', isLess = false, isMore = false; var index = parseInt(opts.navMath / 2), begin = opts.pageIndex - index, end = opts.pageIndex + index; //限制最小 if(begin < 1){ begin = 1; end = begin + index * 2; } //限制最大 if(end > opts.pageMax){ begin = opts.pageMax - (opts.navMath - 1); begin < 1 ? begin = 1 : null; end = opts.pageMax; } /* 添加更少提示 */ if(begin > 1 && begin <=2){ html += '<li class="pageNav pageNavItem"><a href="javascript:void(0);">1</a></li>'; } if(begin > 2){ html += '<li class="pageNav pageNavItem"><a href="javascript:void(0);">1</a></li>'; html += '<li><a href="javascript:void(0);">...</a></li>'; } for(var i=begin;i<=end;i++){ var c = 'pageNavItem'; if(opts.pageIndex == i) c = 'active'; html += '<li class="pageNav '+ c +'"><a href="javascript:void(0);">'+ i +'</a></li>'; } /* 添加更多提示 */ if(end < opts.pageMax && end >= opts.pageMax-1){ html += '<li class="pageNav pageNavItem"><a href="javascript:void(0);">'+ opts.pageMax +'</a></li>'; } if(end < opts.pageMax-1){ html += '<li><a href="javascript:void(0);">...</a></li>'; html += '<li class="pageNav pageNavItem"><a href="javascript:void(0);">'+ opts.pageMax +'</a></li>'; } if(opts.pageMax && opts.pageMax > 0) { navUl.append(prev).append(html).append(next); navDom.html(navUl); } } me.init(); /* 清空已绑定事件 */ navDom.off('click','#nav_prev'); navDom.off('click','#nav_next'); navDom.off('click','.pageNavItem'); //上一页 navDom.on('click', '#nav_prev', function(){ if(opts.pageIndex <= 1) return; opts.pageIndex--; me.init(); me.onClick && me.onClick(opts.pageIndex); }); //下一页 navDom.on('click', '#nav_next', function(){ if(opts.pageIndex >= opts.pageMax) return; opts.pageIndex++; me.init(); me.onClick && me.onClick(opts.pageIndex); }); //导航点击 navDom.on('click', '.pageNavItem', function(){ opts.pageIndex = parseInt($(this).text()); me.init(); me.onClick && me.onClick(opts.pageIndex); }); //销毁 me.destroy = function(){ navDom.empty(); } }CSS:/* k-pagination */ .pageNav{padding: 20px;text-align: right;overflow: hidden} .k-pagination { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; margin: 0; padding: 0; height: 32px; font-size: 14px; list-style: none; } .k-pagination li { display: inline-block; margin: 0; padding: 0; vertical-align: middle; } .k-pagination a { margin-right: 10px; display: inline-block; border-radius: 5px; overflow: hidden; padding: 0 8px; height: 26px; line-height: 27px; text-align: center; } .k-pagination a:hover { color: rgb(0,169,211); } .k-pagination li.active a { background: rgb(0,169,211); color: #FFF; }HTML: <div class="pageNav"></div>用法: pageNav = new pageNav($('.pageNav'), { pageIndex: pageIndex pageMax: Math.ceil(count / params.pageSize) }); /* 分页导航操作 */ pageNav.onClick = function(page){ // Todo ... }该Javascript类是由Mr.K封装, 切勿用于商业用途有什么意见或建议请联系在下面留言,觉得没用的请绕道~!希望大家在这里能学到更多的东西,一起交流先进的前端技术E-mail:lnend@sina.cn QQ:908526866

Mr.K 浏览(203) 评论(0) 赞 (6)
阅读全文

JavaScript代码放在HTML代码哪里比较好

JavaScript代码放在HTML代码哪里比较好

本文总结了多种放置JS代码的方法,需要的朋友可以参考下在哪里放置 JavaScript 代码?通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述。放置于<head></head>之间将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下依次载入的,将 JavaScript 代码放置于<head></head> 标签之间,可以确保在需要使用脚本之前,它已经被载入了:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> /* ...... * * Javascript 代码 * * ...... * */ </script> </head> <body> </body> </html>放置于<body></body>之间也有部分情况将 JavaScript 代码放置于 <body></body> 之间的。设想如下一种情况:我们有一段 JavaScript 代码需要操作 HTML 元素。但由于 HTML 文档是由浏览器从上到下依次载入的,为避免 JavaScript 代码操作 HTML 元素时,HTML 元素还未载入而报错(对象不存在),因此需要将这段代码写到 HTML 元素后面,例子如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> <div id="div1"></div> <script type="text/javascript"> document.getElementById("div1").innerHTML="测试文字"; </script> </html>但通常情况下,我们操作页面元素一般都是通过事件来驱动的,所以上面这种情况并不多见。另外我们不建议将 JavaScript 代码写到 <html></html> 之外。提示如果 HTML 文档声明为 XHTML ,<script></script> 标签必须在 CDATA 部分内声明,否则 XHTML 将把 <script></script> 标签解析为另一个 XML 标签,里面的 JavaScript 代码可能不会正常执行。因此,在严格的 XHTML 中使用 JavaScript 应该像如下示例一样声明:<head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> < ![CDATA[ JavaScript 代码 ]] > </script> </head>以上两种将 JavaScript 代码写到 HTML 文档中的方式,都是 HTML 文档内部引用 JavaScript 代码的方式。除了内部引用,还可以使用外部引用方式。外部引用 JavaScript 代码将 JavaScript 代码(不包括标签)单独形成一个文档,并以 js 后缀命名,如 myscript.js ,并在 HTML 文档 标签中使用 src 属性来引用该文件:<head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="myscript.js"></script> </head>在使用了外部引用 JavaScript 代码之后,其好处显而易见:1.避免在 JavaScript 代码里使用 2.避免使用难看的 CDATA3.公共的 JavaScript 代码可以被复用于其他 HTML 文档,也利于 JavaScript 代码的统一维护4.HTML 文档更小,利于搜索引擎收录5.可以压缩、加密单个 JavaScript 文件6.浏览器可以缓存 JavaScript 文件,减少宽带使用(当多个页面同时使用一个 JavaScript 文件的时候,通常只需下载一次)7.避免使用复杂的 HTML 实体,如可以直接使用 document.write(2>1) 而无需写作 document.write(2<1) 将 JavaScript 代码形成为外部文件,也会增加服务器的 HTTP 请求负担,在超高并发请求的环境下,这并不是一个好的策略。另外 在引用外部 js 文件时,需注意文件的正确路径。本文转载至 http://www.wufangbo.com/js-fang-na-li-hao/

Mr.K 浏览(224) 评论(0) 赞 (2)
阅读全文

CSS实现单行、多行文本溢出显示省略号(…)

CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden; text-overflow:ellipsis; white-space: nowrap;效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号,如下。实现方法:display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;效果如图:适用范围:因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;注:-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。实现方法:p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }效果如图:适用范围:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。注:将height设置为line-height的整数倍,防止超出的文字露出。给p::after添加渐变背景可避免文字只显示一半。由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

Mr.K 浏览(308) 评论(0) 赞 (27)
阅读全文

JS 获取网址参数 将网址参数(GET参数)转存成JSON对象 -- By Mr.K [ 原创 ]

JS 获取网址参数 将网址参数(GET参数)转存成JSON对象 -- By Mr.K [ 原创 ]

在web2.0时代里面我们一般大量的使用ajax, 这样就避免不了利用网址参数(GET参数)了下面分享一个我自己封装的将网址参数转存成JSON对象var getRequest = function(){ var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); var strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]); } } return theRequest; }; window.request = getRequest();该Javascript类是由Mr.K封装, 切勿用于商业用途有什么意见或建议请联系在下面留言,觉得没用的请绕道~!希望大家在这里能学到更多的东西,一起交流先进的前端技术E-mail:lnend@sina.cn QQ:908526866

Mr.K 浏览(294) 评论(0) 赞 (0)
阅读全文

JS / CSS 文件按需加载 -- By Mr.K [ 原创 ]

JS / CSS 文件按需加载 -- By Mr.K [ 原创 ]

很多情况下我们需要按需加载我们的静态资源文件(JS、CSS),比如我们在某一个页面使用某一个组件的时候,需要引入该组件的一些JS或CSS文件,因为动态页面我们是把头尾写在一个文件里面的,所以我们通常会把需要用到的组件框架 一次性引入到我们的网站当中, 这样我们在不需要用到这种组件的页面上还要白白的加载无用的组件JS或CSS文件,浪费资源不说,如果组件的文件比较大,还会影响网页打开的速度 这样就得不偿失了推荐: HTML 页面内部尽量避免直接写入JS代码块解决方案:1. 我们会在包含底部文件后面加上引用代码这样能解决我们浪费资源的问题但是: 我们遮掩做的后果是 要把处理该组件的 业务代码放在你引用文件的后面, 这样对于一个相对于庞大的项目来说并不是一个好的解决方法, 我们在管理我们的JS业务逻辑代码的时候会非常头疼 不推荐使用上图为一个使用Jquery上传组件的页面2. 编写一个按需加载的方法 这个是我通常做的方式我们可以通过这个方法来实现引入组件相关的JS或CSS文件好处是我们可以更好的来管理我们的代码好! 那么重点来了!下面分享我自己的 按需加载方法/** * 按需加载JS、CSS文件 * @param {String} url 加载文件的URL * @param {Function} callback 文件加载完成的回调函数 */ var loadFile = function(url, callback){ var elem, bl, type = 'link', isExecuted = false, isExecutedForIE = false; // 防止在ie9中,callback执行两次 if (!url) return false; var load = function(u, cFn){ /* 判断文件类型并检测引入文件是否已存在 */ if(u.indexOf('.js') != -1){ type = 'script'; var oScripts = document.getElementsByTagName('script'); for(var i=0;i<oScripts.length;i++){ if(oScripts[i].src.indexOf(u) != -1) return cFn(); } }else{ type = 'link'; var oLinks = document.getElementsByTagName('link'); for(var i=0;i<oLinks.length;i++){ if(oLinks[i].href.indexOf(u) != -1) return cFn(); } } /* 生成Dom */ elem = document.createElement(type); type == 'link' ? elem.rel = 'stylesheet' : null; if ( typeof cFn === 'function' ) { bl = true; } // for ie function changeFn(){ var status = elem.readyState; if (status == 'loaded' || status == 'complete') { if (bl && !isExecutedForIE) { cFn(); isExecutedForIE = true; } elem.onreadystatechange = null; } } if(browser == "IE"){ elem.onreadystatechange = changeFn; }else{ // for 非ie if (bl && !isExecuted) { elem.onload = cFn; isExecuted = true; } } if(type == 'link'){ elem.href = u; }else{ elem.src = u; } document.getElementsByTagName('head')[0].appendChild(elem); }; url = [].concat(url); if(url.length < 1) return callback && callback(); var uIndex = 0; for(var u=0;u<url.length;u++){ load(url[uIndex], function(){ uIndex ++; if(uIndex < url.length){ load(url[uIndex]); }else{ callback && callback(); } }); } };因为要兼容所以依赖于/** * 获取浏览器类型 */ var browser = (function(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { return "Opera" }; //判断是否Opera浏览器 if (userAgent.indexOf("Firefox") > -1) { return "Firefox"; } //判断是否Firefox浏览器 if (userAgent.indexOf("Chrome") > -1){ return "Chrome"; } if (userAgent.indexOf("Safari") > -1) { return "Safari"; } //判断是否Safari浏览器 if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; }; //判断是否IE浏览器 })();使用方法:loadFile('js/test.js', function(){ //ToDo ... }); loadFile(['js/test1.js', 'js/test2.js'], function(){ //ToDo ... });这样我们就可以更方便的管理我们的代码了该Javascript类是由Mr.K封装, 切勿用于商业用途有什么意见或建议请联系在下面留言,觉得没用的请绕道~!希望大家在这里能学到更多的东西,一起交流先进的前端技术E-mail:lnend@sina.cn QQ:908526866

Mr.K 浏览(426) 评论(0) 赞 (316)
阅读全文

2015年你必须学习的编程语言和前端框架

2015年你必须学习的编程语言和前端框架

2015年你必须学习的编程语言和前端框架各种前端开发库和前端框架在不断的更新,为了适应潮流的需要,你必须不断的学习新的东西。但是下面提到的编程语言和前端框架会在很长的时间内占据重要的位置,学习和掌握它们是值得的和必须的。从长远来看,它们是十分受欢迎的,被广大社区支持,并且提供很多的就业机会。 JAVASCRIPT如果你正在从事前端web的开发工作,那么不论你使用什么后台语言,前台开发中javascript使你必须掌握的语言。你可以在浏览器中、在服务器上、在移动app中、甚至是在可编程硬件上使用JS。ECMAScript 6将会使语言更强大、更易于编写。更好的方法是学习Bower 和 npm,以及使用 jshint和 jscs等工具来编写代码和检查错误。 ANGULARJSAngularJS 是谷歌的一个javascript框架。它能够很容易的建立各种强大的WEB应用程序。你会发现在各种前端工作的招聘中,都提到需要你掌握AngularJS。但是你先不要急着完全掌握它,有消息透露,在新的2.0版本中,AngularJS将作出重大的改进和调整。你可以参考guide angularjs examples。REACT React是一个新东西,它的理念是可重复使用的WEB组件。这个库是由Facebook开发的,因为是虚拟DOM,它的性能非常突出,它还能很容易的集成到其它项目中。它还有一个非常活跃的、可开发各种组件的社区的支持。在我们看来,React是很有潜力的,你应该在2015年掌握它。NODE.JS使用Node.js,你可以使用javascript开发网络服务器应用程序。它可以用于简单的网站后台框架如:Express, API endpoints, websocket服务,甚至是 torrent clients。NodeJS有一个活跃的社区支持其模块的编写。如果你是一个初学者,我们建议你从 NodeSchool 开始学习。NOSQL DATABASES不需要SQL数据库表的数据库在目前还未流行,但是我们相信它会在不久的将来成为热门。有两个值得我们考虑的选择: Mongodb和Redis。它们的起步比MySQL数据库更容易。但是不要简单的认为NoSQL数据库是一个简单的替代-在某些情况下,一个典型的关系型数据库将更使你的开发容易,即使这需要付出更多的工作量。LESS/SASS/STYLUSCSS有时是十分令人困扰的,大于1000行的CSS代码你要想修改它是非常困难的,为了解决这些问题,出现了 Less 、 Sass 和 Stylus 等带变量和宏、可编译的CSS预处理语言。它们将能帮你写出更好的CSS代码。你可以选择其中之一来学习。NEW FRAMEWORKSMeteor 是一种全新的WEB应用开发方式,它模糊了前端和后端之间的界限。它允许你编写实时(reall-time)应用程序,并且有一个专门的社区为其编写各种应用程序包。 Hood.ie 提供了一种全新的方法,它可以帮你处理后台程序,是你可以完全投入到前台的开发当中。NEW LANGUAGES对于程序语言爱好者来说, Golang 、 Rust 和 Elixir 无疑是他们的新大陆。这些语言被在特殊情况下使用,它们需要非常高的性能支持。你可以从现在开始学习一些关于它们的知识。A CLASSIC FULL STACK FRAMEWORK虽然单页应用日益普及,但是仍有很多的服务器端的Web应用程序的需求。 Ruby on Rails 、 Django 、Laravel 、 Play 、ASP.NET是当前最顶级的全栈式框架。但是任何MVC框架都需要你花费大量时间去研究它。THE OLD GUARD许多平台和语言仍然是当前流行的 - Java 、 .NET 、 Python 、 Ruby 。这些语言有大量社区的支持,它们各自都有优点和缺点。当你选择它们时,最主要是看它是否能完成你当前的工作需要。DON’T FORGET THESEPHP、 WordPress 和 jQuery 仍然是创建网站的一个有效方式。WordPress已经超越了一个博客平台的范畴,它现在是一个功能强大的CMS /框架开发一个广泛的Web应用程序。如果你是一个设计师,你应该考虑选择这些技术了。如果你觉得使用PHP作为你的后台程序,那么请了解正确使用php的方法。如果你已经准备好了,请参考一下Bootstrap-它能帮助你写出优秀的前端代码。

Mr.K 浏览(533) 评论(0) 赞 (62)
阅读全文

W3C启动Web支付标准工作,推进在线结算流程

W3C启动Web支付标准工作,推进在线结算流程

2015年10月21日,万维网联盟启动Web支付工作组,打造更简便更安全的在线支付体验。W3C 计划制定的标准将支持目前现存及即将问世的诸多支付方式,其中包括借记卡支付、信用卡支付、移动支付系统、代管账户支付、比特币支付以及其他分布式分账类 技术。相关支付API将支持浏览器辅助实现的支付工具注册及选择等功能,并为自动安全支付,特别是移动设备端的自动安全支付建立良好的基础,从而为广大商 家和用户带来更安全的交易平台以及更多的支付方式选择。W3C CEO Jaffe博士评论说,“行业将电子钱包视为一种可以改善支付安全和可用性,并多种营销手段的支付解决方案。然而,用户并没有完全接受这一方案。我们认为 其中的一个原因是电子钱包市场的分裂性,以及电子钱包提供商使用不兼容的编程接口造成的。W3C即将编写的标准将通过定义标准化的编程接口帮助确保不同支 付方案的互操作性。所以,当你购买商品的时候,你应该有一个标准的方法来使自己的支付工具和商家可接受的工具相匹配,并确保二者能够与商家的结账流程平滑整合。”W3C新启动的Web支付工作组章程(及常见问题解答)由W3C Web支付兴趣组完成,该兴趣组成员来自银行、支付服务提供商、商家、浏览器厂商、硬件厂商以及其他行业相关方。新的Web支付工作组将于2015年10月26日-30日在日本札幌举办的W3C全体技术大会期间举办第一次小组会议。更多关于W3C Web支付工作组的信息请见新闻通稿(英文版)(中文版)。

Mr.K 浏览(302) 评论(0) 赞 (7)
阅读全文

jQuery事件绑定的最佳实践

jQuery事件绑定的最佳实践

如果你经常使用jQuery,那么你也许很熟悉事件绑定。这是很基本的东西,但是深入一点,你就能够找到机会让你事件驱动的代码变得不太零碎,并且更容易管理。更好的选择器策略让我们从基础的例子开始。下面的HTML代码表示的是可以开合的导航菜单。<button class="nav-menu-toggle">Toggle Nav Menu</button> <nav> <ul> <li><a href="/">West Philadelphia</a></li> <li><a href="/cab">Cab Whistling</a></li> <li><a href="/throne">Throne Sitting</a></li> </ul> </nav>下面这个是点击按钮之后控制导航菜单开合的javascript代码$('.nav-menu-toggle').on('click',function(){ $('nav').toggle(); });这可能是最常用的实现方式。它能够使用,但是比较脆。javascript代码依赖了按钮的类名nav-menu-toggle。很可能在未来其他开发者或者健忘的你在重构代码的时候会删除或者重命名这个类名。问题的核心是我们同时在表现和交互中使用了CSS的类名。这违反了关注点分离的原则,让维护更容易出错。让我们用一个不同的方法来实现<button data-hook="nav-menu-toggle">Toggle Nav Menu</button> <nav data-hook="nav-menu"> <ul> <li><a href="/">West Philadelphia</a></li> <li><a href="/cab">Cab Whistling</a></li> <li><a href="/throne">Throne Sitting</a></li> </ul> </nav>这次我们使用这个data属性(data-hook)来选择元素。任何对CSS类的改变将不会影响到javascript,让我们能够实现关注点分离以及更加稳定的代码。下面我们用data-hook属性来选择对应的元素:$('[data-hook="nav-menu-toggle"]').on('click',function(){ $('[data-hook="nav-menu"]').toggle(); });需要注意的是,我也使用data-hook作为nav元素的选择器。你不一定需要,但是我喜欢这里面包含的思想:任何使用你看到data-hook,你会知道这个元素在javascript中引用到啦。一些语法糖我必须承认data-hook选择器并不是很漂亮。让我们通过扩展jQuery实现一个自定义的函数:$.extend({ hook:function(hookName){ var selector; if(!hookName || hookName === '*'){ // select all data-hooks selector='[data-hook]' }else{ // select specific data-hook selector='[data-hook*="'+hookName+'"]'; } return $(selector); } });上面准备完毕,我们来重写一下javascript。$.hook('nav-menu-toggle').on('',function(){ $.hook('nav-menu').toggle(); });更好的是,我们甚至可以把一系列以空格分开的hook名字放在一个元素上。<button data-hook="nav-menu-toggle video-pause click-track">Toggle Nav Menu</button>我们可以找到里面的任意个hook名字:$.hook('click-track'); // returns the button as expected我们也能够找到页面上所有的hook元素// both are equivalent $.hook(); $.hook('*');防止函数表达式到目前为止,我们在事件处理中使用的都是匿名函数。让我们重写一下,使用声明的函数来代替它。function toggleNavMenu(){ $.hook('nav-menu').toggle(); } $.hook('nav-menu-toggle').on('click',toggleNavMenu);这让事件绑定的代码更加易读。这个toggleNavMenu函数名表达了意图,是代码自我注释的好例子。我们同时也获得了可复用的能力,因为其他地方可能需要使用toggleNavMenu函数。最后,这对于自动化测试来说是意见大喜事,因为声明的函数的单元测试要比匿名函数单元测试容易的多。同时使用多个事件jQuery提供了一个简单方便的语法来处理多事件的问题。比如,你可以为一系列空格隔开的事件列表绑定同一个事件处理函数。$.hook('nav-menu-toggle').on('click keydown mouseenter',trackAction);如果你需要为不同的事件绑定不同的处理函数,你可以使用对象表达方式:$.hook('nav-menu-toggle').on({ 'click':trackClick, 'keydown':tranckKeyDown, 'mouseenter':trackMouseEnter });反过来,你可以同时取消多个事件的绑定:// unbinds keydown and mouseenter $.hook('nav-menu-toggle').off('keydown mouseenter'); // nuclear options:unbinds everything $.hook('nav-menu-toggle').off();你可以想象到的是,不小心的取消事件绑定可能会导致严重的我们不想要的副作用。继续看我们可以通过哪些技巧来减轻这个问题。小心的取消事件绑定一般情况下我们不会在一个元素的同一事件类型绑定多个事件处理函数。让我们再看一下之前的那个按钮:<button data-hook="nav-menu-toggle video-pause click-track">Toggle Nav Menu</button>不同的代码区域可能会在同一个元素的同一事件绑定不同的事件处理函数:// somewhere in the nav code $.hook('nav-menu-toggle').on('click',toggleNavMenu); // somewhere in the video playback code $.hook('video-pause').on('click',pauseCarltonDanceVideo); // somewhere in the analytics code $.hook('click-track').on('click',trackClick);尽管我们使用了不同的选择器,但是这个元素现在有三个事件处理函数啦。假如我们的分析代码不在关心这个按钮:// no good $.hook('click-track').off('click');糟糕的是,上面的代码实际上回删除所有的点击事件处理函数,不仅仅是trackClick。我们应该实用更加有辨别力的方式来指定我们需要删除的事件处理函数:$.hook('click-track').off('click',trackClick);另一种方式是使用命名空间。任何事件都有资格使用一个命名空间来实现绑定和取消绑定,这样你就可以更好的控制事件绑定和取消绑定。// binds a click event in the "analytics" namespace $.hook('click-track').on('click.analytics', trackClick); // unbinds only click events in the "analytics" namespace $.hook('click-track').off('click.analytics');你也可以使用多个命名空间:// binds a click event in both the "analytics" and "usability" namespaces $.hook('click-track').on('click.analytics.usability',trackClick); // unbinds any events in either the "analytics" OR "usability" namespaces $.hook('click-track').off('.usability .analytics'); // unbinds any events in both the "analytics" AND "usability" namespaces $.hook('click-track').off('.usability.analytics');需要注意的是,命名空间的顺序是没有关系的,因为命名空间不是层级式的。如果你有一个复杂的功能需要多个元素绑定多个事件,那么使用命名空间是一种简单的把他们组织起来然后快速清除的方式:// free all elements on the page of any "analytics" event handling $('*').off('.analytics');命名空间在写插件的时候尤其有用,因为这样你就能保证只会取消自己命名空间范围内的事件处理函数的绑定。原文:Effective Event Binding with jQuery

Mr.K 浏览(404) 评论(0) 赞 (85)
阅读全文

css负边距之详解

css负边距之详解

自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.)为其正名我们都使用过CSS得外边距,但是当谈到负边距的时候,我们好像往差的方向发展啦。在网页设计中负边距的使用出现了两种极端,一种特别喜欢它,也有一些人认为这完全就是魔鬼的作品。负边距的使用如下:#content {margin-left:-100px;}负边距通常在小范围使用。但是接下来你会看到,它能做的事情很多。下面是一些你应该知道的关于负边距的事情:他们是完全有效的CSS这不是在跟你开玩笑。W3C甚至都说,在外边框中使用负边距是允许的。要了解更多可以点击这篇文章负边距不是在hack这是尤其正确的。正是因为没有很好地了解负边距才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack它符合正常的文档流当负边距使用在没有浮动的元素上时并不会破坏正常的文档流。所以付过你使用负边距把元素向上微调的话,所有后面的元素也会向上微调。它是相当好的兼容性负边距基本上被所有现代的浏览器支持(IE6的大部分情况也是)当使用了float之后,会有不同的表现负边距不是你平常使用的属性,所以使用的时候要格外小心。Dreamweaver不理解它负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢?与其共事负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。在static元素中使用负边距一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用负边距之后的情况。当一个static元素在top/left使用负边距时,它把元素向这个特定的方向拉,比如/* Moves the element 10px upwards */ #mydiv1 {margin-top:-10px;}但是当你将负边距设置为相对bottom/right时,它并不会把元素向下或右拉,相反,它会把后面的元素往里面拉,从而覆盖自己。/* 所有在#mydiv1后面的元素都会向上 移动10px,而#mydiv1一点都不会移动 */ #mydiv1{margin-bottom:-10px;}如果宽度没有设置,左右负边距会把元素向两个方向拉以增加宽度。在这里margin的作用相当于padding在浮动中使用负边距加入下面就是我们的html代码:<div id="mydiv1">First</div> <div id="mydiv2">Second</div>如果对一个浮动的元素使用负边距,它会产生一个空白,其他元素就可以覆盖这一部分。这个技巧可以很好地用户流式布局。比如有一列宽度100%,另一列有固定的宽度,比如说100px。/* A negative margin is applied opposite the float */ #mydiv1 {float:left; margin-right:-100px;}如果两个元素都使用了左浮动并且设置margin-right:-20px。#mydiv2会把#mydiv1看成宽度缩小20px(所以会覆盖一部分),但是有趣的是#mydiv1并不会有任何变化,而是依然保持原先的宽度。如果负边距和宽度一样大的话,它就会被完全覆盖掉。因为外边距,内边距,边框和内容加起来等于元素的宽度。如果负外边距等于元素的宽度的话,那么该元素的宽度就会变成0px。学以致用既然我们知道使用负边距在CSS2中是有效的,使用它可以给我们提供一些非常有趣的CSS技巧。把单个列表变成三列如果你有一个列表垂直方向太长了,为什么不把它分成几列呢?负边距可以让你在不增加任何浮动和标签的情况下完成。你会发现用负边距实现这个是多么地简单,就像下面:HTML<ul> <li class="col1">Eggs</li> <li class="col1">Ham<li> <li class="col2 top">Bread<li> <li class="col2">Butter<li> <li class="col3 top">Flour<li> <li class="col3">Cream</li> </ul>CSSul {list-style:none;} li {line-height:1.3em;} .col2 {margin-left:100px;} .col3 {margin-left:200px;} .top {margin-top:-2.6em;} /* the clincher */通过对.top的添加margin-top:-2.6em。所有的元素会完美的对齐好。使用负边距会比使用相对定位好很多,因为你只需要给新的一列的第一个元素添加负边距即可。酷吧,哈哈哈重叠来强调故意重叠元素也是一种很好地设计隐喻。重叠效果可以增强深度感从而为突出特定元素。一个很好地例子就像上图一样,通过重叠来吸引注意力。只需要使用z-index属性和一点小创意你就可以做到。惊艳的3D文本效果这是一个精致的技巧。通过使用两个视图的两种颜色创建safari一样有点倾斜的效果。然后通过负边距来把其中一个叠加到另一个上面,保持1到2像素的偏移。这样你就可以二道可选的,机器友好的倾斜字体。就不需要浪费很多贷款来加载大的图片来实现这个效果啦简单的两列布局负边距也是在流式布局中创建简单一列宽度固定,一列内容为宽度的100%的两列布局的好方法。HTML<div id="content"> <p>Main content in here</p> </div> <div id="sidebar"> <p>I’m the Sidebar! </p> </div>CSS#content {width:100%; float:left; margin-right:-200px;} #sidebar {width:200px; float:left;}哈哈,这样你就得到了一个简单的两列布局。它也能在IE6完美的渲染出来。现在为了让#sidebar不要被#content给掩盖,只要简单的加上:/* Prevent text from being overlapped */ #content p {margin-right:210px;} /* It’s 200px + 10px, the 10px being an additional margin.*/当适当的使用的时候,负外边距能够提供一个灵活的文档结构,完爆table的布局。灵活的文档布局是一种可访问性和SEO的技巧,通过它能够让你根据你的关注点以任意顺序组织你的html代码。这里有一个文章讨论了负边距在多列布局中的应用。微调元素这是负外边距最常也是最简单的使用方式。假如你把第十个div插入到9个其他的div中,不知道什么原因没有正确的排列,使用负边距来调整这个div就不需要改变其他9个div了,很方便。解决bug文本和链接问题在float中使用负边距可能会在旧的浏览器造成一些问题,比如下面的这些:让链接不可点击文本变得很难选择失去焦点的时候按tab键失效解决方法:只要添加position:relative,就可以啦。图片被剪切啦如果你运气不好刚好在办公室使用IE6,当遇到覆盖和浮动的时候内容有些时候回突然被剪切掉。解决方法:同样的只要给浮动元素加上position:relative,所有的问题就解决啦。结论负外边距能够在不使用任何额外标签的情况下定位元素让它在现在网页设计中占有一席之地。随着更多的用户使用更新的浏览器(包括IE8),未来使用这些技巧的网站会变得更加有前景。原文 The Definitive Guide to Using Negative Margins

Mr.K 浏览(351) 评论(0) 赞 (20)
阅读全文

jQuery.lazyload 图片延迟加载(懒加载)详解

jQuery.lazyload 图片延迟加载(懒加载)详解

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图 片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这 与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载 可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 官方演示地址 (一)如何使用 Lazy Load?Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域: Html 代码 在你的执行代码中加入下面语句: Js 代码$("http://www.appelsiini.net/projects/lazyload/img").lazyload();这将使 id="http://www.appelsiini.net/projects/lazyload/img" 区域下的图片将 被延迟加载. (二) 占位图片 还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1x1 象素的图片已经包含在插件里面.Js 代码 $("img").lazyload({ placeholder : "img/grey.gif" }); (三) 事件触发加载 事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事 件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在 位置. 在灰色占位图片被点击之前阻止加载图片, 可以这样做: Js 代码 $("img").lazyload({ placeholder : "img/grey.gif", event : "click" });(四) 使用特效 当图片完全加载的时候, 插件默认地使用 >show() 方法来将图显示出来. 其实你可以 使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果. Js 代码$("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" }); (五)图片在容器里面 可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容 器定义为 jQuery 对象并作为参数传到初始化方法里面. 这是水平滚动演示页面和垂直滚动 CSS 代码: #container { height: 600px; overflow: scroll; }Js 代码: $("img").lazyload({ placeholder : "img/grey.gif", container: $("#container") });(六) 当图片不顺序排列 滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域 内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为. Js 代码: $("img").lazyload({ failurelimit : 10 });将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如 果有一个猥琐的布局, 请把这个参数设高一点. (七)延迟加载图片 Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的 代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行 加载. 这是延迟加载演示页面. Js 代码: $(function() { $("img:below-the-fold").lazyload({ placeholder : "img/grey.gif", event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000); });

Mr.K 浏览(597) 评论(0) 赞 (32)
阅读全文

前端开发工程师是Web前端开发工程师的简称,是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程,主要包括三个要素:HTML(标准通用标记语言下的一个应用)、级联样式表和JavaScript,这就要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。 前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间是从2005年开始的,是指Web前端开发工程师的简称。

Web前端开发是从美工演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,Web 1.0时代,网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

前端开发技术 必须掌握基本的Web前端开发技术,其中包括:CSSHTMLDOMjavascriptAjax等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。

Mr.K

奋斗在技术之路的程序猿,喜欢JS,
热爱前端开发

免责说明

本站内容仅供观摩学习交流之用,将不对任何资源负法律责任。如有侵犯到您的权利,请联系本站,本站将尽快处理。