Jquery 插件 实例

本文介绍了一个简单的jQuery插件开发实例,该插件用于获取指定ID的新闻内容,并将其显示在一个指定的HTML元素中。通过闭包实现插件方法,支持配置参数如新闻ID等。

先说明下应用场景,通过可配项的配置和默认项覆盖,获取指定的需求数据,填充到指定的位置(两个指定其实都是可配的)

(function($) {
    $.fn.extend({
        getOneNews: function(opt) {  //获取单条新闻信息
            
            var defaults = {
                newsId: "",
            };
            var options = $.extend(defaults, opt);
            var _this = this;
            _this.html("<p style='text-align:center'>信息获取中,请稍后...</p>")

                  $.ajax({
                      dataType:"jsonp",
                      jsonp: "callback",
                      url:"xxxx/news/GetNewsById?newsid="+options.newsId,
                      success:function(res){
                          _this.html(res.obj.news_content)

                      },
                      error: function(){
                          _this.html("<p style='text-align:center'>数据异常,请稍后再试!</p>")
                      }
                  });
        }
        
    })
})(jQuery)

采用闭包的方式,执行插件方法;

调取方式:

$(指定容器).getOneNews({

  newsId: 配置参数

})

就这么简单!如果有多个插件,直接通过对象的方式写,使用方式一样同上。

 

转载于:https://www.cnblogs.com/cench/p/5633923.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值