CSS - Panel | Amaze UI
CSS浏览器默认样式统一，基础样式，网格，表格、表单、按钮及常用组件样式。 目录Panel 面板组件带有轮廓、常用来放置带标题和文字的内容块。基本样式 默认的 .am-panel 提供基本的阴影和边距，默认边框添加 .am-panel-default，内容放在 .am-panel-bd 里面。这是一个基本的面板组件。 class="am-panel am-panel-default"&
class="am-panel-bd"&这是一个基本的面板组件。&
&带标题的面板 .am-panel-hd 用来放置标题，建议使用 h1 - h6 并添加 .am-panel-title class，更加语义化。面板标题面板内容面板标题面板内容 class="am-panel am-panel-default"&
class="am-panel-hd"&面板标题&
class="am-panel-bd"&
class="am-panel am-panel-default"&
class="am-panel-hd"&
class="am-panel-title"&面板标题&
class="am-panel-bd"&
&面板颜色 添加不同的一下类可以设置不同的颜色。.am-panel-primary.am-panel-secondary.am-panel-success.am-panel-warning.am-panel-danger面板标题面板内容面板标题面板内容面板标题面板内容面板标题面板内容面板标题面板内容 class="am-panel am-panel-primary"&...&
class="am-panel am-panel-secondary"&...&
class="am-panel am-panel-success"&...&
class="am-panel am-panel-warning"&...&
class="am-panel am-panel-danger"&...&面板页脚 面板页脚 .am-panel-footer，用于放置次要信息。页脚不会继承 .am-panel-primary - .am-panel-danger 等颜色样式。面板内容 class="am-panel am-panel-default"&
class="am-panel-bd"&
class="am-panel-footer"&面板页脚&
&组合使用 面板嵌套表格 将没有边框的表格 (.am-table) 直接放在 .am-panel 下面（不是放在 .am-panel-bd 里面）。面板标题这里是面板其他内容。名称网址创建时间Amaze UIamazeui.orgAmaze UIamazeui.orgAmaze UIamazeui.org class="am-panel am-panel-default"&
class="am-panel-hd"&
class="am-panel-title"&面板标题&
class="am-panel-bd"&
&这里是面板其他内容。&
class="am-table"&
class="am-panel-footer"&...&
&面板嵌套列表 面板标题这里是面板其他内容。每个人都有一个死角， 自己走不出来，别人也闯不进去。我把最深沉的秘密放在那里。你不懂我，我不怪你。每个人都有一道伤口， 或深或浅，盖上布，以为不存在。 class="am-panel am-panel-default"&
class="am-panel-hd"&
class="am-panel-title"&面板标题&
class="am-panel-bd"&
这里是面板其他内容。
class="am-list am-list-static"&
class="am-panel-footer"&...&
&面板群组 将多个面板放在 .am-panel-group 里面，可结合 JS 制作折叠面板（手风琴面板）。面板标题面板内容面板标题面板内容面板标题面板内容在微信上关注我们panel - Documentation - jQuery EasyUI
Override defaults with $.fn.panel.defaults.
The panel is used as a container for other contents.
It is the base component for building other components such as layout, tabs, accordion, etc.
It also provides built-in collapsible, closable, maximizable and minimizable behavior and other customized behavior.
Panels can be easily embedded into any position of web page.
Usage Example
Create Panel
1. Create Panel via markup
Creation from markup is even easier. Add 'easyui-panel' class to &div/& markup.
panel content.
panel content.
2. Create Panel programatically
Let's create panel with tools on top right.
panel content.
panel content.
$('#p').panel({
width:500,
height:150,
title:'My Panel',
iconCls:'icon-add',
handler:function(){alert('new')}
iconCls:'icon-save',
handler:function(){alert('save')}
Move Panel
Call 'move' method to move panel to a new position
$('#p').panel('move',{
Load Content
Let's load the panel content via ajax and show some message when loaded successfully.
$('#p').panel({
href:'content_url.php',
onLoad:function(){
alert('loaded successfully');
Properties
Description
The id attribute of this panel.
The title text to display in panel header.
A CSS class to display a 16x16 icon in panel.
Set the panel width.
Set the panel height.
Set the panel left position.
Set the panel top position.
Add a CSS class to the panel.
Add a CSS class to the panel header.
Add a CSS class to the panel body.
Add a custom specification style to the panel.
Code example to change the panel border width:
&div class="easyui-panel" style="width:200height:100px"
data-options="style:{borderWidth:2}"&
When true to set the panel size fit it's parent container.
The example below shows a panel which can be auto resized to max inner dimensions of its parent container
&div style="width:200height:100padding:5px"&
&div class="easyui-panel" style="width:200height:100px"
data-options="fit:true,border:false"&
Embedded Panel
Defines if to show panel border.
If set to true,the panel will be resize and do layout when created.
If set to true, the panel header will not be created.
The panel body content.
collapsible
Defines if to show collapsible button.
minimizable
Defines if to show minimizable button.
maximizable
Defines if to show maximizable button.
Defines if to show closable button.
array,selector
Custom tools, possible values:
1) an array, each element contains iconCls and handler properties.
2) a selector that indicating the tools
The panel tools can be declared with exists &div& tag:
&div class="easyui-panel" style="width:300height:200px"
title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'"&
&div id="tt"&
&a href="#" class="icon-add" onclick="javascript:alert('add')"&&/a&
&a href="#" class="icon-edit" onclick="javascript:alert('edit')"&&/a&
The panel tools can also be defined via array:
&div class="easyui-panel" style="width:300height:200px"
title="My Panel" data-options="iconCls:'icon-ok',tools:[
iconCls:'icon-add',
handler:function(){alert('add')}
iconCls:'icon-edit',
handler:function(){alert('edit')}
The panel header. Available since version 1.4.2.
Code example:
&div class="easyui-panel" style="width:300height:200px"
title="My Panel"&
&header&Panel Header&/header&
The panel footer. Available since version 1.4.1.
Code example:
&div class="easyui-panel" style="width:300height:200px"
title="My Panel" data-options="footer:'#ft'"&
&div id="ft"&Footer Content&/div&
openAnimation
The opening animation. Available since version 1.4.1.
Available values are: 'slide','fade','show'.
openDuration
The opening duration. Available since version 1.4.1.
closeAnimation
The closing animation. Available since version 1.4.1.
Available values are: 'slide','fade','hide'.
closeDuration
The closing duration. Available since version 1.4.1.
Defines if the panel is collapsed at initialization.
Defines if the panel is minimized at initialization.
Defines if the panel is maximized at initialization.
Defines if the panel is closed at initialization.
A URL to load remote data and then display in the panel.
Notice that the content will not be loaded until the panel is open and expand.
This is useful to create a lazy loading panel:
&div id="pp" class="easyui-panel" style="width:300height:200px"
data-options="href:'get_content.php',closed:true"&
&a href="#" onclick="javascript:$('#pp').panel('open')"&Open&/a&
True to cache the panel content that loaded from href.
loadingMessage
When loading remote data show a message in the panel.
Defines how to extract the content from ajax response, return extracted data.
extractor: function(data){
var pattern = /&body[^>]*>((.|[\n\r])*)/
var matches = pattern.exec(data);
if (matches){
return matches[1]; // only extract body content
The http method to load content page.
Available since version 1.3.6.
queryParams
The additional parameters that will be sent when loading a content page.
Available since version 1.3.6.
Defines how to load content page from remote server. Available since version 1.3.6.
This function takes following parameters:
param: the parameter object to pass to remote server.
success(data): the callback function that will be called when retrieve data successfully.
error(): the callback function that will be called when failed to retrieve data.
Parameters
Description
onBeforeLoad
Fires before loading a content page, return false to ignore this action.
Available since version 1.3.6.
Fires when remote data is loaded.
onLoadError
Fires when some errors occur to load content page.
Available since version 1.3.6.
onBeforeOpen
Fires before panel is opened, return false to stop the open.
Fires after panel is opened.
onBeforeClose
Fires before panel is closed, return false to cancel the close.
The panel declared below cannot be closed.
&div class="easyui-panel" style="width:300height:200"
title="My Panel" data-options="onBeforeClose:function(){return false}"&
The panel cannot be closed.
Fires after panel is closed.
onBeforeDestroy
Fires before panel is destroyed, return false to cancel the destroy.
Fires after panel is destroyed.
onBeforeCollapse
Fires before panel is collapsed, return false to stop the collapse.
onCollapse
Fires after panel is collpased.
onBeforeExpand
Fires before panel is expanded, return false to stop the expand.
Fires after panel is expanded.
width, height
Fires after panel is resized.
width: the new outer width
height: the new outer height
Fires after panel is moved.
left: the new left postion
top: the new top position
onMaximize
Fires after the window has been maximized.
Fires after the window has been restored to its original size.
onMinimize
Fires after the window has been minimized.
Description
Return options property.
Return the outer panel object.
Return the panel header object.
Return the panel footer object. Available since version 1.4.1.
Return the panel body object.
Set the title text of header.
When forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback.
forceClose
When forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback.
forceDestroy
When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback.
Clear the panel content. Available since version 1.4.
Refresh the panel to load remote data.
If the 'href' parameter is assigned, it will override the old 'href' property.
Code example:
// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');
// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');
Set panel size and do layout. The options object contains following properties:
width: the new panel width
height: the new panel height
left: the new panel left position
top: the new panel top position
Code example:
$('#pp').panel('resize',{
width: 600,
height: 400
Set the sizes of child components within the panel.
Available since version 1.4.
Move the panel to a new position. The options object contains following properties:
left: the new panel left position
top: the new panel top position
Fits the panel winthin its container.
Minimizing the panel.
Restores the maximized panel back to its original size and position.
Collapses the panel body. The 'animate' parameter value indicates if to use animation effect.
Expand the panel body. The 'animate' parameter value indicates if to use animation effect.下次自动登录
现在的位置:
& 综合 & 正文
使用jqMobi开发app基础：定义footer
定义footer的方式和定义方式基本一样，有三种方式
1定义公共的footer
也就是所有panel默认的footer，需要在div id="afui"&内部，也就是和&div id="content"&同一级的位置添加一个div，并且ID必须是navbar
&div id="navbar"&
&a href="#home" id='navbar_home' class='icon home'&home&/a&
&a href="#sketch" id='navbar_pencil' class='icon pencil'&Sketch&/a&
&a href="#picture" id='navbar_picture' class='icon picture'&Picture&/a&
2自定义footer有两种方式和自定义header有些类似
第一种在div id="afui"&内部，也就是和&div id="content"&同一级的位置添加一个footer
标签，并且命名id。
然后再需要这个footer的panel添加一个属性data-footer="custom_footer"
&div id="afui"&
&div id="content"&
&div class="panel" id="panel1" data-footer="myfooter"&
&h3&panel contents&/h3&
&footer id="myfooter"&
&h1&Custom footer&/h1&
&a class="button" style="float:" class="icon home"&&/a&
第二种就是在需要自定义的panel的div内部定义一个footer
&div id="afui"&
&div id="content"&
&div class="panel" id="panel1"&
&h1&Custom Footer&/h1&
&a class="button" style="float:" class="icon home"&&/a&
&h3&Panel content &/h3&
参照很明显少了，通过title定义footer的方式。
&&&&推荐文章:
【上篇】【下篇】求 control panel是如何配置的？我的论坛是Discuz! X3.2_discuz吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：10,325贴子：
求 control panel是如何配置的？我的论坛是Discuz! X3.2收藏
想进入这种入口，应该怎样设置？
不懂你想表达什么
模块管理 ？
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或}