Azzip UI - js插件

日历控件 动感提示 对话框 点击看大图

日历控件 pz-datetime

日期+时间

日期

给input添加classpz-datetime就会自动启用日期+时间选择器

给input添加classpz-date就会自动启用日期选择器

动感提示 pz-tooltip



一段表单验证提示:

姓名:

密码:

给任意非div的元素设置class包含pz-tooltip，即可自动实现动感提示，提示的内容是这个元素的title

 

给一个div设置class包含pz-tooltip，可以让元素内部的input:text, input:password, textarea, select自动附加右侧动感提示，提示的内容是表单元素的title

对话框 pz-dialog

点我打开对话框   打开另一个对话框

给a, button, input类元素设置class包含pz-dialog-trigger，即可自动实现对话框功能，被启动的对话框是由trigger元素的rel="#abc"决定，这例中，点击trigger将自动弹出div#abc这个对话框

对话框的class必须包含pz-dialog

 

对话框内的布局实例如下：

<div class="pz-dialog" id="open-me" style="display:none;">
    <h2>这是标题 h2</h2>
    <p>一段输入的内容asdfr</p>
    <p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    <div class="pz-dialog-footer">
        <input type="button" value="取消" class="close pz-btn" />
        <input type="button" value=" 确定 " class="close pz-btn pz-btn-reverse" />
    </div>
</div>

点击看大图 pz-popshow

基本上跟pz-dialog实现形式一样。

用.pz-popshow-trigger的rel="#abc"控制div.pz-dialog id="abc"

 

点击看大图的布局实例如下：

<a href="javascript:;" class="pz-popshow-trigger" rel="#popshow-01"><img src="assets/img/square04.jpg" /></a>

<div class="pz-popshow" id="popshow-01" style="display:none;">
    <img src="assets/img/rectangle04-01.jpg" />
    <div class="pz-popshow-detail">
        <h2>这是一个大标题 h2</h2>
        <p>详细的描述 The Gustavo House in Storkower Strasse.</p>
    </div>
</div>