HTML——eeasyUi界面学习笔记

来源：互联网发布：栖霞商务区网络问政编辑：程序博客网时间：2024/06/05 10:03

HTML——eeasyUi界面学习笔记

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../css/easyui.css">    <link rel="stylesheet" href="../css/icon.css">    <script src="../js/jquery-1.7.2.min.js"></script>    <script src="../js/jquery.easyui.min.js"></script>        <script>        $(function () {                    })    </script></head><body><div id="p" class="easyui-panel" title="My Panel"     style="width:500px;height:150px;padding:10px;background:#fafafa;"     data-options="iconCls:'icon-save',closable:true,                collapsible:true,minimizable:true,maximizable:true">    <p>panel content.</p>    <p>panel content.</p></div><div id="tt" class="easyui-tabs" style="width:500px;height:250px;">    <div title="Tab1" style="padding:20px;display:none;">        tab1    </div>    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">        tab2    </div>    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">        tab3    </div></div><div id="aa" class="easyui-accordion" style="width:300px;height:200px;">    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">        <h3 style="color:#0099FF;">Accordion for jQuery</h3>        <p>Accordion is a part of easyui framework for jQuery.            It lets you define your accordion component on web page more easily.</p>    </div>    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">        content2    </div>    <div title="Title3">        content3    </div></div></body><!--<body class="easyui-layout">--><!--<div data-options="region:'north'" style="height:100px"></div>--><!--<div data-options="region:'center'">--><!--<div class="easyui-layout" data-options="fit:true">--><!--<div data-options="region:'west',collapsed:true" style="width:180px"></div>--><!--<div data-options="region:'center'"></div>--><!--</div>--><!--</div>--><!--</body>--></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../css/easyui.css">    <link rel="stylesheet" href="../css/icon.css">    <script src="../js/jquery-1.7.2.min.js"></script>    <script src="../js/jquery.easyui.min.js"></script><script>        function addTabs(title,url) {            if($('#tt').tabs("exists",title)){                return            }        var content="<iframe src='"+url+"'width='100%'height='100%'frameborder='0'/>";            $('#tt').tabs('add',{                title:title,                content:content,                closable:true            });        }$(function () {})</script></head><body class="easyui-layout"><div data-options="region:'north',title:'杰瑞教育',split:true" style="height:100px;"></div><div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div><div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div><div data-options="region:'west',title:'West',split:true" style="width:200px;">    <div id="aa" class="easyui-accordion"  fit="true">        <div title="人事管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">            <h3 style="color:#0099FF;">Accordion for jQuery</h3>            <p>Accordion is a part of easyui framework for jQuery.                It lets you define your accordion component on web page more easily.</p>        </div>        <div  title="财务管理" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">            <div>                <a href="#"  onclick="addTabs('往来单位管理','comp.html')"><img src="../css/images/datebox_arrow.png"                                                                          height="16" width="16"/>往来单位管理</a>            </div>            <div>                <a href="#" onclick="addTabs('折旧管理','../../jquery/html/j08.html')"><img src="../css/images/searchbox_button.png"                                                                     height="16" width="16"/>折旧管理</a>            </div>        </div>        <div title="生产管理">            <div>                <a href="#"  onclick="addTabs('往来单位管理2','comp2.html')"><img src="../css/images/datebox_arrow.png"                                                                          height="16" width="16"/>往来单位管理2</a>            </div>            <div>                <a href="#" onclick="addTabs('折旧管理2','zj2.html')"><img src="../css/images/searchbox_button.png"                                                                     height="16" width="16"/>折旧管理2</a>            </div>        </div>    </div></div><div id="zyf" data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">    <div id="tt" class="easyui-tabs"  fit="true" >        <div data-options="title:'主界面'">            <iframe src="main.html"  style="width:100%;height: 100%" scrolling="no"frameborder="0"></iframe>        </div>     </div>    </div></body><!--<body class="easyui-layout">--><!--<div data-options="region:'north'" style="height:100px"></div>--><!--<div data-options="region:'center'">-->    <!--<div class="easyui-layout" data-options="fit:true">-->        <!--<div data-options="region:'west',collapsed:true" style="width:180px"></div>-->        <!--<div data-options="region:'center'"></div>-->    <!--</div>--><!--</div>--><!--</body>--></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../css/easyui.css">    <link rel="stylesheet" href="../css/icon.css">    <script src="../js/jquery-1.7.2.min.js"></script>    <script src="../js/jquery.easyui.min.js"></script></head><body>折旧管理<table class="easyui-datagrid">    <thead>    <tr   >        <th  data-options="field:'code'">编码</th>        <th data-options="field:'name'">名称</th>        <th data-options="field:'price'">价格</th>    </tr>    </thead>    <tbody>    <tr >        <td>001</td><td>name1</td><td>2323</td>    </tr>    <tr>        <td>002</td><td>name2</td><td>4612</td>    </tr>    </tbody></table></body></html>

1 0