EVShop编程规则之Dialog篇

在Evshop中，对话框是使用artDialog控件，关于artDialog的使用方式，可以参考: artDialog文档 我们在artDialog基础上，做了一些基础的封装，封装参考代码: /data/application/common/myDialog.js 对话框的基本使用示例，参考: /data/application/shop/sample_list.js

对话框(myDialog)的使用

• 要使用对话框，需要在前端js中引入: var myDialog = require("myDialog");

• 使用基本的 Success/Error/Info 对话框:

  myDialog.showSucc("Success");       
  myDialog.showError("Failed");       
  myDialog.showInfo("title","你好啊");
  

• 对话框中显示本页面中元素内的内容:

  $("#opelem").bind("click",function(){
  var dialog= myDialog.showMoreDialog(this,{
      width:400,
      height:$("#dlg_element").height+200,
      title:$(this).attr("dialog_title"),
      content:$("#dlg_element").html(),
  },true);
  });
  

• 显示自定义confirm对话框

  myDialog.showConfirm("提示信息","删除相册？注意：相册内的图片将转移到默认相册",function(){
  $(this).ajaxSubmit({
      data: {"id":album_id},
      dataType:'json',
      type:'get',
      url:process_uri,
      success:function(responseText,stsText,xhr){
          commonFunc.showAjaxProcessInfo(responseText);
      },
      error:function(error) {
          myDialog.showError(error);
      }
  });
  //alert('xxx');
  });
  

• 对话框中显示指定URL的内容

  $("#opelurl2").bind('click',function(){
      // support param:  width,
     var dialog = myDialog.showFormDialog(this,{
          width:500,
          title:"Open Dialog",
          url:$(this).attr("dialog_url"),
          okValue : "确定", // 确定按钮文件，如果不设定，则默认为"确定"
          extraSubmitData : {"param1":"1","param2":"2"},
          success: function(dialogObj,responseText) {
              console.log(responseText); // responsetext后端返回的JSON对象
              myDialog.showSucc("Success");
              //dialogObj.close().remove();
          },
          error: function(dialogObj,errorText) {
              console.log(errorText);
              myDialog.showError(errorText);
              //dialogObj.close().remove();
          }
     });
  });
  

  注：一般来说，指定URL内容包含的是FORM表单，表单提交的Button不需要在页面中定义， 而是使用对话框提供的OK/Cancel按钮

• 对话框URL方式打开后，支持对话框内元素事件的监听 在myDialog.showFormDialog函数内， 可以使用eventListeners来监听对话框内元素的事件监听。方式如下：

  $("#opelurl2").bind('click',function(){
  // support param:  width,
  var dialog = myDialog.showFormDialog(this,{
      width:500,
      title:"Open Dialog",
      url:$(this).attr("dialog_url"),
      eventListeners : [{
         selector:'input[type="text"]',  // Dialog中事件绑定的选择器
         eventName:'change',              // Dialog中需要监测的事件
         eventFunction : function($sender,$dlgDocument) {  // 事件产生后所回调的函数
             // $sender是触发此事件的jquery对象,$document是页面中document的jquery对象
             console.log($sender.attr("name"));
             //console.log($dlgDocument);
         }
      }],
      okValue : "确定", // 确定按钮文件，如果不设定，则默认为"确定"
      ...
  }