1.项目官网地址：http://m.sui.taobao.org/

2.项目使用可以参考开始使用和示例

3.项目是放在 Github 上的 https://github.com/sdc-alibaba/SUI-Mobile，我们可以使用git 下载到本地 使用grunt 根据需要重构

4.helloworld:

　　1.新建demo.html 并填充需要的结构

　　2.引入需要的cdn 文件

　　3.将script放到页面脚步，调用需要的组件，如果是分别调用需要的js，那么我们一般需要引用zepto-adapter.js util.js  init.js 以及我们需要的js组件 在调用的script结尾前可能需要初始化 $.init();

这里给一个下拉更新的代码示例

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>SUI Mobile Demo</title>

    <meta name="description" content="MSUI">

    <meta name="author" content="阿里巴巴国际UED前端">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="format-detection" content="telephone=no">

    <!-- Google Web Fonts -->

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">

    <link rel="stylesheet" href="http://m.sui.taobao.org/assets/css/demos.css">

    <link rel="stylesheet" href="http://m.sui.taobao.org/assets/css/docs.css">

    <script src="http://m.sui.taobao.org/assets/js/zepto.js"></script>

  </head>

  <body>

    <!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->

    <div class="page-group">

        <!-- 单个page ,第一个.page默认被展示-->

        <div id="page-ptr" class="page">

          <header class="bar bar-nav">

            <a class="button button-link button-nav pull-left back" href="/demos">

              <span class="icon icon-left"></span>

              返回

            </a>

            <h1 class="title">栅格</h1>

          </header>

          <div class="content pull-to-refresh-content">

            <div class="pull-to-refresh-layer">

              <div class="preloader"></div>

              <div class="pull-to-refresh-arrow"></div>

            </div>

            <!-- 下面是正文 -->

            <div class="card-container">

              <div class="card">

                <div class="card-header">卡片标题</div>

                <div class="card-content">

                  <div class="card-content-inner">

                    下拉屏幕试试，会出现更多的卡片

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

    </div>

    <!-- 默认必须要执行$.init(),实际业务里一般不会在HTML文档里执行，通常是在业务页面代码的最后执行 -->

   <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>

<!-- <script src="http://m.sui.taobao.org/assets/js/demos.js"></script> -->

<script>

    $(function () {

  'use strict';

  //下拉刷新页面

  $(document).on("pageInit", "#page-ptr", function(e, id, page) {

    var $content = $(page).find(".content").on('refresh', function(e) {

      // 模拟2s的加载过程

      setTimeout(function() {

        var cardHTML = '<div class="card">' +

          '<div class="card-header">标题</div>' +

          '<div class="card-content">' +

          '<div class="card-content-inner">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容' +

          '</div>' +

          '</div>' +

          '</div>';

        $content.find('.card-container').prepend(cardHTML);

        // $(window).scrollTop(0);

        // 加载完毕需要重置

        $.pullToRefreshDone($content);

      }, 2000);

    });

  });

    $.init();

});

</script>

  </body>

</html>

启动从https://github.com/sdc-alibaba/SUI-Mobile 克隆下拉的项目  npm install 以后 jekyll serve 启动项目

