【连载】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开发漂亮的前端界面之插件开发的更多相关文章
- 【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单
连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体 ...
- 教你用Bootstrap开发漂亮的前端界面
Bootstrap介绍: Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. Bootstrap的特点: 一.预处理脚本:虽然可以直 ...
- Bootstrap开发漂亮的前端界面之实现原理
引:Bootstrap采用的是一个“响应式”设计.响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法.例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手 ...
- 推荐一款基于bootstrap的漂亮的前端模板—inspinia_admin
首先给出Demo网址:http://cn.inspinia.cn inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计.使用Bootstrap 3+ Fra ...
- 基于bootstrap的漂亮网站后台管理界面框架汇总
基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...
- 循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...
- 从前端界面开发谈微信小程序体验
本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...
- 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
- 循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
用户在系统登录后,一般会提供一个入口给当前用户更改当前的密码,其实更改密码操作是很简单的一个处理,不过本篇随笔主要是介绍结合前后端来实现这个操作,后端是基于ABP框架的,需要对密码的安全性进行一个设置 ...
随机推荐
- IOS开发之——画图(CGContext)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zhenyu5211314/article/details/24230581 0 CGContext ...
- Python的免费在线学习课程
网上资源不是本人的,所以,只是转发.其它的不负责 http://www.imooc.com/learn/177
- bpexpdate – 更改映像目录库中备份的截止日期以及介质目录库中介质的截止日期nbu
1.根据bpdbjobs查找backupidbpdbjobs -jobid xxx -all_columns|grep backupid 2.查看数据保留时间[root@backup]# bpimag ...
- 2018中国大学生程序设计竞赛 - 网络选拔赛 1010 YJJ's Salesman 【离散化+树状数组维护区间最大值】
题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6447 YJJ's Salesman Time Limit: 4000/2000 MS (Java/O ...
- 【洛谷P2574】XOR的艺术
XOR的艺术 题目链接 用线段树维护sum, 修改时 tag[p]^=1; sum=r-l+1-sum; 详见代码 #include<iostream> #include<cstdi ...
- SpringBoot非官方教程 | 第二篇:Spring Boot配置文件详解
转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot2-config-file/ 本文出自方志朋的博客 ...
- AndroidMVP
Mvp模式简介 衍生于MVC 模式,降低了耦合性,避免了View(Activity/Fragment)承担了所有的责任, 分担了UI层的职责. 在MVP模式里通常包含4个要素: * View:负责绘制 ...
- Python 学习笔记(四)数字(二)
Python Python2 中除法的问题 >>> 3 / 6 0 >>> 3.0 / 6 0.5 >>> 3.0 / 6.0 0.5 >& ...
- IOS NSNotification 通知
一. 先看下官方对NSNotification通知的解释 1. NSNotification 通知 @interface NSNotification : NSObject <NSCopying ...
- zepto 基础知识(5)
81.width width() 类型:number width(value) 类型:self width(function(index,oldWidth){....}) 类型:self 获取对象集合 ...