YDUI-Touch移动端和微信 UI
一只注重审美,且性能高效的移动端&微信UI。
专属于移动
YDUI Touch 专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高。
采用 Flex 布局
使用 Flex 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局。
用 rem 来做响应式开发
实现强大的屏幕适配布局,等比例适配所有屏幕。什么?用得不开心?轻松切换 px。
高端定制
自定义Javascript组件、Less文件、Less变量,定制一份属于自己的YDUI。
基于jQuery
YDUI JS 组件基于 jQuery 2.0+ 开发;不能接受?别骂我!
同时支持 jQuery 和 Zepto,真是吃力不讨好!
先别走,YDUI 还为你提供了很多漂亮样式组件!
兼容性
兼容绝大多数移动端设备(兼容Android4.0+、IOS6.0+);
如果不兼容你的JJ,请在最下方留言告诉我(操作系统及版本 + 浏览器及版本);
采用 flexbox 布局,因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性,YDUI 将采取其他解决方案;
目录结构
获取 YDUI
通过 YDUI Touch 定制,定制属于自己的 YDUI,然后下载zip压缩包;
下载包目录结构
YDUI Touch | |-- build // 代码已压缩 | |-- css | | |-- ydui.css // 已将图标.ttf转base64 | |-- js | |-- ydui.flexible.js | |-- ydui.js | |-- demo // 所有示例文件 | |-- css | | |-- demo.css // 示例用到的样式(项目无需使用) | | |-- ydui.css | |-- html | |-- *.html | |-- js | |-- ydui.flexible.js | |-- ydui.js | |-- index.html // 示例入口文件
使用
获取到 YDUI 后,在head标签内引入path/build/css/ydui.css和path/build/js/ydui.flexible.js文件;
凡涉及js组件需另外引入jquery 2.0+和path/build/js/ydui.js;
您可以复制下面代码或在线预览。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <!-- 引入YDUI样式 --> <link rel="stylesheet" href="path/build/css/ydui.css" /> <!-- 引入YDUI自适应解决方案类库 --> <script src="path/build/js/ydui.flexible.js"></script> </head> <body> <div class="g-view"> <!-- 使用:样式模块以按钮为例 --> <div class="m-button"> <a href="javascript:;" class="btn-block btn-primary" id="J_Btn">Button</a> </div> </div> <!-- 引入jQuery 2.0+ --> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!-- 引入YDUI脚本 --> <script src="path/build/js/ydui.js"></script> <script> !function ($) { $('#J_Btn').on('click', function () { /* 使用:js模块以dialog为例 */ YDUI.dialog.alert('我有一个小毛驴我从来也不骑!'); }); }(jQuery); </script> </body> </html>
评论
Frozen UI基于移动端的 UI 库
FrozenUI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。非手Q用户不能
Frozen UI基于移动端的 UI 库
0
VUX移动端 UI 组件库
Vux(读音[v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。 基于webpack+vue-loader+vux可以快速开发移动端页面,配合v
VUX移动端 UI 组件库
0
CMUI移动端 Web UI 框架
CMUI是一个简单粗暴的移动端WebUI框架。CMUI是一个专攻移动网页的UI框架,它提供了丰富的组件和简洁的接口,开箱即用。CMUI帮助开发者摆脱样式细节和兼容性困扰,从而腾出更多精力投入到业务开发
CMUI移动端 Web UI 框架
0
ZARM移动端 UI 组件库
ZARM是基于React、React-Native的移动端UI组件库。追求极致的用户体验,做有温度的组件库。浏览器支持iosAndroid4.0+
ZARM移动端 UI 组件库
0