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 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
Vue如何获取数据列表展示
Dec 11 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
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
简单讲解Python中的闭包
2015/08/11 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python实现年会抽奖程序
2019/01/22 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
如何清空python的变量
2020/07/05 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
服务行业个人求职的自我评价
2013/12/12 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
防震减灾主题班会
2015/08/14 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
人力资源部工作计划
2019/05/14 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android