关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得的更多相关文章

  1. 共享业务稳定性测试&技术创新组

    本文其实是一篇招聘贴,不管你以前是做开发还是测试,都欢迎加入我们的小组. 2014年阿里巴巴的共享业务事业部有很大变化,共享的测试团队也做了一些调整,我不再担任共享业务的测试经理,但是仍然会留在共享测 ...

  2. 阿里巴巴供应链平台事业部2020届秋招-Java工程师

    阿里巴巴供应链平台事业部,2020届秋季校园招聘开始啦!Java开发工程师虚位以待,机会难得,占坑抓紧. 入职就发师兄,一对一师兄辅导. 在这里,你将有机会接触阿里集团的所有数据库.中间件等基础设施. ...

  3. 前端相关UED团队和个人博客整理

    平时收集的UED的团队和个人博客一些有关/*********************************这次真的是搬运工,原文转载自蓝色理想********************/ 前端团队推荐 ...

  4. UED团队规范设计参考及建议

    公司产品线逐渐增多,变动频繁且并行开发,常常需要设计与开发能够快速的做出响应.同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容.通过模块化的解决方案,降低冗余的生产 ...

  5. 组件化框架设计之阿里巴巴开源路由框架——ARouter原理分析（一）

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 背景 当项目的业务越来越复杂,业务线越来越多的时候,就需要按照业 ...

  6. 实验八 《Coderxiaoban团队》团队作业4：基于原型的团队项目需求调研与分析

    实验八 <Coderxiaoban团队>团队作业4:基于原型的团队项目需求调研与分析 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验八 团队作业4:基于 ...

  7. ABP前端使用阿里云angular2 UI框架NG-ZORRO分享

    一.前言 前段时间写博客分享和介绍了阿里云的UI框架NG-ZORRO(博客请查看:http://www.cnblogs.com/donaldtdz/p/7892960.html),结合近段时间对.Ne ...

  8. 阿里云 CDN 业务基于边缘容器的云原生转型实践

    导读:本文基于边缘容器的阿里云 CDN 云原生实践, 涵盖了边缘容器的背景和趋势,边缘托管集群 ACK Managed Edge K8s(文中简称“Edge@ACK”) 的能力.架构,以及基于边缘容器 ...

  9. ESLint可共享配置发布，团队自定义ESLint规则新鲜出炉

    ESLint于2013年6月份推出,至今4个年头,最新版本v4.8.0.它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如Airbnb和Google均有一套自己的Java ...

随机推荐

  1. sql语句查询服务器的数据库，数据库的全部表和表的全部列

    下面是数据库的结构: 数据库名是:edushi_zixunok;表名是infoArticle --获取所有用户名 SELECT * FROM sys.sysusers --获取所有用户数据库 SELE ...

  2. 20169212《Linux内核原理与分析》第七周作业

    实验 给MenuOS增加time和time-asm命令的方法: 更新menu代码到最新版 再main()函数中增加MenuConfig 增加对应的Time函数和TimeAsm函数(这里的函数要换成我们 ...

  3. Linux 常用命令集合

    1. 常用命令 ls  显示当前目录下的文件和文件夹: -ltr 按时间顺序显示文件和文件夹的详细信息,不带参数的时候 只显示文件夹和文件. vi  打开文件的内容 tar -cvf file.tar ...

  4. META-INF文件夹是干啥的，META-INF文件夹的作用， META-INF文件夹能删吗

    今天有人问到 META-INF文件夹是干啥的,META-INF文件夹的作用, META-INF文件夹能删吗,还有项目的META-INF下面一般会有个MANIFEST.MF 文件,都是干啥的. 百度搜了 ...

  5. PHP发送电子邮件

    1.导入文件,如本案例把Stmp.class.php放到Common\Common目录下,代码很多,直接复制就行! <?php namespace Common\Common; class Sm ...

  6. 修改Linux默认启动级别或模式的方法

    冲动的惩罚: 海阔天空: 在linux系统的7种启动级别,默认为X-Window,类似于Windows的窗口模式. 如何修改或变更linux的默认启动级别或模式呢? 以root身份进入Linux,修改 ...

  7. ios项目中安装和使用CocoaPods

    CocoaPods是什么? http://code4app.com/article/cocoapods-install-usage http://blog.csdn.net/jjmm2009/arti ...

  8. Python - twisted web 入门学习之一

    原文地址:http://zhouzhk.iteye.com/blog/765884 python的twisted框架中带了一个web server: twisted web.现在看看怎么用. 一)准备 ...

  9. usb端口号绑定

    由于ubuntu USB设备号为从零开始依次累加,所以多个设备每次开机后设备号不固定,机器人每次开机都要蛋疼的按顺序插, 在网上找到一种方法:udev的规则 udev的规则说明,可以参考博客说明:ht ...

  10. 黑马程序员——C语言基础 流程控制 选择结构和循环结构

    ---恢复内容开始--- Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)流程控制 1> 顺序结构:默认的流程 ...