阿里巴巴SUIMobile的使用

1.引入文件

<link rel="stylesheet" href="./css/sm.min.css"> <link rel="stylesheet" href="./css/sm-extend.min.css">

<script type='text/Javascript' src='./lib/zepto/zepto.min.js' charset='utf-8'>script> <script type='text/Javascript' src='./js/sm.min.js' charset='utf-8'>script> <script type='text/Javascript' src='./js/sm-extend.min.js' charset='utf-8'>script>

2.调用模块

 <div class="page-group"> <div class="page page-current"> <header class="bar bar-nav"> <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'> <span class="icon icon-left">span> 返回 a> <h1 class="title">我的生活h1> header> <div class="content"> <div class="content-block"> <p><a href="#" class="button">Usual Button 1a>p> <p><a href="#" class="button button-light">light buttona>p> <p><a href="#" class="button button-dark">dark buttona>p> <p><a href="#" class="button button-success">success buttona>p> <p><a href="#" class="button button-danger">danger buttona>p> <p><a href="#" class="button button-warning">warning buttona>p> <p><a href="#" class="button disabled">disabled buttona>p> div> <div class="content-block"> <p><a href="#" class="button button-round">Round Button 1a>p> div> <div class="content-block"> <p><a href="#" class="button button-big">Big Button a>p> <p><a href="#" class="button button-big button-round">Big Round Button a>p> div> div> <nav class="bar bar-tab"> <a class="tab-item active" href="#"> <span class="icon icon-home">span> <span class="tab-label">首页span> a> <a class="tab-item" href="#"> <span class="icon icon-me">span> <span class="tab-label">我span> a> <a class="tab-item" href="#"> <span class="icon icon-star">span> <span class="tab-label">收藏span> a> <a class="tab-item" href="#"> <span class="icon icon-settings">span> <span class="tab-label">设置span> a> nav> div> div>

3.查看效果

具体可以参考
http://m.sui.taobao.org/components/

代码下载
http://files.cnblogs.com/files/jiqing9006/test-sui.zip

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5579735.html，如需转载请自行联系原作者