网站前端_EasyUI.基础入门.0002.使用EasyUI Panel组件的最佳姿势?

1. 基础面板

<div id="p" class="easyui-panel" style="padding: 10px;" data-options="width:700,height:250,title:‘基础面板‘">
    <p>jQuery EasyUI framework helps you build your web pages easily.</p>
    <ul>
        <li>easyui is a collection of user-interface plugin based on jQuery.</li>
        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
        <li>using easyui you don‘t need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
        <li>complete framework for HTML5 web page.</li>
        <li>easyui save your time and scales while developing your products.</li>
        <li>easyui is very easy but powerful.</li>
    </ul>
</div>


2. 流式面板

<div style="width:700px;height:250px;">
    <div id="p" style="padding:10px;" class="easyui-panel" data-options="fit:true,title:‘流式面板‘">
        <p>The panel has a width of 100%.</p>
    </div>
</div>


3. 面板工具

<div>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$(‘#p‘).panel(‘open‘)">打开</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$(‘#p‘).panel(‘collapse‘)">收缩</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$(‘#p‘).panel(‘expand‘)">展开</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$(‘#p‘).panel(‘minimize‘)">最小</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$(‘#p‘).panel(‘restore‘)">还原</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$(‘#p‘).panel(‘maximize‘)">最大</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$(‘#p‘).panel(‘close‘)">关闭</a>
</div>
<hr>
<div id="pbox" class="easyui-panel" style="padding:10px;" data-options="width:700,height:300">
    <div id="p" class="easyui-panel" style="padding:10px;" data-options="width:500,height:250,title:‘面板工具‘">
            <p>jQuery EasyUI framework helps you build your web pages easily.</p>
            <ul>
                <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                <li>using easyui you don‘t need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                <li>complete framework for HTML5 web page.</li>
                <li>easyui save your time and scales while developing your products.</li>
                <li>easyui is very easy but powerful.</li>
            </ul>
    </div>
</div>


4. 用户面板

<div id="p" class="easyui-panel" style="padding:10px;" data-options="width:700,height:250,title:‘用户面板‘,tools:‘#usr_tools‘">
    <p>jQuery EasyUI framework helps you build your web pages easily.</p>
    <ul>
        <li>easyui is a collection of user-interface plugin based on jQuery.</li>
        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
        <li>using easyui you don‘t need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
        <li>complete framework for HTML5 web page.</li>
        <li>easyui save your time and scales while developing your products.</li>
        <li>easyui is very easy but powerful.</li>
    </ul>
</div>
<div id="usr_tools">
    <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>


5. 数据加载

<div id="p" class="easyui-panel" style="padding:10px;" data-options="width:700,height:250,title:‘数据加载‘,tools:[{
    iconCls:‘icon-reload‘,
    handler: function(){
        $(‘#p‘).panel(‘refresh‘, ‘/easyui/_contents.html‘);
    }
}]"></div>


6. 面板尾部

<div id="p" class="easyui-panel" style="padding:10px;" data-options="width:700,height:250,title:‘面板底部‘,footer:‘#panel_foot‘">
    <p>jQuery EasyUI framework helps you build your web pages easily.</p>
    <ul>
        <li>easyui is a collection of user-interface plugin based on jQuery.</li>
        <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
        <li>using easyui you don‘t need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
        <li>complete framework for HTML5 web page.</li>
        <li>easyui save your time and scales while developing your products.</li>
        <li>easyui is very easy but powerful.</li>
    </ul>
</div>
<div id="panel_foot" style="padding:5px;">面板底部</div>


7. 面板嵌套

<div id="pbox" class="easyui-panel" style="padding:5px;" data-options="width:700,height:250,title:‘主面板‘">
    <div class="easyui-layout" data-options="fit:true">
        <div id="pleft" style="padding:5px;" data-options="region:‘west‘,width:‘20%‘">左面板</div>
        <div id="pcenter" style="padding:5px;" data-options="region:‘center‘,width:‘60%‘">中面板</div>
        <div id="pright" style="padding:5px;" data-options="region:‘east‘,width:‘20%‘">右面板</div>
    </div>
</div>


本文出自 “满满李 - 运维开发之路” 博客,请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1892415

时间: 2024-10-12 04:21:10

