MUI_教程版
_枸杞子_
软件工程专业学生
展开
-
001_跨平台开发_MUI_认识MUI
什么是MUI? MUI的定位是:最接近原生体验的移动App的UI框架。 基于mui的定位,产生了mui的几个特点,轻、小、只涉及UI、只为移动App而生、界面风格原生化。MUI、HTML5+、5+Runtime的关系mui是一个前端框架。HTML5+是一套HTML5能力扩展规范。HTML5+ Runtime是实现HTML5+规范的强化浏览器引擎。类似于bootstrap、w3c和chrom原创 2017-10-16 20:27:00 · 387 阅读 · 0 评论 -
009-跨平台开发-MUI-复选框及取值(checkbox)
视频教程:点击这里认识checkbox常用于多选的情况,比如批量删除、添加群聊等;DOM结构<div class="mui-input-row mui-checkbox"> <label>checkbox示例</label> <input name="checkbox1" value="Item 1" type="checkbox" checked></div>默认checkbox在原创 2017-11-05 11:06:09 · 2808 阅读 · 0 评论 -
004_跨平台开发_MUI_操作表(actionsheet)
效果介绍actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮; actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类;popover(method: String)原创 2017-10-23 11:23:32 · 534 阅读 · 0 评论 -
003_跨平台开发_MUI_注意事项
DOM结构固定栏靠前所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则: 放在.mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部原创 2017-10-20 15:41:23 · 265 阅读 · 0 评论 -
006_跨平台开发_MUI_折叠面板(accordion)
认识折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下:代码结构<ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <div cla原创 2017-10-24 21:24:12 · 555 阅读 · 0 评论 -
008_跨平台开发_MUI_按钮之加载中按钮(button)
认识mui v3.4 版新增加载中按钮样式,目前提供通过 JS API 切换 loading和reset状态,可以灵活操作适应多种场景。属性加载中按钮支持修改 loading状态的文案、显示的icon、icon的位置,如下: 属性 作用 data-loading-text loading 状态显示的文案,默认为: loading data-loading-icon load原创 2017-10-28 10:08:41 · 2384 阅读 · 0 评论 -
005_跨平台开发_MUI_数字角标(badges)
视频教程:点击这里认识数字角标一般和其它控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示。 角标的核心类是.mui-badge,默认为实心灰色背景;同时,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标,如下:代码结构<span class="mui-badge">1</span><span class="原创 2017-10-28 09:16:36 · 603 阅读 · 0 评论 -
007_跨平台开发_MUI_按钮之普通按钮(button)
认识mui默认按钮为灰色,另外还提供了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮,五种色系对应五种场景,分别为primary、success、warning、danger、royal;使用.mui-btn类即可生成一个默认按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮,例如:通过.mui-btn原创 2017-10-27 22:51:26 · 787 阅读 · 0 评论 -
002_跨平台开发_MUI_认识第一个MUI程序
安装HBuilder开发环境搜索安装即可。新建web移动项目认识项目结构css文件夹 |-mui.css: 没有压缩过的mui自带css |-mui.min.css: 压缩过的mui自带cssfonts文件夹 |-mui.ttf: 字体文件,主要是一些图标js文件夹 |-mui.js: 没有压缩过的js文件 |-mui.min.js: 压缩过的js文件index.html原创 2017-10-16 20:41:14 · 251 阅读 · 0 评论 -
010-跨平台开发-MUI-单选框及取值(radio)
视频教程:点击这里radio用于单选的情况普通单选框DOM结构<div class="mui-input-row mui-radio"> <label>PHP</label> <input name="language" type="radio" value="PHP"></div> 默认radio在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下:原创 2017-11-05 11:07:02 · 3256 阅读 · 0 评论