相关文章:

1.《教你用Bootstrap开发漂亮的前端界面》

2.《Bootstrap开发漂亮的前端界面之实现原理》

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();
});

【连载】Bootstrap开发漂亮的前端界面之插件开发的更多相关文章

  1. 【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单

    连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体 ...

  2. 教你用Bootstrap开发漂亮的前端界面

    Bootstrap介绍: Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. Bootstrap的特点: 一.预处理脚本:虽然可以直 ...

  3. Bootstrap开发漂亮的前端界面之实现原理

    引:Bootstrap采用的是一个“响应式”设计.响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法.例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手 ...

  4. 推荐一款基于bootstrap的漂亮的前端模板—inspinia_admin

    首先给出Demo网址:http://cn.inspinia.cn inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计.使用Bootstrap 3+ Fra ...

  5. 基于bootstrap的漂亮网站后台管理界面框架汇总

    基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...

  6. 循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面

    在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...

  7. 从前端界面开发谈微信小程序体验

    本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...

  8. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  9. 循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

    用户在系统登录后,一般会提供一个入口给当前用户更改当前的密码,其实更改密码操作是很简单的一个处理,不过本篇随笔主要是介绍结合前后端来实现这个操作,后端是基于ABP框架的,需要对密码的安全性进行一个设置 ...

随机推荐

  1. 八、IntelliJ IDEA 缓存和索引的介绍及清理方法

    这样一句话“ 对于首次创建或打开的新项目,IntelliJ IDEA 都会创建项目索引,大型项目在创建索引的过程中可能会出现卡顿的现象,因此强烈建议在 IntelliJ IDEA 创建索引的过程中不要 ...

  2. 【洛谷P1039】侦探推理

    侦探推理 题目链接 这是一道恶心至极的模拟题 我们可以枚举罪犯是谁,今天是星期几,从而判断每个人说的话是真是假 若每个人说的话的真假一致,且说谎话的人数<=k且说真话的人数<=m-k,就是 ...

  3. 【luogu P1536 村村通】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1536 并查集的运用,可以用生成树的思想,就是n个点生成一棵树需要n-1条边.这样我们先把已有的路连接到一个并 ...

  4. sql server 自增长显式添加值

    如果想在自增列添加数据,会提示我们不能插入显式值 解决:

  5. 外部的 JavaScript

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. mysql 复制A表 到B表;insert into select * from table

    情况一: INSERT INTO tb1 (a,b,c) select a1,b1,c1, from tb2 where .... --  案例 百度云 INSERT INTO l_biz_car_o ...

  7. 你不知道的javaScript笔记(7)

    异步:现在与将来 分块的程序 可以把JavaScript 程序写在单独的js 文件中,这个程序是由多个块组成的,这些块 中只有一个是现在执行,其余在捡来执行,最常见的块单位是函数. 例如: funct ...

  8. Angularjs基础(五)

    AngularJS Select(选项框) AngularJS 可是使用数组或对象创建一个下拉列表选项.使用ng-options创建选项框 在AngularJS 中我们可以使用ng-option指令来 ...

  9. [POI2008]MAF-Mafia(图论,贪心)

    题目描述 Mob feud rages in Equatorial Byteotia. The mob bosses have come to the country's capital, Byteb ...

  10. JDBC编程:使用 Statement 修改数据库

    获取数据连接后,即可对数据库中的数据进行修改和查看.使用 Statement 接口可以对数据库中的数据进行修改,下面是程序演示. /** * 获取数据库连接,并使用SQL语句,向数据库中插入记录 */ ...