一些关于jquery ui 的 跟插件开发

/*
 * @author wangshiping461
 * @date 2015-10-13
 * 【滚动公告类型插件】
 * @param：Object
 * noticeGroup:[{
  *               notice_content:"http://www.baidu.com",
  *                 notice_name:"测试1",
  *                 message:"公告测试一",
  *                 type:"2",    1为滚动，2为直接弹出
  *                 openType:"1"  1为弹出框弹出，二为在新tab页打开链接
  *             }]
 * **************用法介绍开始********************
 *require("component/noticeBar");
 * 引用组件的ItemView里面相关使用：
 * this.$("#noticeBar").pager({
    noticeGroup:[{
  *               notice_content:"http://www.baidu.com",
  *                 notice_name:"测试1",
  *                 message:"公告测试一",
  *                 type:"2",    1为滚动，2为直接弹出
  *                 openType:"1"  当点击滚动链接时，1为弹出框弹出，二为在新tab页打开链接
  *             }]
 });
 * ***************用法介绍结束*********************
 */



(function($){
    var NoticeBar=function(element,options){
        this.$el=element;
        this.defaults={
            noticeGroup:[
            ]
        };
        this.settings=$.extend({},this.defaults,options);
        this.create();
        this.bindEvents();
    }
    NoticeBar.prototype={
        create:function(){
            var noticetemp="";
                if(!!this.settings.noticeGroup){
                    var notice_content="",noticeTarget,noticeLength=this.settings.noticeGroup.length;
                    for(var i=0;i<noticeLength;i++){
                        noticeTarget=this.settings.noticeGroup[i];
                        if(noticeTarget.type=="2"){
                            this.openWithDialog(noticeTarget.notice_content,noticeTarget.notice_name);
                            noticeTarget.callback&&noticeTarget.callback.apply(this);
                            continue;
                        }
                        notice_content+=‘<a class="info c3" hrefs="‘+noticeTarget.notice_content+‘" title="‘+ noticeTarget.notice_name+‘" openType="‘+noticeTarget.openType+‘">‘+noticeTarget.message+‘</a>‘;
                    }
                }
                if(notice_content){
                    noticetemp +=‘<div class="tips-div" id="tips-div">‘
                    +  ‘<span class="tips-icon" style="vertical-align:baseline;"></span>‘
                    +  ‘<marquee style="width:856px;" scrollamount=3 id="noticeContent" onmouseover="this.stop();" onmouseout="this.start();">‘
                    +notice_content
                    +‘</marquee>‘
                    +  ‘<span class="tips-close"></span>‘
                    +‘</div>‘;
                    this.$el.html(noticetemp);
                }
        },
        bindEvents:function(){
            var self=this;
            this.$el.find(".info").each(function(index,item){
                $(item).unbind("click");
                $(item).bind("click",this,function(e){
                    var target=$(e.currentTarget);
                    var href=target.attr("hrefs");
                    var title=target.attr("title");
                    var openType=target.attr("openType");
                    if(openType==1){
                        self.openWithDialog(href,title);
                    }else{
                        window.open(href);
                    }
                })
            });
            this.$el.find(".tips-close").bind("click",this,function(e){
                var self=e.data;
                self.$el.remove();
            });
        },
        test:function(){
            alert("test");
        },
        openWithDialog:function(url,title){
            var html=‘‘;
            html+=‘<div id="dialog-window">‘;
            html+=‘<div id="dialog_iframe_loadText">loading...</div>‘;
            html+=‘<iframe frameBorder="0" scrolling="auto" width="100%" height="100%" id="dialog_iframe"></iframe>‘;
            html+=‘</div>‘;
            var element = $(html), iframe;
            iframe = element.find("iframe").on("load", _.bind(this._onLoad, this));
            iframe.attr("src", url);
            element.dialog($.extend({ 
                modal: true, 
                closeOnEscape: false, 
                draggable: false, 
                resizable: false, 
                width: 650,
                height: 450,
                title:title,
                close: function(event, ui) { 
                $(this).dialog("destroy"); // 关闭时销毁 
                },
                helpers: { overlay: { closeClick:false }} 
            })); 
        },
        _onLoad:function(){
            var iframe=$("#dialog_iframe");
            if(iframe.attr("src")){
                $("#dialog_iframe_loadText").remove();
            }
        }
    }
    $.fn.noticebar=function(options){
        var argument=arguments;
        var args=$.makeArray(argument).slice(1);
        var element=$(this);
        var noticebardata=element.data("noticebar");
        if(!noticebardata){
            var noticebar=new NoticeBar(element,options);
            element.data("noticebar",noticebar);
        }else{
            var method=typeof options==="string"?options:null;
            if(method&& typeof noticebardata[method]==="function"){
                noticebardata[method].apply(this,args);
            }
        }
    }

})(jQuery)