jQuery WEUI

您所在的位置：网站首页 › weui用来做什么 › jQuery WEUI

jQuery WEUI

2024-05-31 15:49| 来源: 网络整理| 查看: 265

九宫格 Button

List

... Flex

使用 Flex 实现的栅格

weui weui 按钮

按钮可以使用 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：

按钮按钮确认确认按钮按钮按钮按钮 Loading状态

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

列表

Cell，列表视图，用于将信息以列表的结构显示在页面上，是wap上最常用的内容结构。Cell由多个section组成，每个section包括section header weui-cells_title 以及 weui-cells。

cell由 thumbnailweui-cell__hd、bodyweui-cell__bd、accessoryweui-cell__ft三部分组成，cell采用自适应布局：

简单列表

标题文字

说明文字带图标的列表

标题文字

说明文字

标题文字

说明文字带链接的列表

cell standard

单选列表

cell standard

添加更多复选列表

standard is dealt for u.

standard is dealicient for u.

添加更多滑动删除(Swipeout)

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

从 V1.1.0 版本开始可用

初始化

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

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

$('.weui-cell_swiped').swipeout() 方法

你可以手动调用方法来打开或者关闭

$('.weui-cell_swiped').swipeout('open') //打开 $('.weui-cell_swiped').swipeout('close') //关闭

但是请注意，只能同时打开一个swipeout，如果你同时打开多个，之后最后一个会被打开

事件

无论是用户操作，还是调用JS打开或者关闭，都会触发事件，分别是 swipeout-open 和 swipeout-close

表单

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

qq 手机号获取验证码日期时间验证码底部说明文字底部说明文字表单报错卡号开关标题文字兼容IE Edge的版本文本框文本域 0/200 文件上传

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

图片上传

0/2 50% Gallery

用来全屏预览图片，结合图片上传使用。目前只是静态组件，后序会增强功能.

Slider

用来显示和输入百分比数据，如果没有用JS进行初始化，则为只读。

JS初始化

使用 $('#slider').slider() 进行初始化。

初始化的时候可以传入一个回调函数，当用户进行滑动操作的时候会触发这个回调函数。

75 $('#slide1').slider(function (percent) { console.log(percent) }) 消息页面

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

操作成功内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

推荐操作辅助操作

底部链接文本

进度条

progress用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。

对话框

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

对话框只能通过 JavaScript 进行调用，我们提供了三种常用的对话框 Alert, Confirm, Prompt 和 Login. 你也可以通过 $.modal 来自定义对话框

实际上， Alert, Confirm, Prompt 和 Login 都是 Modal 的一种定制而已。

Alert

显示一段警告消息，有一个确认按钮。

$.alert("自定义的消息内容"); $.alert("自定义的消息内容", "自定义的标题"); $.alert("自定义的消息内容", function() { //点击确认后的回调函数 }); $.alert("自定义的消息内容", "标题", function() { //点击确认后的回调函数 }); //如果参数过多，通过 object 方式传入 $.alert({ title: '标题', text: '内容文案', onOK: function () { //点击确认 } }); Confirm

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

$.confirm("自定义的消息内容"); $.confirm("自定义的消息内容", "自定义的标题"); $.confirm("自定义的消息内容", function() { //点击确认后的回调函数 }, function() { //点击取消后的回调函数 }); //如果参数过多，建议通过 object 方式传入 $.confirm({ title: '标题', text: '内容文案', onOK: function () { //点击确认 }, onCancel: function () { } }); Prompt

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

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

显示一个登录框：

$.login("自定义的消息内容", function(username, password) { // 这里进行登录操作 }, function() { }); //如果参数过多，建议通过 object 方式传入 $.login({ title: '标题', text: '内容文案', username: 'tom', // 默认用户名 password: 'tom', // 默认密码 onOK: function (username, password) { //点击确认 }, onCancel: function () { //点击取消 } });

登录框从 V0.8.0 版本可用。

自定义对话框

上述的三种对话框都是 $.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)} }, ] }); 关闭对话框

默认情况下，点击对话框的按钮都会先关闭对话框再触发回调函数。

你可以通过JS来关闭任何正在显示的对话框:

$.closeModal(); 默认配置

对话框的默认是 $.modal.prototype.defaults，默认配置如下：

defaults = $.modal.prototype.defaults = { title: "提示", text: undefined, buttonOK: "确定", buttonCancel: "取消", buttons: [{ text: "确定", className: "primary" }], autoClose: true //点击按钮自动关闭对话框，如果你不希望点击按钮就关闭对话框，可以把这个设置为false }; Loading

纯静态，显示一个正在加载的提示。

正在加载暂无数据 ActionSheet

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

ActionSheet 只能通过 JavaScript 进行调用:

$.actions({ actions: [{ text: "编辑", onClick: function() { //do something } },{ text: "删除", onClick: function() { //do something } }] }); 参数说明

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

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

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

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

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

从 V0.7.0 开始，可以通过 className 参数配置不同的颜色或者背景，可以参考右侧的demo用法如下：

$.actions({ actions: [ { text: "发布", className: "color-primary", }, ... });

所有可用配置如下：

color-primary color-success color-danger color-warning bg-primary bg-success bg-danger bg-warning Toast

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

Toast 只能通过 JavaScript 进行调用:

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

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

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

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

Toast 默认时间是 2000 毫秒，可以通过 $.toast.prototype.defaults.duration 来设置这个值。

回调函数

toast可以指定一个回调函数，当toast关闭的时候会调用此函数。

$.toast("取消操作", function() { console.log("cancel"); }); $.toast("禁止操作", "forbidden", function() { //do something }); Toptip

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

JS方法定义如下：

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

示例：

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

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

Tabbar

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

选项一选项二选项三 8 微信

通讯录

发现

我

.weui-tab 作为外层容器，高度撑满它的父容器的高度，.weui-tab__bd 作为 tab 的主体内容，占据除了 .weui-tabbar 以外的全部父容器的高度，.weui-tabbar 则为底部的导航栏。而 .weui-tabbar__item 为 .weui-tabbar 的子元素，表示一个导航区，建议不超过 5 个。

图标 .weui-tabbar__icon 约定尺寸为 27px * 27px ，二倍即 54px * 54px。

关于 active 态，开发者根据需要，给当前激活的 .weui-tabbar__item 添加标示的 .weui-bar__item--on 类名，然后控制文字颜色和图标变化。

自动切换

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

基本结构如下所示：

页面一页面二 ... ... ... ... 导航栏

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

选项一选项二选项三自动切换

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

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

基本结构如下所示：

选项一选项二 ... 页面一页面二 ... 面板图文组合列表标题一由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。

标题二由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。

查看更多 Preview 付款金额 ¥2400.00 商品电动打蛋机标题标题名字名字名字标题标题很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字辅助操作操作搜索栏

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

搜索取消

通过在 weui-search-bar 上添加 weui-search-bar_focusing 来实现状态切换

loadmore

一个纯静态展示的组件

如果想使用滚动加载，请使用 infinite

正在加载暂无数据 Footer

一个简单的页脚

底部链接

底部链接底部链接

加上 .weui-footer_fixed-bottom 可以固定在底部

图标

【本文地址】

jQuery WEUI

jQuery WEUI

今日新闻

推荐新闻