YDUI-Touch 移动端和微信 UI 项目简介
一只注重审美，且性能高效的移动端&微信UI。专属于移动YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高。采用 Flex 布局使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局。用 rem 来做响应式开发实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换 px。高端定制自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。基于jQueryYDUI 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>
|
|-- 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>