前端框架 jQuery EasyUi 學習筆記八（對話窗口-窗口、對話框、面板比較）

標簽：

Java JQuery JavaScript

<script type="text/javascript">
    $(function() {

        /* $('#dd2').dialog({
            title : 'My Dialog',
            width : 400,
            height : 200,
            closed : false,
            cache : false,
            collapsible:true,

             minimizable:true,
            maximizable:true,
            resizable:true,
            modal : true
        }); */

        /* 并调用'refresh'方法通过ajax读取url:"new_content.php"的内容 ，若获取不到，则一直显示loading圆图标-->
    $('#dd').dialog('refresh', 'new_content.php');   */
    /* 对话框与面板非常相似，比如获取内容  */
/* $('#p').panel({    
    href:'content_url.php',    
    onLoad:function(){    
        alert('loaded successfully');    
    }   
}); */ 

/* $('#w').window({
             title:'我的窗口',
             width:700,
             height:200,
              iconCls:'icon-add',
             tools:'#tt',
            footer:'#footer',
             modal:true
          }); */

    });
</script>
</head>

<body>

    <!--//第一通过已存在的DOM节点元素标签创建

     <div id="dd1" class="easyui-dialog" title="My Dialog"
        style="width:400px;height:200px;"
        data-options="iconCls:'icon-save',resizable:true,modal:true">
        Dialog Content.</div> -->
<!-- 第二使用Javascript创建对话框窗 -->
    <!-- <div id="dd2">Dialog Content.</div> -->

<!-- 给对话框添加工具栏（Toolbar）和按钮（Button） -->
    <!-- 
    <div id="dlg-toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
    </div>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>
    </div> -->

<!--上面的代码我们创建了一个带有工具栏（toolbar）和按钮（button）的对话框（dialog）。这是对话框（dialog）、工具栏（toolbar）、内容（content）和按钮（buttons）的标准配置  -->

<!-- 对话框与面板非常相似，除了获取内容之外，还有按钮和工具栏   -->
<!-- <div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>

<div id="tt">
    <a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div> -->

<!-- 与此类似，窗口也可以添加按钮和工具栏 -->

<div id="w" style="padding:10px;">
        The window content.
    </div>
    <div id="footer" style="padding:5px;">Footer Content.</div>

    <div id="tt">
        <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
        <a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>
        <a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>
        <a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>
    </div>

</body>

點擊查看更多內(nèi)容