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 相关文章推荐
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
jQuery实现高级检索功能
May 28 jQuery
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
Vue中props的详解
2019/05/16 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
谈谈python中GUI的选择
2018/03/01 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Django框架视图函数设计示例
2019/07/29 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
健康家庭事迹材料
2014/05/02 职场文书
担保书范文
2015/01/20 职场文书
介绍长城的导游词
2015/01/30 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers