基于 backbone的弹窗插件

define(['backbone', 'jquery', 'text!creditCardTpl/page.html'], function (bacobone, jquery, dialog_tpl) {
    var dialogView;
    dialogView = Backbone.View.extend({
        events: {
            "touchstart  #dialog_ok": "okcallback",
            "touchstart  #dialog_cancel": "cancelcallback"
        },

        okcallback: function () {
          this.closeDialog()
        },
        cancelcallback: function () {
          this.closeDialog()
        },
        closeDialog:function(){
            if(this.timeCount){
                window.clearTimeout(this.timeCount)
            }
           /* this.$el.css("display","none")*/
            this.$el.detach()     /*不能用remove,,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除*/
        },
        initialize: function () {

        },
        ul_tpl:$(dialog_tpl).filter("#dn_ul").html(),
        tpl: $(dialog_tpl).filter("#dialog_one").html(),
        dialog:function(cssParm){

            var Css={contentTpl:this.ul_tpl}
          /*  var Css={width:"",height:"",left:"",top:"",title:"",contentTpl:"",timeClose:""}*/
            _.extend(Css,cssParm)
           this.render(Css)
        },
        render: function (parm) {
            this.$el.html(this.tpl)
            this.$(".dialog_title").html(parm.title)
            this.$(".dialog_content").html(parm.contentTpl)
            if (parm.width &&parm.width != "") {
                this.$(".dialog_box").css("width", parm.width)
            }
            if(parm.shadow==false) {
               this.$(".dialog_shadow").css("display","none")
            }
            $("html body").append(this.$el)
            if(!parm.left||parm.left==""){
                parm.left=( window.screen.width-this.$(".dialog_box ").width())/2
        /*        this.$(".dialog_box").css("left",left)*/
            }
            if(!parm.top||parm.top==""){
                parm.top=( window.screen.height-this.$(".dialog_box ").height())/2 -200
                /*        this.$(".dialog_box").css("left",left)*/
            }
            this.$(".dialog_box").css({"left":  parm.left, "top": parm.top})
            if(parm.timeClose){

              this.timeCount=window.setTimeout(function(){
                    this.closeDialog()
                }.bind(this),parm.timeClose)
            }
        }

    });

    return dialogView;


});

  

posted @ 2014-01-06 02:54  break_happy  Views(1301)  Comments(0)    收藏  举报