网站前端_EasyUI.基础入门.0002.使用EasyUI Panel组件的最佳姿势?的相关文章

网站前端_EasyUI.基础入门.0009.使用EasyUI Layout组件的最佳姿势?

1. 基础布局 <div id="l" class="easyui-layout" data-options="width:500,height:250">     <div data-options="region:'north',title:'north',height:50"></div>     <div data-options="region:'west',tit

网站前端_EasyUI.基础入门.0007.使用EasyUI Tabs组件的最佳姿势?

1. 基础选项卡 <div id="t" class="easyui-tabs" data-options="width:500,height:300">     <div data-options="title:'About',closable:true,bodyCls:'tabbody'">         <p style="font-size:14px">jQue

网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它嵌入到网页的任何位置. 基础用法: <div id="p" class="easyui-panel" title="面板-标题" data-options="iconCls:'icon-save',closable:true,coll

网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?

通用技能: # 文档类型 <!DOCTYPE html> <html lang="zh-cn">     <!-- Html Code --> </html> 说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性. # 移动先行 <meta name="viewport" content="width=device-width, initi

网站前端_Bootstrap.基础入门.0001.BS的模版标准/样式标准/脚本标准?

简单介绍: 1. Bootstrap于2010年Twitter开源将常见的CSS布局小组件和JS插件进行了封装,大大规范且提高了代码质量及开发效率. 2. Bootstrap包含完整的基础CSS插件,丰富的预定义样式表,基于JQuery的JS插件集,非常灵活的响应式删栏系统,支持跨平台,且完全支持自定义. 注意: Bootstrap的所有JS插件都依赖jQuery库,所以要确保在使用这些功能的时候引用相应的jQuery文件 模版标准: <!DOCTYPE html> <html lang

网站前端_KindEditor.基础入门.0001.KindEditor_3.4.2配置参数?

初始方式: 说明: 在快速入门中使用KE.show({ .. .})来初始化了一个编辑器,具体进入js/kindeditor.js下可以看到KE对象下的show方法先调用了KE的init方法然后又调用了其event事件对象的ready方法,内部其实是调用的KE的create方法,传递的参数为args的id属性,所以可通过2种方式来初始化编辑器 # 方式一 : # 方式二 : 注意: 无论使用哪种方式初始化编辑器,都需要传递配置对象{ ... },配置对象中id属性是必须配置的,其它的属性默认采用

前端零基础入门

前言 首先,任何技术实际都是从零基础开始的,不管是直接学习还是通过相近经历转行.所以不需要因零基础担心. 其次,一定要做好准备:一项技术的学习,意味着你各方面资源不同程度的消耗——时间.工具.资金,甚至融入相关交流圈子的准备.在这个准备过程中,最好是带有一个强硬的规划:“我要在一个月内达到能够实现XXX的水平”或者“我一定要在2周内把XXX项目完成”.如果没有这个规划,一般人都会越来越懒惰. 然后,选准一个或多个老师.这个老师,可以是一个页面,一本书,也可以是一个真实的人. 学习内容 主要有ht

网站前端_Jquery-基础入门.0001.原生Js到后期封装库Jquery的过渡?

原生缺点: 1. JS的出现使得网页与用户之间实现了一种实时/动态/交互的关系,网页可以包含更多活跃的元素和精彩的内容 2. JS的弊端在于复杂的DOM对象,而JQuery封装了很多预定义的对象和使用函数简化了DOM操作,使得我们可以快速创建有高难度交互的富客户端页面,且兼容各大浏览器 简单介绍: 1. JQuery是一个优秀的JavaScript库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能,目前团队主要推核心库(JQuery)/UI(JQuery UI)

前端零基础入门:页面结构层HTML

HTML页面结构层HTML 分以下方面学习: HTML基础, HTML表格, HTML表单, 搭建网页结构 html基础 学习前端的第一门课程,为HTML基础,HTML标记语言,它是网页制作的第一步. 学习内容: HTML概念,了解HTML发展史,基础语法,常用标签(段落,图片,链接等) 结合小例子 什么是HTML HTML(Hypertext Markup Language)即超文本标记语言 html发展史 1993(IETF)HTML1.0 1995(W3C)HTML2.0 1996(W3C