Azzip UI - 组件

按钮组 菜单 标签页 标记和徽章 图片框 警告框

按钮组 pz-btn-group

使用<a>或<input type="button">标签制作按钮

不推荐<button>标签，因为老浏览器有兼容问题

 

使用class="pz-btn-group"包围一组按钮，如下:

小白 小白白 小红 小绿

结构如下:

<div class="pz-btn-group">
    <a href="xx" class="pz-btn">小白</a>
    ......
</div>

仿工具栏的效果，如下:

小白 小红 小绿
小2 小白3 小小白
小白 小白2

结构如下:

<div class="pz-btn-group">
    <a href="xx" class="pz-btn">小白</a>
    ......
</div> 
<div class="pz-btn-group">
    <a href="xx" class="pz-btn">小2</a>
    ......
</div>
 
<ul class="pz-submenu">
    <li><a href="javascript:;">这是菜单</a></li>
    <li><a href="javascript:;">Hello</a></li>
    <li><span>你好，我不是链接</span></li>
    <li><a href="javascript:;">World</a></li>
    <li class="pz-submenu-gap"></li>
    <li><a href="javascript:;">Azzip</a></li>
</ul>

下拉菜单 pz-submenu

点击我看看   向上的菜单 
<a href="javascript:;" class="pz-btn pz-btn-submit" 
    rel="menu-down">点击我看看 <i class="icon-caret-down"></i></a>
<ul class="pz-submenu" style="display:none">
    <li>...</li>
</ul>

<a href="javascript:;" class="pz-btn pz-btn-submit" 
    rel="menu-up">向上的菜单 <i class="icon-caret-down"></i></a>
<ul class="pz-submenu" style="display:none">
    <li>...</li>
</ul>

标签页 pz-tab-header pz-tab

tab1 标签2 标签3


  tab1 content



  tab2的内容



  tab3的内容

<div class="pz-tab-header clearfix">
    <a href="javascript:;" class="link-on">tab1</a>
    <a href="javascript:;">标签2</a>
    <a href="javascript:;">标签3</a>
</div>
<div class="pz-box pz-tab">tab1 content</div>
<div class="pz-box pz-tab">tab2的内容</div>
<div class="pz-box pz-tab">tab3的内容</div>

标记和徽章 pz-tag pz-badge

普通标记 span.pz-tag
反色标记 span.pz-tag.pz-tag-reverse
成功标记 span.pz-tag.pz-tag-success
警告标记 span.pz-tag.pz-tag-warning
危险操作 span.pz-tag.pz-tag-danger
信息 span.pz-tag.pz-tag-info
提交信息 span.pz-tag.pz-tag-submit
普通徽章 span.pz-badge
反色徽章 span.pz-badge.pz-badge-reverse
成功徽章 span.pz-badge.pz-badge-success
警告徽章 span.pz-badge.pz-badge-warning
危险操作徽章 span.pz-badge.pz-badge-danger
信息徽章 span.pz-badge.pz-badge-info
提交徽章 span.pz-badge.pz-badge-submit

图片框 pz-thumb

  • 260x180
  • 260x180

使用<a class="pz-thumb" href="xx"><img src="xxx" /></a>生成一个图片框

如果需要做成图片排列，可以使用<li style="float:left">...pz-thumb...</lt>

警告框 pz-alert

警告框的标题 h3 class="pz-alert"

这是内容 lorem ipsum 用 p 标签

X

成功提示 div class="pz-alert pz-alert-success"

X

错误提示 div class="pz-alert pz-alert-error"

X

信息提示 div class="pz-alert pz-alert-info"

X

代码:

<div class="pz-alert">
    <h3>警告框的标题 h3</h3>
    <p>这是内容 lorem ipsum 用 p 标签</p>
    <a href="javascript:;" class="pz-alert-close">X</a>
</div>

添加提示关闭按钮，在div.pz-alert内部增加代码:

<a href="javascript:;" class="pz-alert-close">X</a>