继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

前端框架 jQuery EasyUi 学习笔记八(对话窗口-窗口、对话框、面板比较)

玄鉴
关注TA
已关注
手记 96
粉丝 237
获赞 4217
<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>
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP