jquery简单插件制作(fn.extend)完整实例


Posted in Javascript onMay 24, 2016

本文实例讲述了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" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <script type="text/javascript" src="jquery.js"></script>
  <title>jquery简单的插件制作</title>
  <script type="text/javascript">
  (function ( $ ) {
    $.fn.greenify = function ( options) {
      var settings = $.extend({
       color:"#556b2f",
       backgroundColor:'#000',
       padding:'20px'
      }, options );
      return this.css( {
        color:settings.color,
        backgroundColor : settings.backgroundColor,
        padding : settings.padding
      });
    };
  }( jQuery ));
  $(document).ready(function(){
    $("div").greenify({
      color:"#000",
      backgroundColor:'#ccc',
      padding:'50px'
    })
  });
  </script>
</head>
<body>
<div id="accordion">
jquery简单的插件制作
</div>
</body>
</html>

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

Javascript 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 #Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 #Javascript
jQuery中事件与动画的总结分享
May 24 #Javascript
jQuery根据表单name获取值的方法
May 24 #Javascript
深入理解jquery自定义动画animate()
May 24 #Javascript
深入理解jquery中的事件与动画
May 24 #Javascript
Jquery元素追加和删除的实现方法
May 24 #Javascript
You might like
领悟php接口中interface存在的意义
2013/06/27 PHP
php curl 上传文件代码实例
2015/04/27 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
jQuery live
2009/05/15 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
django+mysql的使用示例
2018/11/23 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
在keras中实现查看其训练loss值
2020/06/16 Python
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
《十六年前的回忆》教学反思
2014/02/14 职场文书
干部个人对照检查材料
2014/08/25 职场文书
重阳节简报
2015/07/20 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js