jquery插件格式实例分析


Posted in Javascript onJune 16, 2016

本文实例讲述了jquery插件格式。分享给大家供大家参考,具体如下:

现在打算给公司写一个公共组件,常用的工具很多都是jquery,很多时候一些插件特效也是基于jquery写的,因此工作中难免会遇到要拓展别人写的插件。

下面我简单的描述一下插件的格式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//模拟一个小的插件,方便大家学习
(function($){
  $.fn.huangbiao=function(userSetting){
  //利用jquery的extend方法来拓展插件的配置参数,这个应该暴露给使用用户
    settings = jQuery.extend($.fn.huangbiao.defaultSetting,userSetting);
    function init(){
      alert("在我这里进行初始化");
      myFunction(this);
    }
    function myFunction(obj){
      alert("我是开发者自己封装的函数");
      showSetting();
      privateFunc();
    }
    function showSetting(){
      alert(this.settings.name);
    }
    this.unbind('click').click(init);
    return this;
  }
  //下面这个是闭包的私有函数
  function privateFunc(){
    alert("i am private function!");
  }
  //暴露给用户使用的函数
  $.fn.huangbiao.openFunc=function(obj){
    alert("test");
  }
  /*
    定义暴露给用户的默认值
    这个一定要放在$.fn.huangbiao对象后面,否则脚本会报错的
  */
  $.fn.huangbiao.defaultSetting={
    name:"huangbiao",
    sex:"boy",
    age:24
  };
})($);
function useUndefault(){
  //使用自己配置的参数
  $("#undefault").huangbiao({name:"liumei",sex:"girl",age:24});
}
function useUndefault2(){
alert($.fn.huangbiao.defaultSetting.name);
  $.fn.huangbiao.defaultSetting.name="hanmeimei";
  alert($.fn.huangbiao.defaultSetting.name);
  //使用自己配置的参数
  $("#undefault2").huangbiao();
}
function useDefault(){
  //使用默认的配置参数
  $("#default").huangbiao();
}
function openFunction(){
  $("#default").huangbiao.openFunc();
}
</script>
<title>无标题文档</title>
</head>
<body>
<input type="button" value="useUndefault" id="undefault" onclick="useUndefault();"><br>
<input type="button" value="useUndefault2" id="undefault2" onclick="useUndefault2();"><br>
<input type="button" value="useDefault" id="default" onclick="useDefault();"><br>
<input type="button" value="使用提供给用户的函数" id="openFuncId" onclick="openFunction();"><br>
</body>
</html>

另外,这里再提供一个关于jquery的文档,相信对于大家学习jQuery插件有一定帮助作用!

本站下载: jQuery插件开发.pdf 。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
js与applet相互调用的方法
Jun 22 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
JS数组的常用方法整理
Mar 31 Javascript
详解JavaScript对象类型
Jun 16 #Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 #Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 #Javascript
JSON字符串和对象相互转换实例分析
Jun 16 #Javascript
jQuery的层级查找方式分析
Jun 16 #Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 #Javascript
JS中sort函数排序用法实例分析
Jun 16 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
基于php 随机数的深入理解
2013/06/05 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
python线程池的实现实例
2013/11/18 Python
Python模拟百度登录实例详解
2016/01/20 Python
Python深度优先算法生成迷宫
2018/01/22 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
企业军训感言
2014/02/08 职场文书
工程质量月活动方案
2014/02/19 职场文书
施工安全协议书范本
2014/09/26 职场文书
创业计划书之美容店
2019/09/16 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
Golang bufio详细讲解
2022/04/21 Golang