YDUI Touch - Docs

快速上手

1、开发者说

1.1、个人因时间、经验、能力有限，YDUI 有很多不足的地方，希望大家包容、不吝赐教；

1.2、有任何建议或意见您可以进行Pull Request，或者给我提问，您的支持将是我继续创作的动力\(^o^)/。

2、准备工作

2.1、了解 YDUI 能做什么？

扫描二维码查看

YDUI Touch

戳 http://m.ydui.org 查看

2.2、预备知识

使用 YDUI 之前，应该熟悉 HTML、CSS、JavaScript 以外，还应了解移动端相关特性；

了解rem相关知识（当然也可以通过定制 YDUI，不使用rem）；

如果您并不了解以上预备知识，建议您先储备相关基础知识，而后再进行使用；

3、基于jQuery

3.1、YDUI JS组件基于jQuery 2.0+开发；不能接受？别骂我！

同时支持 jQuery 和 Zepto，真是吃力不讨好！

3.2、先别走，YDUI 还为你提供了很多漂亮样式组件！

4、兼容性

4.2、兼容绝大多数移动端设备（兼容Android4.0+、IOS6.0+）；

如果不兼容你的JJ，请在最下方留言告诉我（操作系统及版本 + 浏览器及版本）；

4.3、采用 flexbox 布局，因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性，YDUI 将采取其他解决方案；

5、目录结构

5.1、获取 YDUI

通过 YDUI Touch 定制，定制属于自己的 YDUI，然后下载zip压缩包；

5.2、下载包目录结构

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          // 示例入口文件

6、使用

6.1、获取到 YDUI 后，在head标签内引入path/build/css/ydui.css和path/build/js/ydui.flexible.js文件；

6.2、凡涉及js组件需另外引入jquery 2.0+和path/build/js/ydui.js；

6.3、您可以复制下面代码或在线预览。

<!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>