阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      EasyUI 窗口 – 自定义带有工具条和按钮的对话框

      EasyUI 窗口 - 自定义带有工具条和按钮的对话框

      您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建。这个教程描述如何添加工具栏(toolbar)和按钮(button)到对话框(dialog),没有任何的 javascript 代码。

      创建对话框(Dialog)

      <div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;padding:10px"
              toolbar="#dlg-toolbar" buttons="#dlg-buttons">
          Dialog Content.
      </div>
      

      创建工具栏(Toolbar)

      <div id="dlg-toolbar">
          <table cellpadding="0" cellspacing="0" style="width:100%">
              <tr>
                  <td>
                      <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a>
                      <a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
                  </td>
                  <td style="text-align:right">
                      <input></input><a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a>
                  </td>
              </tr>
          </table>
      </div>
      

      创建按钮(Buttons)

      <div id="dlg-buttons">
          <table cellpadding="0" cellspacing="0" style="width:100%">
              <tr>
                  <td>
                      <img src="email.gif"/>
                  </td>
                  <td style="text-align:right">
                      <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="javascript:alert('save')">Save</a>
                      <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
                  </td>
              </tr>
          </table>
      </div>
      

      请注意,对话框(dialog)的工具栏(toolbar)和按钮(buttons)属性也可以通过 string 值指定,它将充当作为一个选择器去选择一个适当的 DIV 元素,并追加到工具栏(toolbar)或者按钮(buttons)的位置。

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录