Some plug-in development about the jquery UI

/** @author wangshiping461 * @date 2015-10-13 * "Rolling announcement type plugin" * @param: Object * noticegroup:[{* Notice_con                 Tent: "Http://www.baidu.com", * notice_name: "Test 1", * message: "Announcement test One", * Type: "2", 1 for scrolling, 2 for direct popup * OpenType: "1" 1 for popup, two for opening link in new tab page *}] * ************** usage Introduction Start * * * *require ("Component/noticebar"); * Refer to the component's Itemview inside related use: * this.$ ("#noticeBar"). Pager ({noticegroup:[{* notice_content: "Http://www.baidu. Com ", * notice_name:" Test 1 ", * message:" Announcement test One ", * Type:" 2 ", 1 for scrolling, 2 for direct bounce Out * OpenType: "1" When clicking on the scroll link, 1 pops up for pop-up box, two for opening link in new tab *}]}); * *************** Usage Introduction End **********************/(function($){    varNoticebar=function(element,options) { This. $el =element;  This. defaults={noticegroup:[]};  This. Settings=$.extend ({}, This. defaults,options);  This. Create ();  This. bindevents (); } Noticebar.prototype={create:function(){            varNoticetemp= ""; if(!! This. Settings.noticegroup) {                    varNotice_content= "", noticetarget,noticelength= This. Settings.noticeGroup.length;  for(vari=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:bas Eline; " ></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(){            varself= This;  This. $el. Find (". Info"). each (function(Index,item) {$ (item). Unbind ("Click"); $ (item). BIND ("Click", This,function(e) {vartarget=$ (e.currenttarget); varHref=target.attr ("HREFs"); varTitle=target.attr ("title"); varOpentype=target.attr ("OpenType"); if(opentype==1) {self.openwithdialog (href,title); }Else{window.open (HREF);            }                })            });  This. $el. Find (". Tips-close"). Bind ("click", This,function(e) {varself=E.data;            Self. $el. Remove ();        }); }, Test:function() {alert ("Test"); }, Openwithdialog:function(url,title) {varHtml= "; 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> '; varelement =$ (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");//destroy when closed}, Helpers: {overlay: {closeclick:false }}             })); }, _onload:function(){            variframe=$ ("#dialog_iframe"); if(Iframe.attr ("src")){                $("#dialog_iframe_loadText"). Remove (); } }} $.fn.noticebar=function(options) {varArgument=arguments; varArgs=$.makearray (argument). Slice (1); varelement=$ ( This); varNoticebardata=element.data ("Noticebar"); if(!noticebardata) {            varNoticebar=NewNoticebar (element,options); Element.data ("Noticebar", Noticebar); }Else{            varMethod=typeofoptions=== "string"? Options:NULL; if(method&&typeofnoticebardata[method]=== "function") {noticebardata[method].apply ( This, args); }}}) (JQuery)

Define (function (Require, exports, module) {var Dialog = Module.exports = Layout.extend ({Template: ' <div cl Ass=region-dialog-content></div> ', Regions: {contentregion: ". Region-dialog-content"}, Constructo            R:function (Options) {if (!options) options = {};            Dialog.__super__.constructor.apply (this, arguments);            This.appearance = _.defaults ({}, Options.appearance, This.appearance, dialog.defaultappearance);            this. $el. dialog ({autoopen:false});            this. $el. On ("click", ". Dialog-close-button", _.bind (This.remove, this));        this. $el in ("Dialogclose", _.bind (This.remove, this));            },//override Render:function () {dialog.__super__.render.apply (this, arguments);            this. $el. dialog ("option", this.appearance);            this. $el. dialog ("Open");            $ (". Ui-dialog-titlebar-close"). On ("Click", _.bind (This.closeevent,this)); App.storAge.set ("Activedialog", this);            },//override Remove:function () {if (this._isremoved) return;            This._isremoved = true;            this. $el. dialog ("Close");            this. $el. dialog ("Destroy");            This.triggermethod ("Remove");            Dialog.__super__.remove.apply (this, arguments);        App.storage.remove ("Activedialog");        }, Closeevent:function () {This.triggermethod ("Closecallback");        }, Setappearance:function (options) {this. $el. dialog ("option", _.extend (this.appearance, Options));            }, Toast:function (options) {var message = Options.message; var width = Options.width | |            ' 260 ';                        var self=this;            var $toastBox = $ (this._toasttemplate (message));                        $toastBox. Find ('. Toastboxinner '). Width (width);            var container = $ (". Ui-dialog:visible"). EQ (0); container = Container.length? ConTainer: $ ("body");            if (!container.find (' Div.toastbox '). Length) {container.append ($toastBox);                } $toastBox. FadeOut (3000,function () {self.remove ();            Options.callback&&options.callback ();            });  }, _toasttemplate:function (message) {var html = ' + ' <div class= ' toastbox ' > '                     + ' <table border= ' 0 "cellpadding=" 0 "cellspacing=" 0 "width=" 100% "height=" 100% "> ' + ' <tr> ' + ' <td align= ' center ' valign= ' middle ' > ' + ' < Div class= "Toastboxinner" > ' + ' <table class= "Toastboxinner" border= "0" cellpadding= "0 "cellspacing=" 0 "style=" position:absolute;left:0;top:0;z-index:1050 "> ' + ' <tr& gt; ' + ' <td class= "Toast_lt toast_bg" &Gt;</td> ' + ' <td class= "toast_rt toast_bg" ></td> ' +                                         ' </tr> ' + ' <tr> ' +  ' <td class= ' toast_lb toast_bg ' > ' + ' <div class= ' toast_cnt ' > '                                             + ' <p class= "F3" > ' + message + ' </p> ' +                                        ' </div> ' + ' </td> ' +                                ' <td class= ' toast_rb toast_bg ' ></td> ' + ' </tr> ' + ' </table> ' + ' <iframe frameborder= ' 0 "scrolling=" 0 "Clas s= "Toastboxinner" style= "position:absolute;left:0;top:0;z-index:1049" ></iframe> ' + ' &L           T;/div> ' +             ' </td> ' + ' </tr> ' + ' </table> ' + ' </div>                        ‘;        return HTML;    }    });         Dialog.defaultappearance = {modal:true, draggable:false, Resizable:false, Closebtn:false, Autosize:false, Closeclick:false, Closetext: "Close", padding:0, width:650, he ight:450, Helpers: {overlay: {closeclick:false}}};});

　　

Some plug-in development about the jquery UI