Panel 面板
简介
面板是构建管理系统页面的重要结构元素，信息展示板块基本上需要通过面板来呈现，为了让管理系统变得个性易操作，本框架的面板插件并没有完全封装HTML，而是由用户自主构建面板的主体结构，使用axPanel插件对其进行展开、折叠、移除和监听操作。
特点
本面板插件功能比较简单，基本要点如下：
- 1、用户自行构建HTML结构，只需保留插件所需节点命名方式
- 2、支持2*2种指示箭头形式
- 3、支持头部置入多种框架元素，不限于tab、dot和button
- 4、多个操作方法和监听事件
- 5、支持整个头部点击切换显示
- 6、支持panel和box模块共用该插件
使用方法
插件运行方式有两种：
- ax*属性：对ax-panel标签使用
axPanel属性即可按默认参数运行插件。 - js实例：通过
new axPanel('#id',{参数})方式创建实例运行。
构建面板结构需要至少三个节点，ax-panel、ax-panel-header和ax-panel-body。
其他可用节点有caption、label、legend、image、avatar、arrow、tools、tip和arrow
<div class="ax-panel" axPanel>
<div class="ax-panel-header">基本结构</div>
<div class="ax-panel-body">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><div caption>加上caption和分割线</div></div>
<hr/>
<div class="ax-panel-body">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><div caption>内容加上ax-article</div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><div caption><i label>加上label和tip</i><i tip>浅色副标题</i></div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><i legend class="ax-iconfont ax-icon-earth"></i><div caption><i label>加上图标</i><i tip>浅色副标题</i></div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><div caption><i label>加上工具按钮</i></div><span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><i avatar><img src="<?=$public?>images/head01.jpg" /></i></i><div caption><i label>加上头像</i></div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><i image><img src="<?=$public?>images/head01.jpg" /></i><div caption><i label>加上图片</i></div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
指示箭头风格
箭头风格默认可旋转180度的向下箭头，用户可通过arrow.iconOpen和arrow.iconClose自定义图标，如果这两个值一致将使用自动使用arrow.rotate参数进行旋转90或180度。
如果不一致那么指示箭头将不再旋转而是改为样式名切换。
默认指示箭头
内容部分
更换默认指示箭头
内容部分
切换指示图标
内容部分
旋转90度
内容部分
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><div caption>默认指示箭头</div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{iconOpen:'ax-icon-down-o',iconClose:'ax-icon-down-o'}">
<div class="ax-panel-header"><div caption>更换默认指示箭头</div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{iconOpen:'ax-icon-minus-s',iconClose:'ax-icon-plus-s'}">
<div class="ax-panel-header"><div caption>切换指示图标</div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{iconOpen:'ax-icon-right',iconClose:'ax-icon-right',rotate:90}">
<div class="ax-panel-header"><div caption>旋转90度</div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
更换箭头位置
箭头默认是放在header的后面，可通过调整HTML结构改变箭头的位置，或者通过arrow.position参数改变位置，该参数默认“end”，可设为“begin”
默认指示箭头
内容部分
箭头放到前面
内容部分
调整HTML结构，插入arrow标签
内容部分
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><div caption>默认指示箭头</div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{position:'begin'}">
<div class="ax-panel-header"><div caption>箭头放到前面</div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel>
<div class="ax-panel-header"><i arrow class="ax-iconfont ax-icon-arrow-down"></i><div caption>调整HTML结构，插入arrow标签</div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
头部可点击
插件默认通过点击指示箭头切换显示内容，可通过headerClosable参数设为true，此时header中的所有子元素都将被取消点击事件。
整个头部点击切换显示内容
内容部分
<div class="ax-panel" axPanel="headerClosable:true">
<div class="ax-panel-header"><div caption>整个头部点击切换显示内容</div></div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
基本变化
对于常规的简单的元素可直接插入panel中的节点而不会扭曲走样
<div class="ax-panel" axPanel>
<div class="ax-panel-header">
<div caption>关于中国</div><i tip>拥有5000年历史的文明古国</i>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{position:'begin'}">
<div class="ax-panel-header">
<div caption><i label>关于中国</i><i class="ax-badge">新</i></div><i class="ax-badge ax-radius">12条未读</i>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{position:'begin'}">
<div class="ax-panel-header">
<div caption><i label>关于中国</i><i class="ax-dot"></i></div><i class="ax-dot"></i>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{enable:false}">
<div class="ax-panel-header">
<div caption><i label>关于中国</i></div><span tools><a href="###">查看更多<i class="ax-iconfont ax-icon-right"></i></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{enable:false}">
<div class="ax-panel-header">
<div caption><i label>关于中国</i></div>
<a href="###" class="ax-btn ax-sm">导入数据</a>
<a href="###" class="ax-btn ax-primary ax-sm">导出EXCEL</a>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{enable:false}">
<div class="ax-panel-header">
<div caption><i label>关于中国</i></div>
<a href="###" class="ax-btn ax-xs">导入数据</a>
<a href="###" class="ax-btn ax-primary ax-xs">导出EXCEL</a>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
组合tab
面板支持两种tab头部切换，此时需要将arrow.eneble参数设为false以取消折叠功能。
- 隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。
- 宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。
- 元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。
- 隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。
- 宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。
- 元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。
<div class="ax-panel" axPanel="arrow:{enable:false}" axTab>
<div class="ax-panel-header">
<div caption><i label>关于中国</i></div>
<span class="ax-btn-group ax-tab-nav" header><a href="###" class="ax-btn ax-xs" active>唐朝</a><a href="###" class="ax-btn ax-xs">宋朝</a><a href="###" class="ax-btn ax-xs">元朝</a></span>
</div>
<hr/>
<ul class="ax-panel-body ax-article" body>
<li>隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。</li>
<li>宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。</li>
<li>元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。</li>
</ul>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="arrow:{enable:false}" axTab>
<div class="ax-panel-header">
<div caption><i label>关于中国</i></div>
<div class="ax-lamp-group" header>
<a href="###" active>唐朝</a>
<a href="###">宋朝</a>
<a href="###">元朝</a>
</div>
</div>
<hr/>
<ul class="ax-panel-body ax-article" body>
<li>隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。</li>
<li>宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。</li>
<li>元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。</li>
</ul>
</div>
标题指示
通过给ax-panel-header追加lamp属性，该属性给标题添加指示灯，可选值有left、bottom和top。
关于中国
内容部分
关于中国
内容部分
关于中国
内容部分
<div class="ax-panel" axPanel="lamp:'left'">
<div class="ax-panel-header">
<div caption><i label>关于中国</i></div>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="lamp:'top'">
<div class="ax-panel-header">
<div caption><i label>关于中国</i></div>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="lamp:'bottom'">
<div class="ax-panel-header">
<div caption><i label>关于中国</i></div>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
box类型
普通面板的间隙以14px为基准的，对于某些强调简约设计的需求需要增加间隙，通过使用type=box属性更换风格。box类型的头部结构与panel头部结构略有不同。以下两个示例展示如何启用box类型。
关于中国
内容部分
关于中国
内容部分
<div class="ax-panel" type="box" axPanel>
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-[label]"></div>
<div class="ax-panel" axPanel="type:'box'">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
以下展示box类型的布局效果。
关于中国
拥有5000年历史的文明古国
内容部分
关于中国新
12条未读
内容部分
关于中国
内容部分
关于中国
查看更多
内容部分
关于中国
内容部分
关于中国
内容部分
关于中国
内容部分
- 隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。
- 宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。
- 元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。
- 隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。
- 宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。
- 元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。
<div class="ax-panel" axPanel="type:'box'">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box'">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
<i tip>拥有5000年历史的文明古国</i>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',arrow:{position:'begin'}">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i><i class="ax-badge ax-round">新</i></div>
<i class="ax-badge ax-radius">12条未读</i>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',arrow:{position:'begin'}">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i><i class="ax-dot"></i></div>
<i class="ax-dot"></i>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',arrow:{enable:false}">
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
<span tools><a href="###">查看更多<i class="ax-iconfont ax-icon-right"></i></a></span>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',arrow:{enable:false}">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
<a href="###" class="ax-btn ax-sm">导入数据</a>
<a href="###" class="ax-btn ax-primary ax-sm">导出EXCEL</a>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',arrow:{enable:false}">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
<a href="###" class="ax-btn ax-xs">导入数据</a>
<a href="###" class="ax-btn ax-primary ax-xs">导出EXCEL</a>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',lamp:'left'">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',lamp:'top'">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',lamp:'bottom'">
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<div class="ax-panel-body ax-padding ax-xl">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',arrow:{enable:false}" axTab>
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
<span class="ax-btn-group ax-tab-nav" header><a href="###" class="ax-btn ax-xs" active>唐朝</a><a href="###" class="ax-btn ax-xs">宋朝</a><a href="###" class="ax-btn ax-xs">元朝</a></span>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<ul class="ax-panel-body ax-padding ax-xl" body>
<li>隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。</li>
<li>宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。</li>
<li>元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。</li>
</ul>
</div>
<div class="ax-break"></div>
<div class="ax-panel" axPanel="type:'box',arrow:{enable:false}" axTab>
<div class="ax-panel-header">
<div outer>
<section inner>
<div caption><i label>关于中国</i></div>
<div class="ax-lamp-group" header>
<a href="###" active>唐朝</a>
<a href="###">宋朝</a>
<a href="###">元朝</a>
</div>
</section>
<section tip>副标题或简介</section>
</div>
</div>
<ul class="ax-panel-body ax-padding ax-xl" body>
<li>隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。</li>
<li>宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。</li>
<li>元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。</li>
</ul>
</div>
嵌套使用
在ax-panel-body中可重复使用ax-panel以实现嵌套。
关于中国
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
人口规模
中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
<div class="ax-panel" axPanel>
<div class="ax-panel-header">
<div caption><i label>关于中国</i></div>
</div>
<hr/>
<div class="ax-panel-body">
<div class="ax-article">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</div>
<div class="ax-panel ax-margin" axPanel>
<div class="ax-panel-header">
<div caption><i label>人口规模</i></div>
</div>
<hr/>
<div class="ax-panel-body">
<div class="ax-article">中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</div>
</div>
</div>
</div>
</div>
与axSlider轮播整合
在panel节点中构建slider所需的ax-slider、ax-slider-wrapper、ax-slider-prev、ax-slider-next和ax-slider-pagination节点可使用axSlider插件。关于axSlider的更多用法请点击这里。
关于中国slider轮播
-
<div class="ax-panel ax-margin" axPanel="arrow:{enable:false}"> <div class="ax-panel-header"> <div caption><i label>关于中国</i><i tip>slider轮播</i></div> <div class="ax-slider-navigation"> <i class="ax-slider-prev" id="naviPrev">left</i> <span class="ax-slider-pagination" id="pagiOuter"></span> <i class="ax-slider-next" id="naviNext">right</i> </div> </div> <hr/> <div class="ax-panel-body ax-article"> <div class="ax-slider axis-x" axSlider="navigation:{enable:true,prev:{selector:'#naviPrev'},next:{selector:'#naviNext'}},pagination:{enable:true,selector:'#pagiOuter'}"> <ul class="ax-slider-wrapper"> <li class="ax-slide ax-align-origin">Slide 1</li> <li class="ax-slide ax-align-origin">Slide 2</li> <li class="ax-slide ax-align-origin">Slide 3</li> <li class="ax-slide ax-align-origin">Slide 4</li> </div> </div> </div> </div> -
<style> . ax-slider{ height:300px; } .ax-slider li{ height:100%; background-color: #f5f5f5; } </style>
色彩主题
对panel或box类型的面板可使用多种主题颜色。支持两大系列主题色：深色系和浅色系。
- 深色系，对ax-panel追加
ax-bg-*类，支持ax-bg-primary、ax-bg-success、ax-bg-error、ax-bg-info、ax-bg-warning、ax-bg-question、ax-bg-text - 浅色系，对ax-panel追加
ax-bglit-*类，支持ax-bglit-primary、ax-bglit-success、ax-bglit-error、ax-bglit-info、ax-bglit-warning、ax-bglit-question、ax-bglit-text
<div class="ax-panel ax-bg-primary" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bg-secondary" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bg-success" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bg-error" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bg-info" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bg-warning" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bg-question" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bg-text" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bglit-primary" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bglit-success" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bglit-error" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bglit-info" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bglit-warning" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bglit-question" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
<div class="ax-break"></div>
<div class="ax-panel ax-bglit-text" axPanel>
<div class="ax-panel-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div caption><i label>加上头像</i><i tip>拥有5000年历史的文明古国</i></div>
<span tools><a href="###" class="ax-iconfont ax-icon-edit"></a><a href="###" class="ax-iconfont ax-icon-close"></a></span>
</div>
<hr/>
<div class="ax-panel-body ax-article">
内容部分
</div>
</div>
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.targetDom：panel节点this.headerDom：头部节点this.bodyDom：内容节点this.arrowDom：指示箭头节点this.expanded：展开状态，false或truethis.location：panel节点相对位置，是参照对象{parent:'',brother:''}
内部操作方法如下：
this.expand(callback)：展开内容，支持回调函数，回调无参数this.collapse(callback)：折叠内容，支持回调函数，回调无参数this.remove(callback)：移除panel节点，支持回调函数，回调无参数this.restore(callback)：恢复panel节点，支持回调函数，回调无参数
-
<div class="ax-panel" id="methodIns"> <div class="ax-panel-header"> <div caption><i label>关于中国</i></div> </div> <hr/> <div class="ax-panel-body ax-article"> 内容部分 </li> </div> </div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="collapseBtn">折叠</a> <a href="###" class="ax-btn" id="expandBtn">展开</a> <a href="###" class="ax-btn" id="removeBtn">移除</a> <a href="###" class="ax-btn" id="restoreBtn">恢复</a> -
let methodIns = new axPanel('#methodIns'), expandBtn = document.querySelector('#expandBtn'), collapseBtn = document.querySelector('#collapseBtn'), removeBtn = document.querySelector('#removeBtn'), restoreBtn = document.querySelector('#restoreBtn'); collapseBtn.onclick = () => { methodIns.collapse(); } expandBtn.onclick = () => { methodIns.expand(); } removeBtn.onclick = () => { methodIns.remove(); } restoreBtn.onclick = () => { methodIns.restore(); }
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit初始化后执行，无参数onExpanded/expanded展开内容后执行，无参数onCollapsed/collapsed折叠内容后执行，无参数onRemove/remove移除panel节点后执行，无参数onRestore/restore恢复panel节点后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
关于中国
内容部分
-
<div class="ax-panel" id="onIns"> <div class="ax-panel-header"> <div caption><i label>关于中国</i></div> </div> <hr/> <div class="ax-panel-body ax-article"> 内容部分 </li> </div> </div> -
let onIns = new axPanel('#onIns'); onIns.on('expanded',()=>{ console.log('展开了') }).on('collapsed',()=>{ console.log('折叠了') });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axPanel('#id',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
type: 'panel',//该插件是panel和box两类面板共用的，默认是panel类型，可选box
display: '',//body部分的显示方式，默认为block，该参数需要跟随css，如果css中定义为flex，那么该参数则需要写为flex
expanded: true,//初始化是否是展开状态，默认true是展开，可选择false初始化折叠
headerClosable: false,//是否让整个头部可点击切换内容，默认false，可选择true
arrow: {
enable: true,//是否显示指示箭头，默认true显示，可填false不显示
rotate: 180,//指示箭头的旋转角度，可填0、90或180；如果填0表示不旋转，为了表示打开和关闭，那么iconClose和iconOpen应该不同
iconClose: 'ax-icon-down',//指示箭头折叠图标class类名
iconOpen: 'ax-icon-down',//指示箭头展开图标class类名
position: 'end',//指示箭头所在位置，默认end即在末尾，可选择begin在标题前面
},
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '',//回调函数，初始化后执行，无参数
onCollapsed: '',//回调函数，折叠后执行，支持回调函数，无参数
onExpanded: '',//回调函数，展开后执行，支持回调函数，无参数
onRemove: '',//回调函数，删除panel节点后执行，支持回调函数，无参数
onRestore: '',//回调函数，恢复panel节点后执行，支持回调函数，无参数
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"