简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:1065 次  日期:2016-06-23 16:40:27

温馨提示:易贤网小编为您整理了“jquery简单插件制作(fn.extend)完整实例”,方便广大网友查阅!

这篇文章主要介绍了jquery简单插件制作(fn.extend)方法,结合完整实例形式分析了jQuery fn.extend扩展插件的实现技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:深入理解jquery自定义动画animate()
下一篇:Jquery元素追加和删除的实现方法
易贤网手机网站地址:jquery简单插件制作(fn.extend)完整实例
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!