365体育备用网址报道7.2.1元素类型_365体育备用网址官网资讯

ActionSheet
ActionSheet用于显示包含一系列可交互的动作集合,包括说明、跳转等。由底部弹出,一般用于响应用户对页面的点击。

<div id="actionSheet_wrap">
    <div class="weui_mask_transition" id="mask"></div>
    <div class="weui_actionsheet" id="weui_actionsheet">
        <div class="weui_actionsheet_menu">
            <div class="weui_actionsheet_cell">示例菜单</div>
            <div class="weui_actionsheet_cell">示例菜单</div>
            <div class="weui_actionsheet_cell">示例菜单</div>
            <div class="weui_actionsheet_cell">示例菜单</div>
        </div>
        <div class="weui_actionsheet_action">
            <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
        </div>
    </div>
</div>

ActionSheet的效果如图7-9所示。

图7-9ActionSheet
Article
文字视图显示大段文字,这些文字通常是页面上的主体内容。Article撑腰分段、多层标题、引用、内嵌通博娱乐最新网站 官方网站、有/无序列表等富文本样式,并可响应用户的选择操作。

<article class="weui_article">
    <h1>大标题</h1>
    <section>
        <h2 class="title">章标题</h2>
        <section>
            <h3>1.1 节标题</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 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. Duis aute</p>
        </section>
        <section>
            <h3>1.2 节标题</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </section>
</article>

Article的效果如图7-10所示。

图7-10Article
Button
按钮能够使用a或者button标签。wap上要触发按钮的active态,必须触发ontouchstart事情,能够在body上加上ontouchstart=""全局触发。
按钮常见的操作场景:确定、取消、警示,分别对应class:weui_btn_primary、weui_btn_default、weui_btn_warn,每种场景都有自己的置灰态weui_btn_disabled,除此外还有一种镂空按钮weui_btn_plain_xxx,客户端webview里的按钮尺寸有两类,默认宽度100%,小型按钮宽度自适应,两边边框与文本间距0.75em。

<a href="JavaScript:;" class="weui_btn weui_btn_primary">按钮</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
<a href="javascript:;" class="weui_btn weui_btn_warn">确认</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
<a href="javascript:;" class="weui_btn weui_btn_default">按钮</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
<div class="button_sp_area">
    <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
</div>

Button的效果如图7-11所示。

图7-11Button
Cell
Cell,列表视图,用于将信息以列表的结构显示在页面上,是wap上最常用的内容结构。Cell由多个section组成,每个section包括section headerweui_cells_title以及cellsweui_cells。
cell由thumbnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft三部分组成,cell采纳自适应布局,在需要自适应的部分加上classweui_cell_primary即可。

<div class="weui_cells_title">带图标、说明、跳转的列表项</div>
<div class="weui_cells weui_cells_access">
    <a class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>cell standard</p>
        </div>
        <div class="weui_cell_ft">
            说明文字
        </div>
    </a>
    <a class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>cell standard</p>
        </div>
        <div class="weui_cell_ft">
            说明文字
        </div>
    </a>
</div>

Cell的效果如图7-12所示。

图7-12Cell
Dialog
Dialog,也叫“modal”,体现为带遮罩的弹框。能够分为 Alert 和 Confirm 两种。
Alert,警告弹框,功能类似于扫瞄器自带的 alert 弹框,用于提醒、警告用户简单扼要的信息,只有一个“确认”按钮,点击“确认”按钮后关闭弹框。
Confirm,确认弹框,功能类似于扫瞄器自带的 confirm 和 prompt 的集合,能够用于让用户确认/取消确认,也能够让用户填写表单。

<div class="weui_dialog_confirm">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd">
          <strong class="weui_dialog_title">弹窗标题</strong>
        </div>
        <div class="weui_dialog_bd">自定义弹窗内容<br>...</div>
        <div class="weui_dialog_ft">
            <a href="javascript:;" class="weui_btn_dialog default">取消</a>
            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
        </div>
    </div>
</div>

Dialog的效果如图7-13所示。

图7-13Dialog
Form
Form,表单,能够分成“输入型”和“选择型”两种。输入型包括单行文本(文本、数值、电话、密码等)、多行文本;选择型包括下拉选择、单选、多选、开关、日期时间等。在 WeUI 中,表单通常与 Cell 组件配合使用。
Label表单字段,都需要告知用户该字段的含义,除了能够通过 placeholder 属性外,还能够使用 label ,放在表单元素左边,明确说明表单的含义。
Input 输入框,是表单中最常见的元素,体现为单行文本输入框,能够指定输入类型为文本(text)、数值(number)、电话(tel)、密码(password)等。WebView 默认的输入框样式不统一且不太美观,所以 WeUI 通过类名 .weui_input 来设置单行输入框的样式,使其更符合微信风格、体验更佳。
Textarea,文本域,用作输入多行文本。不同于 Input,在 WeUI 的设计中,文本域没有 label ,在 placeholder 中提示用户输入信息即可。通常,输入多行文本时,都有字数限制,WeUI 提供了相应的样式配合使用。
Radio,单选框,在 WeUI 的设计中,单选框列表通常是独立一组的,推举左边文字,右边选中图标,用户只能选择其中一个选项。默认通过 label 标签的 for 属性来关联,无需额外编写 javascript 代码来实现切换选中的效果。
Checkbox,复选框,与 Radio 类似,默认也是通过 label 标签的 for 属性来关联选择。不同的是,Checkbox 同意用户同时选择多个选项,推举选中图标放在左边。
Select,选择框,功能与 Radio 类似,是提供一组选项,让用户选择其中一个。不同的是,这些选项默认是隐藏起来的,当用户点击时,才会展开来让用户选择。通常是在选项较多、或选项不太重要,不需要展示出来时使用。
Switch,开关,只有两个状态,用于让用户选择“开启”还是“关闭”。使用起来很简单,只需要给 input 标签加上 .weui_switch 类即可。
Uploader,上传组件。通博娱乐最新网站 官方网站的展示已background-image写在.weui_uploader_file里,默认是background-size:cover。上传中的状态需要为.weui_uploader_file添加.weui_uploader_status。icon或文字都可放到它的子元素.weui_uploader_status_content里面,它是上下左右居中。
Form的效果如图7-14所示。

图7-14Form

Grid
Grid 九宫格,功能类似于微信钱包界面中的九宫格,用于展示有多个相同级别的入口。包含功能的图标和简洁的文字描述。

<div class="weui_grids">
    <a href="javascript:;" class="weui_grid">
        <div class="weui_grid_icon">
            <img src="./images/icon_nav_button.png" alt="">
        </div>
        <p class="weui_grid_label">
            Button
        </p>
    </a>
    <a href="javascript:;" class="weui_grid">
        <div class="weui_grid_icon">
            <img src="./images/icon_nav_cell.png" alt="">
        </div>
        <p class="weui_grid_label">
            Cell
        </p>
    </a>
</div>

Grid的效果如图7-15所示。

图7-15Grid
Msg Page
结果页通常来说能够认为进行一系列操作步骤后,作为流程结束的总结性页面。结果页的作用主要是告知用户操作处置结果以及必要的相关细节(可用于确认之前的操作是否有误)等信息;若该流程用于开启或关闭某些重要功能,可在结果页增加与该功能相关的描述性内容;除此之外,结果页也能够承载一些附加价值操作,例如提供抽奖、关切公众号等功能入口。

<div class="weui_msg">
    <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
    <div class="weui_text_area">
        <h2 class="weui_msg_title">操作胜利</h2>
        <p class="weui_msg_desc">内容详情,可依据实际需要安置</p>
    </div>
    <div class="weui_opr_area">
        <p class="weui_btn_area">
            <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
            <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
        </p>
    </div>
    <div class="weui_extra_area">
        <a href="">察看详情</a>
    </div>
</div>

Msg Page的效果如图7-16所示。

图7-16Msg Page

<div class="weui_tab">
    <div class="weui_navbar">
        <div class="weui_navbar_item weui_bar_item_on">
            选项一
        </div>
        <div class="weui_navbar_item">
            选项二
        </div>
        <div class="weui_navbar_item">
            选项三
        </div>
    </div>
    <div class="weui_tab_bd">
    </div>
</div>

Navbar的效果如图7-17所示。

图7-17Navbar
Panel
weui_panel由head(可选)、body、foot(可选)三部分组成,主要承载了图文组合列表weui_media_appmsg、文字组合列表weui_media_text以及小图文组合列表weui_media_text。
body部分依据不同业务可自定义不同的内容。foot部分默认撑腰“察看永利娱乐城是真的吗”的样式,需要在weui_panel扩展一个weui_panel_access的类。

<div class="weui_panel weui_panel_access">
    XML" style="box-sizing: inherit; margin: 0px; padding: 0px;"><div class="weui_panel_hd">图文组合列表</div>
    <div class="weui_panel_bd">
        <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
            <div class="weui_media_hd">
                <img class="weui_media_appmsg_thumb" src="" alt="">
            </div>
            <div class="weui_media_bd">
                <h4 class="weui_media_title">标题一</h4>
                <p class="weui_media_desc">由各种物质组成的巨型球状天体,叫做星球。星球有肯定的形状,有自己的运行轨道。</p>
            </div>
        </a>
        <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
            <div class="weui_media_hd">
                <img class="weui_media_appmsg_thumb" src="" alt="">
            </div>
            <div class="weui_media_bd">
                <h4 class="weui_media_title">标题二</h4>
                <p class="weui_media_desc">由各种物质组成的巨型球状天体,叫做星球。星球有肯定的形状,有自己的运行轨道。</p>
            </div>
        </a>
    </div>
    <a class="weui_panel_ft" href="javascript:void(0);">察看永利娱乐城是真的吗</a>
</div>

Panel的效果如图7-18所示。

图7-18Panel
Progress
Progress,进度条,用于上传、下载等耗时并且需要显示进度的场景,用户能够随时中断该操作。

<div class="container">
  <div class="weui_progress">
      <div class="weui_progress_bar">
          <div class="weui_progress_inner_bar" style="width: 50%;"></div>
      </div>
      <a href="javascript:;" class="weui_progress_opr">
          <i class="weui_icon_cancel"></i>
      </a>
  </div>
</div>

下面模拟改变进度条的值:

$(function(){
    var progress = 0;
    var $progress = $('.weui_progress_inner_bar');

    function uploading(){
        $progress.width(++progress % 100 + '%');
        setTimeout(uploading, 20);
    }

    setTimeout(uploading, 20);
});

Progress的效果如图7-19所示。

图7-19Progress
Tabbar
tabbar,底部导航,通常用作 Web 应用的主界面底部导航,类似于微信主界面的底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。

<div class="weui_tab">
    <div class="weui_tab_bd">

    </div>
    <div class="weui_tabbar">
        <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
            <div class="weui_tabbar_icon">
                <img src="path/to/images/icon_nav_button.png" alt="">
            </div>
            <p class="weui_tabbar_label">微信</p>
        </a>
        <a href="javascript:;" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="path/to/images/icon_nav_msg.png" alt="">
            </div>
            <p class="weui_tabbar_label">通讯录</p>
        </a>
        <a href="javascript:;" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="path/to/images/icon_nav_article.png" alt="">
            </div>
            <p class="weui_tabbar_label">发现</p>
        </a>
        <a href="javascript:;" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="path/to/images/icon_nav_cell.png" alt="">
            </div>
            <p class="weui_tabbar_label">我</p>
        </a>
    </div>
</div>

Tabbar的效果如图7-20所示。

图7-20Tabbar
Toast
toast 用于临时显示某些信息,并且会在数秒后主动消逝。这些信息通常是轻量级操作的胜利信息。

<div id="toast" style="display: none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content">已完成</p>
    </div>
</div>

Toast的效果如图7-21所示。

图7-21Toast
SearchBar
searchBar 搜索栏,类似于微信原生的搜索栏,应用于常见的搜索场景。

<div class="weui_search_bar" id="search_bar">
    <form class="weui_search_outer">
        <div class="weui_search_inner">
            <i class="weui_icon_search"></i>
            <input type="search" class="weui_search_input" id="search_input" placeholder="搜索" required/>
            <a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
        </div>
        <label for="search_input" class="weui_search_text" id="search_text">
            <i class="weui_icon_search"></i>
            <span>搜索</span>
        </label>
    </form>
    <a href="javascript:" class="weui_search_cancel" id="search_cancel">取消</a>
</div>

SearchBar的效果如图7-22所示。

图7-22SearchBar

------分隔线----------------------------

公布评论 (132人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换通博娱乐最新网站 官方网站
最新评论