关于jQuery中的一些组件的使用

1.表单

当我们需要做一些这种页面时，我们可以借鉴jQuery中的表单，它这里面有一个固定的模板，可以套用

2.导航栏和tabbar的结合

效果如图：

代码如下：

<!--容器-->
<div class="weui-tab">
    <div class="weui-navbar">
        <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
            选项一
        </a>
        <a class="weui-navbar__item" href="#tab2">
            选项二
        </a>
        <a class="weui-navbar__item" href="#tab3">
            选项三
        </a>
    </div>
    <div class="weui-tab__bd">
        <!--选项一-->
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
            <div class="weui-form">
                <div class="weui-form__control-area">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__hd">
                                <label class="weui-label">姓&emsp;&emsp;名</label>
                            </div>
                            <div class="weui-cell__bd">
                                <input name="name" class="weui-input" placeholder="请输入姓名" maxlength="4"/>
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__hd">
                                <label class="weui-label">手机号码</label>
                            </div>
                            <div class="weui-cell__bd">
                                <input name="phone" class="weui-input" placeholder="请输入电话号码"/>
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__hd">
                                <label class="weui-label">联系邮箱</label>
                            </div>
                            <div class="weui-cell__bd">
                                <input name="mail" class="weui-input" placeholder="请填写邮箱地址"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--选项二-->
        <div id="tab2" class="weui-tab__bd-item">。。。。</div>
        <!--选项三-->
        <div id="tab3" class="weui-tab__bd-item">。。。。</div>
</div>
    <div class="bottom">
        <div class="weui-tabbar">
            <a href="tab1.html" class="weui-tabbar__item ">//href中填写当你点击这个tab时需要显示的相对应的页面
                <img src="../img/app2.png" alt="" class="weui-tabbar__icon ">
                <p class="weui-tabbar__label">tab1</p>
            </a>
            <a href="tab2.html" class="weui-tabbar__item">
                <img src="../img/info2.png" alt="" class="weui-tabbar__icon weui-bar__item_on">
                <p class="weui-tabbar__label">tab2</p>
            </a>
            <a href="tab3.html" class="weui-tabbar__item">
                <img src="../img/app2.png" alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">tab3</p>
            </a>
        </div>
    </div>

3.select组件

select是jQuery中的拓展组件，Select 是一种支持单选或者多选的弹出层，它可以用来代替原生的 select 元素提供更好更一致的用户体验。Select 是一个JS组件，只能通过JS方法来调用.

基本用法如下：

$("#job").select({
  title: "选择职业",
  items: ["法官", "医生", "猎人", "学生", "记者", "其他"]
});

我们将这个和第一个表单进行结合就可以得到利用这样的效果，列表项是从下面弹出来的，更加符合我们使用手机选择时的习惯

 

4.日历

这个也是jQuery中的拓展组件

可参见链接：http://jqweui.com/extends#calendar