相关文章:
3.《Bootstrap开发漂亮的前端界面之自定义右键菜单》
什么是jQuery插件?
首先,来看看我们一般是如何使用jQuery,第一种方式:$.trim(" hello world "),直接使用jQuery中方法,第二种方式:$("#myinput").val(),获取页面中的元素,然后使用jQuery对象中方法。两种的区 别在于,第一种方式调用方法一般不涉及DOM,而第二种方式需要先获取页面中元素,然后再进行方法调用,方法的执行围绕着DOM元素。trim、val方 法都是jQuery原生提供的,其实我们也可以编写自己的方法,而我们自己写的方法一般被称为jQuery的插件。
现在我们先编写两个入门的插件:
需求一:获取字符串路径的中文件名;需求不涉及到任何的DOM,所以我们可以采用方式一模式来编写我们的插件。
$本来一个函数,在javascript中一切皆对象,所以$也是一个对象,那么向jquery对象中添加新的方法也是可以行的。
<script type="text/javascript"> //jQuery对象添加自定义方法 $.getFileName=function(path){ if(!path){ return; } //使用正则表达式获取路径中的文件名部分 return /(?!.*\/).*/.exec(path+"")[0]; } //调用自定义插件 var fileName = $.getFileName("f:/abc/源代码教育绝密资料.txt"); console.debug(fileName); </script>
第一个简单插件就应经完成了,当然如果你的需求很复杂,你的代码可能会更多。
需求二:获取页面中元素的元素的名字;需求中需要先有DOM元素,然后才能获取DOM元素的名字。
首先通过$(选择器)获取页面中元素对象,其实$(选择器)函数的返回值返回的就是一个jQuery实例对象,JS中每个对象都有自己的原 型对象,jQuery实例对象的原型对象为jQuery.prototype或者$.fn,如果不知道”原型对象“是什么的童鞋自己百度一下,这个JS高 手必备的知识。(你可以尝试执行: $.fn={};然后再去调用jquery对象的方法,你会发现都无法使用了)
//jQuery 实例对象的原型对象添加自定义方法 $.fn.tagName=function(){ return this[0].nodeName; }; $(function(){ //调用自定义插件 console.debug($("#mydiv").tagName()); });
第二个插件的功能主要涉及到了DOM元素的访问;
右键菜单插件开发,本插件是以《Bootstrap开发漂亮前端界面之自定义右键菜单》为基础,所以右键菜单的细节,不会在本文中描述。
仔细比对插件代码与非插件代码细微的差别,其实就是把以前写死的东西使用this进行替换;
$(function(){ //调用代码 $("#contextMenu").contextmenu(); });
相关推荐
【Java技术】教你用Bootstrap开发漂亮的前端界面
基于Bootstrap的前端界面含主页,注册,新闻详情页,全是静态页面,需要自各拿走。模仿大公新闻网做的前端界面。
Bootstrap写的前端页面
Bootstrap+H5+各种前端插件实例教程 列表 按钮 进度条 图片
bootstrap的toast消息框插件,弹出特效,前端用例,bootstrap 插件
bootstrap后台管理前端模板,自适应,界面美观,可复用强
《疯狂前端开发讲义 jQuery+AngularJS+Bootstrap前端开发实战》源码
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
bootstrap自适应版旅游前端网页bootstrap自适应版旅游前端网页bootstrap自适应版旅游前端网页bootstrap自适应版旅游前端网页
bootstrap 前端开发利器 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
Bootstrap开发精解 原理 技术 工具及最佳实践 随书代码
Bootstrap开发框架本文档主要介绍《基于 Metronic 的 Bootstrap 开发框架》 的基础上,通过分析各个模块相关的代码、各种常见组件的使用、特殊应用场景的处理, 熟悉掌握框架里面相关代码和组件的使用,以便能够更...
Bootstrap是目前最为流行的前端开发框架,由Twitter的两位工程师设计推出。学习本套课程,可以快速的建立HTML5的响应式前端页面。 适用人群 对前端框架感性兴趣、已经学完HTML5第一季视频教程的同学 课程简介 ...
非常漂亮的bootstrap写的后台框架! 及各种bootstrap里常用的插件!
前端技术的发展, Bootstrap Bootstrap 响应式 响应式 技术 框架 也随之 出现 ,这种 响应式 响应式 的技术 框架 ,除了 能够 很好 适应 各种 设备 展示 外,还提供 了很多 CSS 的酷炫 样式 ,在很多 大企业 以 及...
bootstrap 前端模板
疯狂前端开发讲义 jQuery AngularJS Bootstrap前端开发实战
一套好用的bootstrap 界面框架,基于Bootstrap3.3.6最新版本开发的扁平化主题,采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,提供了诸多的强大的可以重新组合的UI组件
用bootstrap做的前端页面框架,适合用作门户、网购、官网、博客等网站
前端开发是创建Web页面或app等前端界面的过程。 前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。 熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript...