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. Entity Framework在不同数据库下的配置

    http://blog.csdn.net/weiky626/article/details/17068593 http://blog.csdn.net/niewq/article/details/41 ...

  2. Mapper配置文件夹

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-// ...

  3. Web Pages version 2兼容 Web Pages version 1的设置

    If you want to run a site using Web Pages version 1 (instead of the default, as in the previous poin ...

  4. LightOJ 1284 Lights inside 3D Grid (数学期望)

    题意:在一个三维的空间,每个点都有一盏灯,开始全是关的．现在每次随机选两个点,把两个点之间的全部点,开关都按一遍,问k次过后开着的灯的期望数量: 析:很容易知道,如果一盏灯被按了奇数次,那么它肯定是开 ...

  5. C#生成静态文件

    一般生成文件都是通过读取模板文件,然后替换标签. 这些古老的方法使用起来不但麻烦而且效率还不怎么样. 这里给添加介绍一个方法. 如果你用过asp.net.mvc (Razor),你就应该明白 chtm ...

  6. T-SQL查询进阶--SQL Server中的事务与锁

    为什么需要锁 在任何多用户的数据库中,必须有一套用于数据修改的一致的规则,当两个不同的进程试图同时修改同一份数据时,数据库管理系统(DBMS)负责解决它们之间潜在的冲突.任何关系数据库必须支持事务的A ...

  7. NSTimeZone时区

    前言 NSTimeZone 表示时区信息. 1.NSTimeZone 时区的创建 NSTimeZone *zone1 = [[NSTimeZone alloc] init]; // 根据时区名称创建 ...

  8. scrapy中通过set()方法进行数据过滤去重

    我们经常在抓取数据是碰到 数据重复的问题,除了radis数据库去重功能外,还有一种简便的过滤方法, 来来 我们直接上代码: pipelines.py中: from scrapy.exceptions ...

  9. Django 实现购物车功能

    购物车思路:使用 session 功能识别不同浏览器用户,使得用户不管是否登录了网站,均能够把想要购买的产品放在某个地方,之后随时可以显示或修改要购买的产品,等确定了之后再下订单,购物车可以用来暂存商 ...

  10. 在Delphi中获取和修改文件的时间

    转载自 http://www.cnblogs.com/jieke/archive/2013/01/11/2855782.html 本文介绍了在Delphi中利用系统函数和Windows API函数调用 ...