站长资源
中国站长网站

jQuery插件怎么写?教大家写一个简单的jquery插件

1.写一个闭包:

<script type="text/javascript">
(function ($) {
 //这里放入插件代码
})(jQuery);
</script> 

2.在闭包中给插件加入主体:

<script type="text/javascript">
(function ($) {
 $.fn.Name = function(options) { //定义插件的名称,这里为Name
 var defaults = {
 //以下插件的属性及其默认值
 url: "http://www.wangdahai.cn", //链接
 size: "12px", //文字大小
 align: "left" //文字位置,left || center || right
 };
 var ops = $.extend(defalut,options);
 var style = 'style="font-size:' + ops.size + ';text-align:' + ops.align + ';"'; //调用默认的样式
 var txt = '<p' + ' ' + style + '>该名称的链接<a target="_blank" href="'%20+%20ops.url%20+%20'"></a>所有</p>';
 $(this).append(txt); //将文字添加到div
 }
})(jQuery);
</script>

那么,一个简单的插件已经写好了,接下来我们来看看调用的方式。

如果想要调用插件的div的class=”con,那么在div上加上js代码:

<script type="text/javascript">
 $(".con").Name();
<script">

如果不想使用插件的默认值,那就给这个插件传几个参数:

<script type="text/javascript">
 $(".con").Name({
 size: "16px",
 align: "right"
 });
<script">

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » jQuery插件怎么写?教大家写一个简单的jquery插件

评论 1

评论前必须登录!

 


    Warning: A non-numeric value encountered in /www/wwwroot/www.wangdahai.cn/wp-content/themes/dux/modules/mo_comments_list.php on line 63
  1. #-9

    稳重%20是空格,这编辑器也不知道啥么问题,转义时好时坏

    全栈工程师5年前 (2018-12-21)