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. Model View Controller (MVC) Overview

    By Rakesh Chavda on Jul 01, 2015 What is MVC?Model View Controller is a type of user interface archi ...

  2. java代码实现顺序队列

    java实现顺序队列 package xianxinTable; import java.util.ArrayList; import java.util.Iterator; import com.s ...

  3. 简单接触oracle数据库nvl函数decode函数

    SQL语句的DECODE()和NVL()函数用法 SELECT DECODE(choose_tool,0,'宝马',1,'电动车',2,'自行车','步行')  AS my_tool FROM dat ...

  4. 动态往 datagridview 追加行、列操作

    DataGridViewTextBoxColumn acCode = new DataGridViewTextBoxColumn(); acCode.Name = "acCode" ...

  5. MQ入门总结（一）消息队列概念和使用场景

    一.消息队列 消息即是信息的载体.为了让消息发送者和消息接收者都能够明白消息所承载的信息(消息发送者需要知道如何构造消息:消息接收者需要知道如何解析消息),它们就需要按照一种统一的格式描述消息,这种统 ...

  6. C#中实现UrlEncode和UrlDecode

    有时需要进行url编码.解码,比如从html中捞数据,有可能>.&等字符会被编码成>等. WinForm中默认没有引入System.Web,因此要现在项目中引入依赖 System. ...

  7. 如何将Sql server数据库中的模型图转化到Word中--并能够查看字段的属性信息

    1. 在Sql server数据库中创建数据库的模型图 -- Database Diagrams 2. 控制面板--管理工具--ODBC数据源链接--创建一个Sql server的数据源链接 3. 打 ...

  8. mysql 字符串的截取与连接

    mysql 字符串的截取   left() .right() .  substring()[ mid() .substr() 等价于substring() ] .substring_index() l ...

  9. 深入解析mapreduce 笔记

    Hadoop组成: mapreduce简单介绍: 伪代码演示: maptask和reducetask执行流程:

  10. samba服务器架设

    #samba服务器架设方便线上linux服务器和windows服务器之间共享 1.关闭防火墙service iptables stop 2.关闭SELinuxsetenforce 0 3.安装samb ...