用Dojo实行Confirm模式对话框

本文详细介绍了如何使用JavaScript实现一个用于确认删除子账户的对话框,包括其核心逻辑、模板和交互事件处理。通过创建一个DialogYesNo类,实现了确认和取消操作的响应,并展示了如何在对话框中显示内容并触发相应的回调函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//用例

              var dlg = this._ynDlg;
              if (!dlg) {
                dlg = this._ynDlg = new DialogYesNo({
                  whenYes: function () {alert("yes"); }
                });
              }
              dlg.show("确认删除子账户吗?");
            });

//源代码

//DialogYesNo.js

define([
  "dojo/_base/declare",
  "dijit/Dialog",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/text!./templates/DialogYesNo.html",
  "dijit/form/Button"
], function (declare, Dialog, _WidgetsInTemplateMixin, template) {
  return declare([Dialog, _WidgetsInTemplateMixin], {
    baseClass: "DialogYN",
    templateString: template,
    title: "确认",
    whenNo: function () {
    },
    _no: function () {
      this.hide();
      this.whenNo();
    },
    whenYes: function () {
    },
    _yes: function () {
      this.hide();
      this.whenYes();
    },
    _keydown: function (event) {
      var key = event.keyCode;
      if (key === 78)
        this._no();
      else if (key === 89)
        this._yes();
    },
    show: function (content) {
      this.set("content", content);
      this.inherited(arguments);
    }
  });
});

 

//./templates/DialogYesNo.html

<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title">
  <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
  <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"
          role="heading" level="1"></span>
  <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon"
          data-dojo-attach-event="ondijitclick: onCancel,keydown:_keydown" title="${buttonCancel}" role="button" tabIndex="-1">
   <span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span>
  </span>
  </div>
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent">
  </div>
  <div style="background-color:#ffffff;min-width: 200px;height: 40px">
    <div data-dojo-attach-point="buttonContainer" style="float: right;margin-right: 20px">
      <button data-dojo-type="dijit/form/Button"
              data-dojo-attach-point="btnYes"
              data-dojo-attach-event="onClick:_yes">是(Y)
      </button>
      <button data-dojo-type="dijit/form/Button"
              data-dojo-attach-point="btnNo"
              data-dojo-attach-event="onClick:_no">否(N)
      </button>
    </div>
  </div>
</div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值