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代码如下：

　　

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

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

     <title>我的生活</title>

     <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">

     <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>

 </head>

 <body>

 <div class="page">

     <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>

     <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 class="content">

         <!-- 这里是页面内容区 -->

     </div>

 </div>

 </body>

 </html>

　　实现效果如下

　　

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

　　关于MSui的初始化$.init

　　官网有详细的文档和demo

初用msui.js的更多相关文章

  1. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  2. 初入Three.js 第一章

    一.什么是WebGL? 1.WebGL是在浏览器中实现三维效果的一套规范. 二.什么是threejs? 1.你将它理解成three + js就可以了.three表示3D的意思,js表示javascri ...

  3. 初入vue.js（1）

    本文章属于个人在学习vue的随笔,留作与大家分享,技术交流之用,如果有错误,请大家多多指正.谢谢 首先说一下vue的使用方式: vue的使用方式一共有两种,第一种是直接在官网上下载vue.js的文件, ...

  4. 初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐

    背景 封楼期间难得空闲,也静不下心学习,空闲之余萌生了重做引导单页的想法.因为之前都是扒站(某大公司游戏官网)+小改,一来虽然很炫酷,但本人水平有限,仍有很大一部分JS无从下手,甚至是看不懂|-_-| ...

  5. web api 初体验 解决js调用跨域问题

    跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 不同IP不同端口: http://172.28.20.100:8 ...

  6. Node.js 网页瘸腿爬虫初体验

    延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...

  7. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  8. require.js工作原理（初始）

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  9. node.js使用汇总贴

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉..NET程序员初用node.js最需要适应的就是异步开发,以及弱类型语言难以避免的拼写错误与弱小的语法提示 ...

随机推荐

  1. 多线程协作 FileStream文件读写操作,读写冲突解决

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  2. Reading Text-based Files In ASP.NET

    Friday, July 17, 2015 1:43 PM Every time I need to work with the contents of text-based files in an ...

  3. Instruments Tutorial for iOS: How To Debug Memory Leaks【转】

    If you're new here, you may want to subscribe to my RSS feed or follow me on Twitter. Thanks for vis ...

  4. （转）Asp.Net底层原理(三、Asp.Net请求响应过程)

    原文地址:http://www.cnblogs.com/liuhf939/archive/2013/09/16/3324753.html 在之前,我们写了自己的Asp.Net框架,对整个流程有了一个大 ...

  5. Ubuntu普通用户使用串口设备

    将普通用户加入dialout组,然后重启或注销登录 sudo gpasswd --add username dialout

  6. MongoDB整理笔记の减少节点

    当应用的压力小时,可以减少一些节点来减少硬件资源的成本:总之这是一个长期且持续的工作. 下面将刚刚添加的两个新节点28013 和28014 从复制集中去除掉,只需执行rs.remove 指令就可以了, ...

  7. [.net 多线程]volatile 摘录

    一.volatile 介绍 volatile 关键字指示一个字段可以由多个同时执行的线程修改. 声明为 volatile 的字段不受编译器优化(假定由单个线程访问)的限制. 这样可以确保该字段在任何时 ...

  8. [.net 多线程]Monitor

    Monitor 类通过向单个线程授予对象锁来控制对对象的访问.对象锁提供限制访问代码块(通常称为临界区)的能力.当一个线程拥有对象的锁时,其他任何线程都不能获取该锁.还可以使用 Monitor 来确保 ...

  9. 3人从小公寓创业，到世界最大引擎公司，Unity创始人谈14年...

    Unity创始人David Helgason出席了5月11 - 13日在上海举办的Unite 2017 Shanghai,并在大会期间接受了游戏陀螺的专访,动情地讲述了这14年来从3人在公寓创业,到成 ...

  10. python爬取淘宝排名

    import timeimport jsonimport requestsimport xlrdimport randomimport os from xlutils.copy import copy ...