jQuery WeUI学习笔记一

最新推荐文章于 2024-07-15 11:35:55 发布

flying_huixia

最新推荐文章于 2024-07-15 11:35:55 发布

阅读量1.9w

点赞数 5

分类专栏： jQuery 文章标签： jquery weui

本文链接：https://blog.csdn.net/runner_123/article/details/80026879

版权

jQuery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一　引言

最近在对时间典当行这一公众号进行一个粗浅的学习。涉及到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-area	weui-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("自定义的消息内容", 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__label	input搜索框样式
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__hd	hd面板的头部
weui-media-box__bd	bd面板的内容
weui-media-box__title	面板内容里面的标题
weui-media-box__desc	面板内容里面的正文（描述）
weui-panel__ft	ft面板的尾部

代码段如下：

 <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>

运行结果如下：

flying_huixia

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
4
评论
jQuery WeUI学习笔记一

一　引言最近在对时间典当行这一公众号进行一个粗浅的学习。涉及到WeUI插件库，就整理以下笔记。１　jQuery WeUI官网地址：http://jqweui.com/２　WeUI 目前只包含 CSS 代码，核心文件是weui.css　　jQuery WeUI = WeUI + jQuery + 大量拓展组件　　jQuery WeUI 的组件分两部分：基础组件：weui官方的组件...
复制链接

扫一扫

专栏目录