![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
MUI
佛佛ง
前端
展开
-
MUI-accordion(折叠面板),收缩与展开设置
折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下图结构: <ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">原创 2018-12-13 09:59:26 · 6962 阅读 · 1 评论 -
MUI-list(列表),三行列表
下图是一个典型的三行列表: 结构分解:1、外层用list,内层用grid进行分栏,2、第一列mui-col-xs-10,用于显示文字,第二列mui-col-xs-2,用于显示时间3、文字省略,在当前行增加.mui-ellipsis即可<!DOCTYPE html><html> <head> <meta charset=...原创 2018-12-17 17:33:01 · 4689 阅读 · 0 评论 -
MUI-时间提示框,日期和时间提示设置
1、下图为日期选择2、下图为时间 3、源码<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="原创 2018-12-28 10:30:16 · 1896 阅读 · 0 评论 -
MUI-actionsheet(操作表),实现页面之间的转换
这里只给出主页面的设置及js逻辑:<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=dev原创 2018-12-28 10:55:36 · 741 阅读 · 0 评论 -
MUI-numbox(数字输入框),最小值、最大值、步长、获取值、设置值、重定义
本文主要介绍numbox(数字输入框),最小值、最大值、步长、获取值、设置值、重定义功能mui提供了数字输入框控件,可直接输入数字,也可以点击“+”、“-”按钮变换当前数值;默认numbox控件dom结构比较简单,如下:<div class="mui-numbox"> <!-- "-"按钮,点击可减小当前数值 --> <button class="m...原创 2018-12-17 19:28:09 · 10237 阅读 · 0 评论 -
MUI-双webview的上拉加载&下拉刷新
为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); 通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画;在iOS平台,H5的动画已经比较流畅,故依然使用H5方案。主要步骤:第一步: 创建主页面fres...原创 2018-12-28 14:14:01 · 1726 阅读 · 3 评论 -
MUI-手势
在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:分类 参数 点击 tap 单击屏幕 doubletap 双击屏幕 长按 longtap 长按屏幕 hold 按住屏幕 release 离开屏幕 滑动 swipelef...原创 2018-12-28 14:34:51 · 311 阅读 · 0 评论 -
MUI-mask(遮罩蒙版)
在popover、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover弹出后,除popover控件外的其它区域都会遮罩一层蒙版,用户点击蒙版不会触发蒙版下方的逻辑,而会关闭popover同时关闭蒙版;再比如侧滑菜单界面,菜单划出后,除侧滑菜单之外的其它区域都会遮罩一层蒙版,用户点击蒙版会关闭侧滑菜单同时关闭蒙版。遮罩蒙版常用的操作包括:创建、显示、关闭,如下代码:var mask = ...原创 2018-12-28 14:56:26 · 2605 阅读 · 0 评论 -
MUI-设备信息
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial原创 2018-12-28 18:08:31 · 419 阅读 · 0 评论 -
MUI-手机信息
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-sc原创 2018-12-28 18:43:38 · 404 阅读 · 0 评论 -
MUI-发邮件、打电话、发短信、群发
1、发邮件<a href="mailto:youjian@163.com">发邮件</a>2、打电话<a href="tel:10086">拨打电话</a>3、发短信<a href="sms:18663913196">发送短信</a>4、群发,需要j原创 2018-12-28 19:20:56 · 1604 阅读 · 1 评论 -
MUI-本地存储localStorage
<script type="text/javascript"> mui.init(); // 本地存储是个全局变量,在其他任意界面都可以调用 // 1,设置 localStorage.setItem('course','math'); localStorage.setItem('name','lili'); localStorage.setItem...原创 2018-12-28 19:58:05 · 4017 阅读 · 0 评论 -
HBuilder无法连接夜神模拟器
主要原因:配置的端口号不对解决方法:1、找到夜神模拟器的安装文件debug.bat2、双击打开,进入cmd命令窗口3、在HBuilder中设置端口号为52001即可 ...原创 2018-12-29 16:20:36 · 617 阅读 · 0 评论 -
MUI-scroll滚动,重新定位滚动位置
dom结构:使用mui区域滚动,把需要滚动的内容放在其中<div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!--这里放置真实显示的DOM内容--> </div></div>初始化加载滚动条:mui('#mui-scroll')原创 2019-01-17 13:45:23 · 4678 阅读 · 0 评论 -
MUI-区域滚动mScroll
区域滚动的结构<div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!--这里放置真实显示的DOM内容--> </div></div>. mui-scroll-wrapper的默认样式如下:.mui-scroll-wrapper原创 2019-01-07 18:18:40 · 1147 阅读 · 0 评论 -
HBuilderX连接不上海马玩模拟器
解决办法:海马玩模拟器端口号:26944,在HBuilderX中选择【工具|设置|运行配置】下的【Android模拟器端口】,设置为 26944,关闭后,再次运行即可:...原创 2019-01-07 18:50:19 · 895 阅读 · 0 评论 -
MUI-header+沉浸式+下滑头部背景渐变
头部机构如下:<header class="mui-bar mui-bar-transparent bg"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title"> &原创 2019-01-08 14:19:16 · 2332 阅读 · 0 评论 -
MUI-list(列表),普通列表、带箭头列表、带数字角标列表、带图文列表
本文主要介绍list(列表)的几种展现形式:普通列表、带箭头列表、带数字角标列表、带图文列表效果图如下:1、普通列表:只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可2、带箭头列表:若右侧需要增加导航箭头,变成导航链接,则只需在li节点下增加a子节点,并为该a节点增加.mui-navigate-right类即可...原创 2018-12-17 17:05:21 · 5534 阅读 · 0 评论 -
MUI-ipnut (表单),快速删除、语音输入、密码框显示&隐藏
所有包裹在.mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列,如下:<form class="mui-input-group" id="input_example"> <div class="mu...原创 2018-12-17 16:09:08 · 2505 阅读 · 1 评论 -
MUI-底部导航切换页面
要实现儒商的效果:1、创建4个html文件,分别为主页面index.html,三个子页面a.html、b.html、c.html,如下:2、循环创建子页面3、处理点击事件4、退出系统后,再次进入系统,要显示初始化状态5、这里只给出index.html主页面的代码, a b c 页面没有js逻辑,不给出源码了<!DOCTYPE html><htm...原创 2018-12-27 19:49:44 · 6334 阅读 · 7 评论 -
MUI-actionsheet(操作表)
一、布局,包括:1、顶部状态栏 <header ></header>,挡在body 最开始位置2、中间内容:文字+【拍照】,放在<div class="mui-content"></div>内部3、底部导航【删除】<nav class="mui-bar mui-bar-tab"></div&am原创 2018-12-13 11:31:25 · 3574 阅读 · 0 评论 -
MUI-badge(数字角标)
数字角标一般和其它控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示。1、角标的核心类是.mui-badge,默认为实心灰色背景;同时,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标,背景颜色类 mui-badge-primary mui-badge-blue mui-badge-succe...原创 2018-12-13 14:54:29 · 3384 阅读 · 2 评论 -
MUI-button(按钮),【有底色按钮】&【无底色、有边框按钮】&【链接按钮】
本文主要介绍【有底色按钮】&【无底色、有边框按钮】&【链接按钮】mui使用.mui-btn类即可生成一个默认灰色按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮。场景和颜色值等同显示效果 mui-btn-primary mui-btn-blue mui-btn-success mui-btn-green mui-btn...原创 2018-12-13 17:55:37 · 6585 阅读 · 0 评论 -
MUI-button(按钮),带有数字角标
本文主要介绍带有数字角标的按钮,效果图如下:源码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" conte原创 2018-12-13 18:12:04 · 1808 阅读 · 0 评论 -
MUI-button(按钮),块级按钮
本文主要介绍块级按钮,它和普通按钮的不同之处在于,块级按钮是填充整行的,而普通按钮可以根据内容自适应宽度。块级按钮,仅需增加.mui-btn-block类即可让其变成块;若想带有底色,则增加.mui-btn-颜色值或.mui-btn-场景若想无底色、有边框,再增加.mui-btn-outlined类即可代码如下:<!DOCTYPE html><html...原创 2018-12-13 18:34:13 · 6591 阅读 · 0 评论 -
MUI-button(按钮),带图标,图标可居左/居右
一般图标包括首页、搜索、添加、删除等,分别对应的类如下表所示:图标类,默认图标居左 mui-icon mui-icon-home 首页 mui-icon mui-icon-search 搜索 mui-icon mui-icon-plus 添加 mui-icon mui-icon-trash 删除 mui-icon ...原创 2018-12-13 19:40:25 · 5935 阅读 · 1 评论 -
MUI-picker(选择器),一级、二级联动、三级联动
mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现1、文件引用poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js2、mui涉及到的方法如下...原创 2018-12-19 17:05:02 · 12678 阅读 · 2 评论 -
MUI-button(按钮),加载中按钮
当用户点击按钮后,需要向服务端提交数据或等待服务端响应时,常常需要提示“正在提交”,并将按钮设置为disabled,避免用户重复点击、重复提交;加载中按钮支持修改 loading状态的文案、显示的icon和icon的位置,如下:属性名 作用 data-loading-text loading 状态显示的文案,默认为: loading data-loading-icon ...原创 2018-12-14 09:32:38 · 3894 阅读 · 0 评论 -
MUI-cardview(卡片视图),页眉、内容区、页脚
本文主要讲述cardview(卡片视图),页眉(图片+主标题+副标题)、内容区(图片/文字)、页脚(链接)的相关设置。1、cardview(卡片视图)概述:卡片视图常用于展现一段完整独立的信息,比如一篇文章的预览图、作者信息、点赞数量等;使用mui-card类即可生成一个卡片容器,卡片视图主要有页眉、内容区、页脚三部分组成,结构如下:<div class="mui-card...原创 2018-12-14 10:59:07 · 4421 阅读 · 0 评论 -
MUI-checkbox(复选框),左右位置+禁用设置
本文主要介绍checkbox(复选框)显示的位置和禁用设置。1、checkbox常用于多选的情况,比如批量删除、添加群聊等,结构如下:<div class="mui-input-row mui-checkbox"> <label>checkbox示例</label> <input name="checkbox1" value="Ite...原创 2018-12-14 11:17:05 · 2829 阅读 · 0 评论 -
MUI-dialog(对话框),警告框、确认框、输入对话框、消息提示框
本文主要讲述dialog(对话框),包括:警告框、确认框、输入对话框、消息提示框四类。组件名 作用 alert 警告框 confirm 确认框 prompt 输入对话框 toast 消息提示框 1、 警告框完整实例:<body> <header class="mui-bar mui-bar-nav"> ...原创 2018-12-14 14:44:32 · 6744 阅读 · 2 评论 -
MUI-创建子页面&打开新页面
本文主要简单讲述创建子页面和打开新页面的方法。1、使用subpages:[{}],创建子页面,挡在mui.init()方法中2、使用mui.openWindow({})打开新页面3、实现如下效果图:通过双webview模式解决,此种情况适用于需要上下拉刷新的列表页面。将需要滚动的区域通过单独的webview实现,完全使用原生滚动。具体做法则是:将目标页面分解为主页面new_fi...原创 2018-12-21 15:05:57 · 7871 阅读 · 1 评论 -
MUI-主页面向子页面传递参数,并在子页面中打印结果
主页面向子页面传递一个参数,在子页面中打印出这个参数。1、主页面初始化设置<script type="text/javascript" charset="utf-8"> mui.init({ subpages:[{ url:'child1.html', id:'child1', styles:{...原创 2018-12-27 16:33:22 · 518 阅读 · 0 评论 -
MUI-grid(栅格),超小屏xs和小屏幕sm
本文主要介绍grid(栅格),超小屏xs和小屏幕sm的应用。MUI 提供了非常简单实用的12列(是12列!!!依次为基数)响应式栅格系统。使用时只需在外围容器上添加.mui-row,在列上添加 .mui-col-[sm|xs]-[1-12]即可。尺寸 超小屏幕(<400px)(Extrasmall) 小屏幕(≥400px) Small 类前缀 .mui-col-...原创 2018-12-17 10:41:34 · 4657 阅读 · 0 评论 -
MUI-打开新页面,传参数,设置展示效果
主页面中打开新窗口设置:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-sca原创 2018-12-27 17:41:27 · 1659 阅读 · 0 评论 -
MUI-slide组件轮播
slide的Dom结构如下:<div class="mui-slider"> <div class="mui-slider-group"> <!--第一个内容区容器--> <div class="mui-slider-item"> <!-- 具体内容 --> &am原创 2018-12-11 11:35:36 · 1296 阅读 · 1 评论 -
MUI-加载矢量图
在阿里矢量库(https://www.iconfont.cn/search/index?)中选择向上和向下的箭头:1、添加到库;2、进入库,选择下载代码3、解压4、只需要两个文件,一个是iconfont.css放在项目中的css文件夹;另一个是iconfont.ttf放在fonts文件夹下,如下:5、修改iconfont.css的路径 url('../fonts/ic...原创 2019-01-08 19:17:43 · 388 阅读 · 0 评论