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. python3--装饰器高级学习版

    __author__ = "Aaron Fan"import time #导入time模块user,passwd = 'alex','abc123' #用户名密码def auth( ...

  2. CKEdiotr入门级使用

    CKEdiotr是一款不错的网页富文本编辑器,其内置的功能最大满足用户的需求,先将CKEditor的简单实用做个总结,以便于日后查看.使用.我用的是.net平台,故而以下介绍的是.net的CKEdit ...

  3. 黑盒测试实践--Day7 12.1

    黑盒测试实践--Day7 12.1 今天完成任务情况: 录制小组作业中的自动化测试工具实践视频 汇总大家提交的各种作业模块,打包完成小组共同作业 小组成员完成个人情况说明后在截止时间前分别提交作业 小 ...

  4. [GO]猜数字的小游戏

    随机生成四位数字,然后用户输入四位数字,然后根据提示一步步猜到随机数 package main import ( "math/rand" "time" &quo ...

  5. Long-Polling, Websockets, SSE(Server-Sent Event), WebRTC 之间的区别与使用

    1.首先看下最简单的SSE: 只用支持SSE的浏览器(大部分)即可,浏览器内置EventSource对象,该对象默认隔三秒刷新一下response的数据. HTML代码(取自w3cschool): & ...

  6. java 七牛上传图片到服务器（采用的html5 压缩 传输base64方式）

    //html 页面如下<div class="form-group"> <label class="col-sm-2 control-label&quo ...

  7. [转]Replace all UUIDs in an ATL COM DLL.

    1. Introduction. 1.1 Recently, a friend asked me for advise on a very unusual requirement. 1.2 He ne ...

  8. JSP页面导出PDF格式文件

    JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/ ...

  9. 关于windows上 web 和 ftp 站点的创建及使用

    关于windows上 web 和 ftp 站点的创建及使用 引言 其实这是我网络基础课上的一次作业,觉得挺实用的,遂写成博客分享,也算是对这次作业的一次总结. 实验目的 通过此实验掌握WEB和FTP站 ...

  10. django 实现电子支付功能

    思路:调用第三方支付 API 接口实现支付功能.本来想用支付宝来实现第三方网站的支付功能的,但是在实际操作中发现支付宝没有 Python 接口,网上虽然有他人二次封装的的 Python 接口,但是对我 ...