从alertify.dialog实现中引用外部html文件

时间:2015-12-06 23:19:53

标签: javascript alertify alertifyjs

我们可以在alertify.dialog()实现中引用外部HTML文件吗?目前我正在使用下面的代码,它使用html代码构建我的对话框。

alertify.myAlert || alertify.dialog('myAlert',function factory(){
            return {
                main:function(content){
                    this.setContent(content); 
                },
                setup:function(){
                    return {
                        options:{
                            modal:false,
                            basic:true,
                            maximizable:false,
                            resizable:false,
                            padding:false
                        }
                    };
                    },
                    build:function() {                              
                        this.elements.content.innerHTML = "**<html>MY HTML CODE</html>**";
                    },
                     hooks: {
                       onshow: function() {
                         this.elements.dialog.style.height = '50%';
                         this.elements.dialog.style.width = '15%';
                       }
                     }
                };
        });

在这里看到所有的HTML代码看起来很脏。我想把它放在一个单独的.html文件中,并在对话框实现中引用它。我们有任何选择吗?

1 个答案:

答案 0 :(得分:0)

AlertifyJS中没有内置此类功能,但您可以使用jQuery创建自己的包装器:

// myAlert dialog 
alertify.myAlert || alertify.dialog('myAlert', function factory() {
  return {
    main: function(content) {
      this.setContent(content);
    },
    setup: function() {
      return {
        options: {
          modal: false,
          basic: true,
          maximizable: false,
          resizable: false,
          padding: false
        }
      };
    }
  };
});

//custom wrapper to load external contents
alertify.ajaxAlert = function(url) {
  $.ajax({
    url: url,
  }).success(function(data) {
    alertify.myAlert(data);
  }).error(function() {
    alertify.error('Errro loading external file.');
  });
}

示例 http://plnkr.co/edit/SuFXMRthGpMKKXoG7Yv2?p=preview