1. 程式人生 > >weui學習總結——1、weui表單常用標籤

weui學習總結——1、weui表單常用標籤

前言:weui是一個專門用於開發手機移動web或微信的樣式庫。但是官方只提供了demo沒有提供相關文件,所以這篇部落格就當是方便以後開發而使用吧。
weui資源下載(也可以從官網下載):
http://download.csdn.net/download/zhengyikuangge/9940737

  • 手機移動web開發必須要做的兩點:1、body中加上ontouchstart,即<body ontouchstart>...</body>;2、頁面上加入<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  • 該部落格中所描述的程式碼只需要匯入weui.css即可,例如:<link rel="stylesheet" href="weui.css" />
  • weui.css在上述weui資源中有,請自行下載。大約是在weui-1.1.2\dist\example 路徑下。也可到我的百度網盤下載,連結:http://pan.baidu.com/s/1cFAHNS 密碼:iq4d。

  • 該部落格中的程式碼原理上只是修改了html標籤中的class而已,請大家對照效果圖和程式碼。

按鈕

效果圖如下:

這裡寫圖片描述

普通按鈕

<a class="weui-btn weui-btn_primary"
>
普通按鈕</a>

重新整理按鈕

<a class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i></a>

不可點按鈕

<a class="weui-btn weui-btn_disabled weui-btn_primary">不可點按鈕</a>

小按鈕

<a class="weui-btn weui-btn_mini weui-btn_primary">按鈕</a
>
<a class="weui-btn weui-btn_mini weui-btn_default">按鈕</a> <a class="weui-btn weui-btn_mini weui-btn_warn">按鈕</a>
  • 注:都可以按照自己的需要改css屬性也可以,比如修改按鈕的顏色,程式碼如下:
<a class="weui-btn weui-btn_primary" style="background:yellow">普通按鈕</a>

Input

效果圖如下:
這裡寫圖片描述
這裡寫圖片描述

單選

<div class="weui-cells weui-cells_radio">
            <label class="weui-cell weui-check__label" for="x11">
                <div class="weui-cell__bd">
                    <p>1111</p>
                </div>
                <div class="weui-cell__ft">
                    <input type="radio" class="weui-check" name="radio1" id="x11"/>
                    <span class="weui-icon-checked"></span>
                </div>
            </label>
            <label class="weui-cell weui-check__label" for="x12">

                <div class="weui-cell__bd">
                    <p>2222</p>
                </div>
                <div class="weui-cell__ft">
                <!-- 注意checked屬性,可以獲取checked屬性的值判斷是否被選擇 -->
                    <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked"/>
                    <span class="weui-icon-checked"></span>
                </div>
            </label>

 </div>

多選

<div class="weui-cells weui-cells_checkbox">
            <label class="weui-cell weui-check__label" for="s11">
                <div class="weui-cell__hd">
                <!-- 注意checked屬性,可以獲取checked屬性的值判斷是否被選擇 -->
                    <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"/>
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>standard is dealt for u.</p>
                </div>
            </label>
            <label class="weui-cell weui-check__label" for="s12">
                <div class="weui-cell__hd">
                    <input type="checkbox" name="checkbox1" class="weui-check" id="s12"/>
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>standard is dealicient for u.</p>
                </div>
            </label>

</div>

表單內容

<div class="weui-cells weui-cells_form">
<div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">qq</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" pattern="[0-9]*" placeholder="請輸入qq號"/>
                </div>
            </div>
<div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="date" value=""/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">時間</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="datetime-local" value="" placeholder=""/>
                </div>
            </div>

</div>

開關

<div class="weui-cell weui-cell_switch">
                <div class="weui-cell__bd">標題文字</div>
                <div class="weui-cell__ft">
                    <input class="weui-switch" type="checkbox" checked="checked"/>
                </div>
</div>

文字框

<div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="請輸入文字"/>
                </div>
            </div>
</div>

文字域

<div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="請輸入文字" rows="3" id="textarea"></textarea>
                    <div class="weui-textarea-counter" id="shownumber">0/200</div>
                </div>
            </div>
</div>

選擇(select)

<div class="weui-cell weui-cell_select">
                <div class="weui-cell__bd">
                    <select class="weui-select" name="select1">
                        <option selected="" value="1">微訊號</option>
                        <option value="2">QQ號</option>
                        <option value="3">Email</option>
                    </select>
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">國家/地區</label>
                </div>
                <div class="weui-cell__bd">
                    <select class="weui-select" name="select2">
                        <option value="1">中國</option>
                        <option value="2">美國</option>
                        <option value="3">英國</option>
                    </select>
                </div>
</div>

閱讀並同意《相關條款》

<label for="weuiAgree" class="weui-agree">
            <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/>
            <span class="weui-agree__text">
                閱讀並同意<a href="javascript:void(0);">《相關條款》</a>
            </span>
</label>