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. Sql语句摘要

    1.分批更新数据库 declare @x intset @x=1 while(@x<=51) begin begin tran update UserFavorite set UserFavor ...

  2. struts2 、mybatis 、easyui 分页

    rows page 控件自动提交这两个参数 pageSize number The page size. 10pageNumber number Show the page number when p ...

  3. (一)在HTML页面中实现一个简单的Tab

    在HTML页面中实现一个简单的Tab 为了充分利用有限的HTML页面空间,经常会采用类似与TabControl的效果通过切换来显示更多的内容.本文将采用一种最为简单的方法来实现类似如Tab页切换的效果 ...

  4. js $.inArray

    var arr = [ "xml", "html", "css", "js" ];   $.inArray(" ...

  5. react-native-echarts构建的图表出现滚动条并且可以滑动的问题

    前段时间做echarts饼状图,按照官方提供的写法完成以后图表可以出来,但是虚拟机上演示出现了滚动条,并且拖动时就会出现空白,双击会缩小像这样       参考GitHub上给出的方法修改成功: no ...

  6. 国外物联网平台（4）：Ayla Networks

    国外物联网平台(4)——Ayla Networks 马智 定位 Ayla企业软件解决方案为全球部署互联产品提供强大的工具 功能 Ayla的IoT平台包含3个主要组成部分: (1) Ayla嵌入式代理A ...

  7. 不同数据库表结构的转化,PowerDesigner的使用教程

    通过学习PowerDesigner工具,学习概念模型,物理模型,面向对象模型,业务模型,以及不同数据库表结构的转化. 通过案例给大家分享,sql server 2008r2 数据库和oracle数据库 ...

  8. Android学习笔记 Gallery图库组件的使用

    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  9. Atcoder Grand Contest 031B（DP，思维）

    #include<bits/stdc++.h>using namespace std;int a[200007];int b[200007];long long dp[200007];lo ...

  10. 使用sshkey，禁用密码登陆，以及git仓库的搭建

    使用sshkey,可以实现免密码登陆服务器,同时关闭ssh service的使用账号密码登陆功能即可 1.首先在客户机添加sshkey(如果是window系统的话需要安装shell终端工具,例如xsh ...