关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得
生活随笔
收集整理的這篇文章主要介紹了
关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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.jsutil.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" >
<link rel="stylesheet" >
<link rel="stylesheet" >
<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>
View Code
啟動從https://github.com/sdc-alibaba/SUI-Mobile 克隆下拉的項目 npm install 以后 jekyll serve 啟動項目
總結
以上是生活随笔為你收集整理的关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++ 标准库 书籍学习记录笔记 第5章
- 下一篇： 使用OAuth2实现认证服务器和资源服务