初用msui.js

　　MSui，基于 Framework7 开发，组件功能使用Zepto库提供。定位轻量级的ui库

　　简单的使用MSui组件只需要引入所提供的CDN则可

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

　　<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>

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

 　　html代码如下：

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <title>我的生活</title>
 8     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
 9     <meta name="apple-mobile-web-app-capable" content="yes">
10     <meta name="apple-mobile-web-app-status-bar-style" content="black">
11     <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
12     <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
13     <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
14 </head>
15 <body>
16 <div class="page">
17     <header class="bar bar-nav">
18         <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
19             <span class="icon icon-left"></span>
20             返回
21         </a>
22         <h1 class="title">我的生活</h1>
23     </header>
24     <nav class="bar bar-tab">
25         <a class="tab-item active" href="#">
26             <span class="icon icon-home"></span>
27             <span class="tab-label">首页</span>
28         </a>
29         <a class="tab-item" href="#">
30             <span class="icon icon-me"></span>
31             <span class="tab-label">我</span>
32         </a>
33         <a class="tab-item" href="#">
34             <span class="icon icon-star"></span>
35             <span class="tab-label">收藏</span>
36         </a>
37         <a class="tab-item" href="#">
38             <span class="icon icon-settings"></span>
39             <span class="tab-label">设置</span>
40         </a>
41     </nav>
42     <div class="content">
43         <!-- 这里是页面内容区 -->
44     </div>
45 </div>
46 </body>
47 </html>
View Code

　　实现效果如下

　　

 

　　上面的代码就可以很简单的调用msui了。

　　关于MSui的初始化$.init

　　官网有详细的文档和demo

posted @ 2016-12-24 10:22  -e  阅读(2558)  评论(3)  编辑  收藏  举报