/* * @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&¬iceTarget.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" οnmοuseοver="this.stop();" οnmοuseοut="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)
define(function (require, exports, module) {
var Dialog = module.exports = Layout.extend({
template: '<div class=region-dialog-content></div>',
regions: { contentRegion: ".region-dialog-content" },
constructor: 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.on("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>' +
'<td class="toast_lt toast_bg"></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" class="toastBoxInner" style="position:absolute;left:0;top:0;z-index:1049"></iframe>' +
'</div>' +
'</td>' +
'</tr>' +
'</table>' +
'</div>';
return html;
}
});
Dialog.defaultAppearance = {
modal: true,
draggable: false,
resizable: false,
closeBtn: false,
autoSize: false,
closeClick: false,
closeText: "关闭",
padding: 0,
width: 650,
height: 450,
helpers: { overlay: { closeClick:false } }
};
});