×

表单 - 跨平台移动前端框架AUI 2.0

作者:admin2016.09.20来源:Web前端之家浏览:18951评论:0
关键词:AUI2.0移动框架
微信公众号

微信公众号

aui.png

上一篇主要是大概介绍到了AUI2.0的中级篇,主要包括:信息条、按钮、标签/角标/圆点、列表布局,媒体列表,今天主要想分享下AUI2.0的表单用法。我们可以回顾下上一篇:  中级篇 - 跨平台移动前端框架AUI 2.0

aui-form-list是与aui-list结合实现的表单列表的布局形式

代码如下:

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-form-list">
        <li class="aui-list-header">带有输入框</li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Text
                </div>
                <div class="aui-list-item-input">
                    <input type="text" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Password
                </div>
                <div class="aui-list-item-input">
                    <input type="password" placeholder="Password">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Number
                </div>
                <div class="aui-list-item-input">
                    <input type="number" placeholder="Number">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Radio
                </div>
                <div class="aui-list-item-input">
                    <label><input class="aui-radio" type="radio" name="demo1" checked> 选项一</label>
                    <label><input class="aui-radio" type="radio" name="demo1"> 选项二</label>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Select
                </div>
                <div class="aui-list-item-input">
                    <select>
                        <option>Option1</option>
                        <option>Option2</option>
                        <option>Option3</option>
                    </select>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Switch
                </div>
                <div class="aui-list-item-input">
                    <input type="checkbox" class="aui-switch" checked>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Range
                </div>
                <div class="aui-list-item-input">
                    <div class="aui-range">
                        <input type="range" class="aui-range" value="30" max="100" min="1" step="1" id="range" />
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Textarea
                </div>
                <div class="aui-list-item-input">
                    <textarea placeholder="Textarea"></textarea>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
                <div class="aui-btn aui-btn-info aui-margin-r-5">提交</div>
                <div class="aui-btn aui-btn-danger aui-margin-l-5">取消</div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-form-list">
        <li class="aui-list-header">带有图标的表单</li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mobile"></i>
                </div>
                <div class="aui-list-item-input">
                    <input type="text" placeholder="username">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-lock"></i>
                </div>
                <div class="aui-list-item-input">
                    <input type="password" placeholder="password">
                </div>
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-display"></i>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-select-list">
        <li class="aui-list-header">带有单选或多选框的列表</li>
        <li class="aui-list-item">
            <div class="aui-list-item-label">
                <input class="aui-radio" type="radio" name="radio" checked>
            </div>
            <div class="aui-list-item-inner">
                这是一个列表项
                <div class="aui-list-item-text">
                    这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" type="radio" name="radio" checked> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" disabled type="radio" name="radio"> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" type="radio" name="radio"> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" type="radio" name="radio2" checked> 选项一</label>
                <label><input class="aui-radio" type="radio" name="radio2"> 选项二</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-checkbox" type="radio" name="checkbox" checked> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-checkbox" disabled checked="" type="radio" name="checkbox"> 禁止选择</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-checkbox" type="radio" name="checkbox"> 这是一个列表项</label>
            </div>
        </li>
    </ul>
</div>

猛击:DEMO

aui-select-list和aui-list结合可以实现带有选择器的列表布局样式

33.png

代码如下:

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-select-list">
        <li class="aui-list-header">带有单选或多选框的列表</li>
        <li class="aui-list-item">
            <div class="aui-list-item-label">
                <input class="aui-radio" type="radio" name="radio" checked>
            </div>
            <div class="aui-list-item-inner">
                这是一个列表项
                <div class="aui-list-item-text">
                    这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" type="radio" name="radio" checked> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" disabled type="radio" name="radio"> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" type="radio" name="radio"> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-radio" type="radio" name="radio2" checked> 选项一</label>
                <label><input class="aui-radio" type="radio" name="radio2"> 选项二</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-checkbox" type="radio" name="checkbox" checked> 这是一个列表项</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-checkbox" disabled checked="" type="radio" name="checkbox"> 禁止选择</label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label><input class="aui-checkbox" type="radio" name="checkbox"> 这是一个列表项</label>
            </div>
        </li>
    </ul>
</div>

效果如下:

猛击:DEMO

总结

这就是今天要分享的AUI2.0表单的基础知识,是不是很简单呢,下一节排版列表和布局。

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/mobile-aui4.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

  • 男装品牌

    文章不错支持一下...

  • 女装品牌

    文章不错非常喜欢...

  • admin

    可以啊,请加群私聊。...

  • 访客

    换链接:http://davin.xin/pc/navigation...

  • 访客

    alert('哈哈')...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero