jQuery WeUI学习笔记一

article/2025/10/9 20:54:37

一　引言

最近在对时间典当行这一公众号进行一个粗浅的学习。涉及到WeUI插件库，就整理以下笔记。

１　jQuery WeUI官网地址：http://jqweui.com/

２　WeUI 目前只包含 CSS 代码，核心文件是weui.css

　　jQuery WeUI = WeUI + jQuery + 大量拓展组件

　　jQuery WeUI 的组件分两部分：

  • 基础组件：weui官方的组件，使用了weui官方的css
  • 拓展组件：jquery weui 专属的组件

３　jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue， 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。

jQuery WeUI 提供了总共30+ 个非常实用的组件：列表，表单，卡片，对话框，下拉刷新等

4  使用 下载好插件，引入文档中即可使用

5  jQuery WeUI的组成，一共有以下导航条目：

所以对于jQuery WeUI的学习，也很简单，一共三个部分。基础组件／扩展组件／部分案例学习。

二、　基础组件

１　九宫格    weui_grids

weui_grid是一个一个的宫格
weui_grid_icon一个宫格的图标
weui_grid_label图标下面的字
举例如下： 
<div class="weui-grids"><a href="" class="weui-grid js_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="" class="weui-grid js_grid"><div class="weui-grid__icon"><img src="images/icon_nav_cell.png" alt=""></div><p class="weui-grid__label">List</p></a>...
</div>

2 页面底部的导航  weui-tabbar

通过点击按钮切换页面的主体内容,一般嵌套在weui_tab内

weui-tab_bd为tab页面的主体内容
weui-tabbar_item为weui-tabbar的子元素，导航区子菜单一般为3-5个
weui-tabbar_icon为每个子菜单的图标
weui-tabbar_label图标下面的文字
weui-bar_item--on每个导航子菜单的active状态
具体使用如下例所示： 
<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"><input type="text" id="a"></div><div class="weui-tabbar"><a href="javascript:;" class="weui-tabbar__item weui-bar__item--on"><span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span><div class="weui-tabbar__icon"><img src="./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="./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="./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="./images/icon_nav_cell.png" alt=""></div><p class="weui-tabbar__label">我</p></a></div>
</div>

自动切换

在正确的HTML结构前提下，给 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一个 .weui-tab__bd-item，即可实现点击的时候自动切换。但是请自行确保初始状态的一致。 
<div class="weui-tab"><div class="weui-tab__bd"><div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active"><h1>页面一</h1></div><div id="tab2" class="weui-tab__bd-item"><h1>页面二</h1></div>...</div><div class="weui-tabbar"><a href="#tab1" class="weui-tabbar__item weui-bar__item--on">...</a><a href="#tab2" class="weui-tabbar__item">...</a>...</div>
</div>

3 栅格 weui-flex

<div class="weui-flex"><div class="weui-flex__item">weui</div><div class="weui-flex__item">weui</div>
</div>

4 按钮 weui-btn_***

按钮可以使用 a 或者 button 标签。

按钮常见的操作场景：确定、取消、警示，分别对应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>
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>

.weui-btn_loading 可以使按钮变为loading状态

5  列表 weui-cells

cell由 thumbnailweui-cell__hd、bodyweui-cell__bd、accessoryweui-cell__ft三部分组成

<div class="weui-cells"><div class="weui-cell"><div class="weui-cell__hd"><img src=""></div><div class="weui-cell__bd"><p>标题文字</p></div><div class="weui-cell__ft">说明文字</div></div><div class="weui-cell"><div class="weui-cell__hd"><img src=""></div><div class="weui-cell__bd"><p>标题文字</p></div><div class="weui-cell__ft">说明文字</div></div>
</div>

运行结果如下：

带链接的列表

<div class="weui-cells"><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__bd"><p>cell standard</p></div><div class="weui-cell__ft"></div></a><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__bd"><p>cell standard</p></div><div class="weui-cell__ft"></div></a>
</div>

只有weui-cell__bd和weui-cell__ft，没有weui-cell__hd。另外，整个weui-cell_**被标签a包围

运行结果如下：

单选列表/复选列表

weui-cells_radio单选列表
weui-cells_checkbox复选列表
weui-icon-checked列表项默认选中
weui-check一个列表项
weui-cell_link文字显示为链接状态

使用如下：

<div class="weui-cells weui-cells_radio"><label class="weui-cell weui-check__label" for="x11"><div class="weui-cell__bd"><p>cell standard</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>cell standard</p></div><div class="weui-cell__ft"><input type="radio" name="radio1" class="weui-check" id="x12" checked="checked"><span class="weui-icon-checked"></span></div></label><a href="javascript:void(0);" class="weui-cell weui-cell_link"><div class="weui-cell__bd">添加更多</div></a>
</div>

6 滑动删除 （ swipeout  ） weui-cell_swiped

Swipeout 可以在列表的某一项中向左滑动出现操作按钮，类似微信聊天列表中的滑动功能。

默认情况下，当页面加载完成后，会自动初始化带有 .weui-cell_swiped 类的列表条目，此时不需要做任何手动初始化。

如果你是动态生成的DOM，或者在JS加载之后的DOM，那么这样初始化:

$('.weui-cell_swiped').swipeout()
你可以手动调用方法来打开或者关闭 
$('.weui-cell__swiped').swipeout('open') //打开
$('.weui-cell__swiped').swipeout('close') //关闭

7  表单 weui-cells__form

表单是基于列表的布局实现的.包括很多常用的表单控件：

weui-label输入标签文字
weui-input输入框样式
weui-cell_vcode

.weui-cell_vcode {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;

weui-cell__warn整个表单报错
weui-icon-warn报错图标
weui-cells__title小标题/占一行
weui-switch切换状态
weui-textarea输入多行文本框
weui-textarea__counter文本框字符限制提示
weui-cells__tips底部说明文字底部说明文字

示例代码如下：

<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 weui-cell_vcode"><div class="weui-cell__hd"><label class="weui-label">手机号</label></div><div class="weui-cell__bd"><input class="weui-input" type="tel" placeholder="请输入手机号"></div><div class="weui-cell__ft"><button class="weui-vcode-btn">获取验证码</button></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 class="weui-cell weui-cell_vcode"><div class="weui-cell__hd"><label class="weui-label">验证码</label></div><div class="weui-cell__bd"><input class="weui-input" type="number" placeholder="请输入验证码"></div><div class="weui-cell__ft"><img class="weui-vcode-img" src="./images/vcode.jpg"></div></div>
</div>
<div class="weui-cells__tips">底部说明文字底部说明文字</div><div class="weui-cells__title">表单报错</div>
<div class="weui-cells weui-cells_form"><div class="weui-cell weui-cell_warn"><div class="weui-cell__hd"><label for="" class="weui-label">卡号</label></div><div class="weui-cell__bd"><input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号"></div><div class="weui-cell__ft"><i class="weui-icon-warn"></i></div></div>
</div>

运行结果如下：


weui-select下拉列表
weui-agree__checkbox同意条款的小方框
weui-btn-areaweui-btn-area { margin: 1.17647059em 15px .3em;}内部用来放置按钮
weui-btn提交按钮样式
       <div class="weui-cell__hd"><select class="weui-select" name="select2"><option value="1">+86</option><option value="2">+80</option><option value="3">+84</option><option value="4">+87</option></select></div><div class="weui-cell__bd"><input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码"></div></div>
</div><div class="weui-cells__title">选择</div><div class="weui-cells"><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></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><div class="weui-btn-area"><a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a></div>

运行结果如下：


8 文件上传

目前文件上传仅有CSS样式，并没有对应的JS插件。

weui-uploader__hd为弹性盒布局
weui-uploader__title.weui-uploader__title { -webkit-box-flex: 1;
                                          -webkit-flex: 1;
                                            flex: 1;}
weui-uploader__files去除图片的li样式
weui-uploader__file放置上传图片，已经规定好图片的宽和高
weui-uploader__file-content图片上放置说明文字
weui-icon-warn图片上传失败图标
weui-uploader__input-box待上传图片区，高宽已经定好，
weui-uploader__input待上传图片区，input框的class

实例代码如下：

<div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__bd"><div class="weui-uploader"><div class="weui-uploader__hd"><p class="weui-uploader__title">图片上传</p><div class="weui-uploader__info">0/2</div></div><div class="weui-uploader__bd"><ul class="weui-uploader__files" id="uploaderFiles"><li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li><li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li><li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li><li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)"><div class="weui-uploader__file-content">失败啦<i class="weui-icon-warn"></i></div></li><li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)"><div class="weui-uploader__file-content">50%</div></li></ul> <div class="weui-uploader__input-box"><input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple=""></div></div></div></div></div></div>

运行结果如下：

9 消息页面

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

weui-msg消息页面类名
weui-msg__icon-area用来放置图标
weui-icon-success weui-icon_msg图标颜色和图标大小
weui-msg__text-area用来放置主体消息
weui-msg__title消息标题
weui-msg__desc消息正文（字体和字体颜色）
weui-msg__extra-area底部链接文本，绝对定位，位于页面最底部
weui-footer底部文字字体大小和字体颜色
weui-footer__text

底部版权信息，小一号字

.weui-footer__text { padding: 0 .34em;
    font-size: 12px;}

实例代码如下：

<div class="weui-msg"><div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div><div class="weui-msg__text-area"><h2 class="weui-msg__title">操作成功</h2><p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p></div><div class="weui-msg__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-msg__extra-area"><div class="weui-footer"><p ><a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a></p><p class="weui-footer__text">Copyright © 2008-2016 weui.io</p></div></div>
</div>

运行结果如下：



10  对话框

若系统的alert窗体无法满足网页的临时视图内容需求，则可以自定义实现与alert形式相似的dialog，并且在dialog中可以自定义地使用各种控件，来满足需求。

Alert

$.alert("自定义的消息内容", "标题", function() {//点击确认后的回调函数
});

代码段如下：

 <a href="javascript:;" id='show-alert' class="weui-btn weui-btn_primary">显示 Alert</a>

js代码：

$(document).on("click", "#show-alert", function() {$.alert("下午写不完作业就不要吃饭", "警告！");});

运行结果如下：


Confirm  显示一段确认消息，有一个确认按钮和一个取消按钮

$.confirm("自定义的消息内容","自定义的标题", function() {//点击确认后的回调函数}, function() {//点击取消后的回调函数});

代码段如下：

 <a href="javascript:;" id='show-confirm' class="weui-btn weui-btn_primary">显示 Confirm</a>

js代码：

 $(document).on("click", "#show-confirm", function() {$.confirm("您确定要取消本次发布吗?", "确认删除?", function() {$.toast("发布已经取消!");}, function() {//取消操作});});

运行结果如下：


Promopt   显示一个带有输入框的对话框,可以让用户输入信息

$.prompt("自定义的消息内容", function(text) {//点击确认后的回调函数//text 是用户输入的内容
}, function() {//点击取消后的回调函数
});
//如果参数过多，建议通过 object 方式传入
$.prompt({title: '标题',text: '内容文案',input: '输入框默认值',empty: false, // 是否允许为空onOK: function (input) {//点击确认},onCancel: function () {//点击取消}
});

代码段如下:

 <a href="javascript:;" id='show-prompt' class="weui-btn weui-btn_primary">显示 Prompt</a>

js代码如下：

$(document).on("click", "#show-prompt", function() {$.prompt({text: "名字不能超过6个字符，不得出现不和谐文字",title: "输入姓名",onOK: function(text) {$.alert("您的名字是:"+text, "角色设定成功");},onCancel: function() {console.log("取消了");},input: 'Mr Noone'});});

运行结果如下：


Login

显示一个登录框：

$.login("自定义的消息内容", function(username, password) {// 这里进行登录操作
}, function() {
});

代码段如下：

 <a href="javascript:;" id='show-login' class="weui-btn weui-btn_primary">显示登录弹窗</a>

js代码如下：

 $(document).on('click', '#show-login', function() {$.login({title: '登录',text: '请输入用户名和密码',onOK: function (username, password) {console.log(username, password);$.toast('登录成功!');},onCancel: function () {$.toast('取消登录!', 'cancel');}});});

运行结果如下：


自定义对话框

上述的三种对话框都是 $.modal 的一种特殊形式。你可以通过 $.modal 来定制对话框:

$.modal({title: "Hello",text: "我是自定义的modal",buttons: [{ text: "支付宝", onClick: function(){ console.log(1)} },{ text: "微信支付", onClick: function(){ console.log(2)} },{ text: "取消", className: "default", onClick: function(){ console.log(3)} },]
});

代码段如下：

  <a href="javascript:;" id='show-custom' class="weui-btn weui-btn_primary">显示自定义对话框</a>

js代码段如下：

 $(document).on("click", "#show-custom", function() {$.modal({title: "Hello",text: "我是自定义的modal",buttons: [{ text: "支付宝", onClick: function(){ $.alert("你选择了支付宝"); } },{ text: "微信支付", onClick: function(){ $.alert("你选择了微信支付"); } },{ text: "取消", className: "default"},]});});

运行结果如下：


11 加载提示

weui-loadmore用来放置加载中的样式
weui-loading加载中的图标
weui-loadmore_line正在加载两边是线型

weui-loadmore_dot

weui-loadmore__tips

二者必须一起使用

.weui-loadmore_dot .weui-loadmore__tips {
    padding: 0 .16em;}

使用实例：

<div class="weui-loadmore"><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span>
</div>
<div class="weui-loadmore weui-loadmore_line"><span class="weui-loadmore__tips">暂无数据</span>
</div>
<div class="weui-loadmore weui-loadmore_line weui-loadmore_dot"><span class="weui-loadmore__tips"></span>
</div>

运行结果如下：

12 ActionSheet

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

ActionSheet 只能通过 JavaScript 进行调用:

通过 $.actions(params) 方法打开 ActionSheet。可用参数如下：

参数名说明
actions菜单项，关于每一个菜单项的配置请参见下文
title可以给弹层设置一个标题，如果不设置则不会显示标题
onClose关闭弹层的回调函数

actions 参数是一个数组，数组中的每一项都是一个菜单。

对每一个菜单的可用配置如下：

参数名说明
text菜单显示的文案
className菜单上额外追加的class
onClick点击之后的回调函数

从 V0.7.0 开始， 可以通过 className 参数配置不同的颜色或者背景

实例代码如下：

  <a href="javascript:;" id='show-actions' class="weui-btn weui-btn_primary">显示 ActionSheet</a>

js代码段如下:

 $(document).on("click", "#show-actions", function() {$.actions({title: "选择操作",onClose: function() {console.log("close");},actions: [{text: "发布",className: "color-primary",onClick: function() {$.alert("发布成功");}},{text: "编辑",className: "color-warning",onClick: function() {$.alert("你选择了“编辑”");}},{text: "删除",className: 'color-danger',onClick: function() {$.alert("你选择了“删除”");}}]});});

运行结果如下：

13 Toast

用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。

Toast 只能通过 JavaScript 进行调用:

$.toast();
$.toast("操作成功");

Toast 有三种模式可以选择，默认是 成功 模式，还有 取消 和 禁止 两种模式:

从 V0.7.1 版本开始，新增了一个纯文本模式。

$.toast("取消操作", "cancel");
$.toast("禁止操作", "forbidden");
$.toast("纯文本", "text");
// 第二个参数可以是时间，单位毫秒
$.toast("消息", 20000);

实例代码如下：

      <a href="javascript:;" id='show-toast' class="weui-btn weui-btn_primary">显示 Toast 成功</a><a href="javascript:;" id='show-toast-cancel' class="weui-btn weui-btn_primary">显示 Toast 取消</a><a href="javascript:;" id='show-toast-forbidden' class="weui-btn weui-btn_primary">显示 Toast 禁止</a><a href="javascript:;" id='show-toast-text' class="weui-btn weui-btn_primary">显示 Toast 纯文本</a><a href="javascript:;" id='show-loading' class="weui-btn weui-btn_primary">显示 Loading</a>

js代码段如下：

 $(document).on("click", "#show-toast", function() {$.toast("操作成功", function() {console.log('close');});}).on("click", "#show-toast-cancel", function() {$.toast("取消操作", "cancel", function(toast) {console.log(toast);});}).on("click", "#show-toast-forbidden", function() {$.toast("禁止操作", "forbidden");}).on("click", "#show-toast-text", function() {$.toast("纯文本", "text");}).on("click", "#show-loading", function() {$.showLoading();setTimeout(function() {$.hideLoading();}, 3000)});

14 toptip

显示在页面顶部的轻量级提示，一般用来反馈用户的操作结果，比如表单校验失败等。

JS方法定义如下：

$.toptip(text, [duration, type]);

示例：

$.toptip('操作成功', 'success');
$.toptip('操作失败', 'error');
$.toptip('警告', 'warning');$.toptip('操作成功', 2000, 'success');  //设置显示时间

注意，此组件从 V0.7.2 版本开始才可以使用。

实例代码如下：

$(document).on('click', '#show-success', function() {$.toptip('操作成功', 'success');}).on('click', '#show-error', function() {$.toptip('操作失败', 'error');}).on('click', '#show-warning', function() {$.toptip('警告', 'warning');})

15  图标

weui-icon-success/info/warn图标类型、颜色
weui-icon_msg

图标大小

.weui-icon_msg {

    font-size: 93px;}
代码段如下： 
<i class="weui-icon-success weui-icon_msg"></i>
<i class="weui-icon-info weui-icon_msg"></i>
<i class="weui-icon-warn weui-icon_msg-primary"></i>
<i class="weui-icon-warn weui-icon_msg"></i>
<i class="weui-icon-waiting weui-icon_msg"></i><i class="weui-icon-success"></i>
<i class="weui-icon-success-no-circle"></i>
<i class="weui-icon-circle"></i>
<i class="weui-icon-warn"></i>
<i class="weui-icon-download"></i>
<i class="weui-icon-info-circle"></i>
<i class="weui-icon-cancel"></i>
<i class="weui-icon-search"></i>

运行结果如下：

16  搜索栏

搜索栏，类似于微信原生的搜索栏，应用于常见的搜索场景。

weui-search-bar__form用来放置搜索框
weui-icon-search

点击搜索框以后，出现input框

<input class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="" type="search">

weui-search-bar__labelinput搜索框样式
weui-search-bar__cancel-btn右侧搜索框取消样式
代码段如下： 
 <div class="weui-search-bar" id="searchBar"><form class="weui-search-bar__form" action="#"><div class="weui-search-bar__box"><i class="weui-icon-search"></i><input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required=""><a href="javascript:" class="weui-icon-clear" id="searchClear"></a></div><label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"><i class="weui-icon-search"></i><span>搜索</span></label></form><a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a></div>

运行结果如下：


17  面板 panel

weui-panel放置图文的容器面板
weui-media-box 
weui-media-box_appmsg 
weui-media-box__hdhd面板的头部
weui-media-box__bdbd面板的内容
weui-media-box__title面板内容里面的标题
weui-media-box__desc面板内容里面的正文（描述）
weui-panel__ftft面板的尾部
代码段如下： 
 <div class="weui-panel weui-panel_access"><div class="weui-panel__hd">图文组合列表</div><div class="weui-panel__bd"><a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="" alt=""></div><div class="weui-media-box__bd"><h4 class="weui-media-box__title">标题一</h4><p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p></div></a><a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd"><img class="weui-media-box__thumb" src='' alt=""></div><div class="weui-media-box__bd"><h4 class="weui-media-box__title">标题二</h4><p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p></div></a></div><div class="weui-panel__ft"><a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link"><div class="weui-cell__bd">查看更多</div><span class="weui-cell__ft"></span></a>    </div></div>

运行结果如下：

代码段如下：

<div class="weui-panel weui-panel_access"><div class="weui-panel__hd">文字组合列表</div><div class="weui-panel__bd"><div class="weui-media-box weui-media-box_text"><h4 class="weui-media-box__title">标题一</h4><p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p></div><div class="weui-media-box weui-media-box_text"><h4 class="weui-media-box__title">标题二</h4><p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p></div></div><div class="weui-panel__ft"><a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link"><div class="weui-cell__bd">查看更多</div><span class="weui-cell__ft"></span></a>    </div></div>

运行结果如下：


18  导航栏

因为微信本身就有一个顶部的标题栏，所以这个导航栏其实是在标题栏之下的二级导航栏，因此它实际上就是一个放在页面顶部的 tabbar 而已。

自动切换

在正确的HTML结构前提下，给 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一个 .weui-tab__bd-item，即可实现点击的时候自动切换。

初识状态显示的标签，需要自行添加 .weui-bar__item--on 和 .weui-tab__bd-item--active.

weui-navbar放置选项卡
weui-navbar__item选项卡样式
weui-bar__item--on默认active 的选项卡
weui-tab__bd-item--active默认active的页面
weui-tab__bd-item放置页面内容
实例代码如下： 
 <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"><h1>页面一</h1></div><div id="tab2" class="weui-tab__bd-item"><h1>页面二</h1></div><div id="tab3" class="weui-tab__bd-item"><h1>页面三</h1></div></div></div>

运行结果如下：


http://chatgpt.dhexx.cn/article/YxEaWNKX.shtml

相关文章

Jquery WeUI（一）

Jquery WeUI（一）

用于微信端的控件UI &#xff0c; 首先&#xff0c;需要做的是开发一个微信能访问的网页&#xff0c;并和微信关联 A&#xff0e; 创建一个空网站 B&#xff0e; 增加一般处理程序 A&#xff0e; 增加 web 网页 和空文件到项目中 B&#xff0e; 申请和配置测试服务 创建菜单 通…
阅读更多...
jQuery WeUI学习笔记1

jQuery WeUI学习笔记1

前言&#xff1a;内容基本是参考博客笔记&#xff0c;偶尔会加些个人补充&#xff0c;仅作为复习巩固用途。如有错误&#xff0c;请指出&#xff0c;谢谢。 提示&#xff1a;后续更深理解在补充 前序、使用过程出现的问题 注意&#xff1a;发现问题解决问题比学习新知识更重要…
阅读更多...
weui和jquery weui的区别、下载和在项目中的引用、使用、应用

weui和jquery weui的区别、下载和在项目中的引用、使用、应用

jquery weui weui jquery插件; jquery-weui是官方weui的升级版本&#xff0c;扩展了官方的weui。jquery-weui是官方weui的jquery版本。 在javaWeb 项目中&#xff0c;使用的方式有另种&#xff0c; 第一种&#xff1a;在官网上下载压缩包 1、下载jquery weui 压缩文件加压…
阅读更多...
项目管理十大知识领域，为何不含

项目管理十大知识领域，为何不含

问&#xff1a;项目管理十大知识领域&#xff0c;为何不含以下几项&#xff1a;立项管理&#xff0c;合同管理&#xff0c;文档管理&#xff0c;变更管理&#xff1f; 答&#xff1a; 立项完了才有项目&#xff1b; 合同管理包含在采购管理&#xff1b; 变更管理在整体管理&am…
阅读更多...
项目管理（PMP）》项目管理十大知识领域

项目管理（PMP）》项目管理十大知识领域

目录 项目管理十大知识领域 1、项目整合管理 2、项目范围管理 3、项目时间管理 4、项目成本管理 5、项目质量管理 6、项目人力资源管理 7、项目沟通管理 8、项目风险管理 9、项目采购管理 10、项目干系人管理 项目管理十大知识领域 1、项目整合管理 2、项目范围管理…
阅读更多...
项目管理十大知识领域运用流程

项目管理十大知识领域运用流程

阅读更多...
PMBOK指南第六版— 项目管理十大知识领域与49个过程

PMBOK指南第六版— 项目管理十大知识领域与49个过程

阅读更多...
项目管理十大知识领域之间的关系

项目管理十大知识领域之间的关系

阅读更多...
项目管理十大知识领域之项目相关方管理

项目管理十大知识领域之项目相关方管理

(1) 什么是项目相关方管理&#xff1f;项目有哪些相关方&#xff1f;如何来识别相关方&#xff1f;识别相关方的目的是什么&#xff1f; ✧ 相关方管理主要包含的过程&#xff1a; ➢ 一启动、一规划、一执行、一监控 ✧ 相关方(干系人)定义&#xff1a; 每个项目都有相关方&a…
阅读更多...
项目管理十大知识领域之项目进度管理

项目管理十大知识领域之项目进度管理

(1) 进度管理主要包括哪些过程&#xff1f; ✧ 进度管理主要包含的过程&#xff1a; ➢ 五大规划&#xff0c;一大监控 (2) 什么是进度管理计划&#xff1f; ✧ 规划进度管理 ITTO(规划)&#xff1a; 规划进度管理是为规划、编制、管理、执行和控制项目进度而制定政策、程…
阅读更多...
项目管理十大知识领域之项目资源管理

项目管理十大知识领域之项目资源管理

(1) 什么是资源管理&#xff0c;资源管理的流程是什么&#xff1f; ✧ 资源管理的定义&#xff1a;项目资源管理则重点关注组成项目团队的部分相关方 ✧ 资源管理主要包含的过程&#xff1a; ➢ 两规划&#xff0c;三执行&#xff0c;一监控 (2) 规划资源管理是什么&#xf…
阅读更多...
项目管理十大知识领域之项目整合管理

项目管理十大知识领域之项目整合管理

1、 项目整合管理 注&#xff1a; 1点为项目整合管理的概述 2-7点主要为项目章程&#xff08;启动&#xff09;重点 8-11点主要为制定项目管理计划&#xff08;规划/计划&#xff09; 12-17点主要为指导工作与项目管理知识&#xff08;执行&#xff09; 18-22点主要为监控项目…
阅读更多...
项目管理十大知识领域之项目风险管理

项目管理十大知识领域之项目风险管理

(1) 什么是项目风险管理&#xff1f;单个项目风险和整体项目风险的概念。残留风险和次生风险的概念。 ✧ 风险管理主要包含的过程&#xff1a; ➢ 五大规划&#xff0c;一执行&#xff0c;一监控&#xff08;重点为流程&#xff09; ➢ 风险相关顺序&#xff1a;识别风险->…
阅读更多...
项目管理十大知识领域之项目沟通管理

项目管理十大知识领域之项目沟通管理

(1) 什么是项目沟通管理&#xff0c;项目沟通管理的流程是什么&#xff1f; ✧ 沟通管理定义&#xff1a;沟通是指有意或无意的信息交换。交换的信息可以是想法、指示或情绪。 ✧ 沟通管理主要包含的过程&#xff1a; ➢ 一规划&#xff0c;一执行&#xff0c;一监控 (2) 沟…
阅读更多...
项目管理十大知识领域之项目质量管理

项目管理十大知识领域之项目质量管理

(1) 什么是质量管理&#xff0c;质量管理的流程是什么&#xff1f; ✧ 质量管理主要包含的过程&#xff1a; ➢ 一规划&#xff0c;一执行&#xff0c;一监控 ✧ 项目质量管理流程&#xff1a;&#xff08;考点&#xff1a;描述场景区分属于哪一个过程&#xff09; ➢ 规划管…
阅读更多...
项目管理十大知识领域一——项目整体管理

项目管理十大知识领域一——项目整体管理

备考信息系统项目管理师&#xff0c;学习过程中整理的思维导图。便于知识的复习&#xff0c;同时也分享给大家共同学习。下面的文字为思维导图大纲&#xff0c;自身不太喜欢。可以直接下载后续的图片&#xff0c;观看思维导图更加清晰明了。 此处为思维导图下载链接&#xff1a…
阅读更多...
项目管理十大知识领域之项目范围管理

项目管理十大知识领域之项目范围管理

(1) 项目范围管理的主要内容是什么&#xff1f;产品范围和项目范围&#xff0c;两者有何区别和联系&#xff1f;不同开发生命周期中&#xff0c;范围管理有什么不同&#xff1f; ✧ 项目范围管理&#xff1a;即使项目中需要做得事情&#xff1b; ✧ 范围vs进度vs成本(项目三大…
阅读更多...
项目管理十大知识领域项目采购管理

项目管理十大知识领域项目采购管理

(1) 什么是采购管理&#xff0c;采购中买卖双方各自的义务是什么&#xff1f; ✧ 采购管理主要包含的过程&#xff1a; ➢ 一规划、一执行、一监控 项目采购管理是从项目团队外部获取所需的产品&#xff0c;服务或成果的完整的过程。项目采购管理过程涉及到用协议来描述买卖双…
阅读更多...
项目管理十大知识领域和47个过程

项目管理十大知识领域和47个过程

速记口诀&#xff1a;进程吃饭&#xff0c;疯狗踩人。 进度管理、成本管理、质量管理、范围管理、风险管理、沟通管理、采购管理、人力资源管理、干系人管理、整体管理。
阅读更多...
Windows快速配置路由，同时使用内网和外网

Windows快速配置路由，同时使用内网和外网

Windows外网内网并用&#xff0c;配置路由 使用情况&#xff1a;在需要使用外网的同时要能访问内网&#xff0c;可进行以下操作&#xff0c;场景&#xff1a;如需要给其他人开远程且又需要访问内网服务器&#xff0c;即可进行该操作 内网&#xff1a;是指某一区域内由两台以上计…
阅读更多...
推荐文章

Copyright @ 2022~2023