主页 / 网络编程 /

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

网络编程 2021-07-04 19:59www.168986.cn编程入门
这篇文章主要介绍了jquery简单插件制作(fn.extend)方法,结合完整实例形式分析了jQuery fn.extend扩展插件的实现技巧,需要的朋友可以参考下

本文实例讲述了jquery简单插件制作方法。分享给大家供大家参考，具体如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./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:'#c',
      padding:'50px'
    })
  });
  </script>
</head>
<body>
<div id="aordion">
jquery简单的插件制作
</div>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》、《》及《》

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

上一篇：基于JavaScript实现回到页面顶部动画代码 下一篇：jQuery获取及设置表单input各种类型值的方法小结

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by