移动端UI&微信UI YDUI Touch

所属分类：UI,APP模板-布局,登录注册表单,其他

66650 746 查看评论 (24)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

使用

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

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

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>

纯css京东导航

12款常用动画图标

相关插件-布局,登录注册表单,其他