SUI Mobile的简单引入
2016-06-13 00:00
585 查看
摘要: 1.官方文档;
2.引入sui Mobile
下面引入的sui mobile的基本模板:
引入sui mobile必须引入的几个文件:
1.引入css文件:
2.引入js文件:
3.另外一个js文件:
4.提示:
关于sui mobile的可视区域的说明:
2.引入sui Mobile
下面引入的sui mobile的基本模板:
[code=language-html]<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>我的生活</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/favicon.ico"> <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"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> </head> <body> <div class="page-group"> <div class="page page-current"> <!-- 你的html代码 --> </div> </div> //这个最好放着head便签中 <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> //这个不一定需要引入,这个是需要使用sui mobile的扩展组件才需要引入 <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script> </body> </html>
引入sui mobile必须引入的几个文件:
1.引入css文件:
[code=language-html]//可以在head便签中引入一下css文件 //必须引入这个css文件 <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> //下面是需要使用扩展模块才需要引入 <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
2.引入js文件:
[code=language-html]//这个必须引入 <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> //这个不一定需要引入,这个是需要使用sui mobile的扩展组件才需要引入 <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
3.另外一个js文件:
[code=language-html]/*以下两种方式的引入,都最好在head便签中引入*/ //这是一个类似jQuery的js库文件(必须) <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> //若如果需要使用jQuery则去上面的引入,而使用下面的引入: <script type='text/javascript' src='__PUBLIC__/js/jquery-1.11.3.js' charset='utf-8'></script> <script>var Zepto = jQuery</script> //但据官方在github上的说明,这样使用是会有点问题,但目前我没有发现有什么问题
4.提示:
关于sui mobile的可视区域的说明:
[code=language-html]<div class="page-group"> <div class="page page-current"> <!-- 在这里面写的html带才是可视的 --> </div> </div> <!--在这外面的html代码都是不可见的-->
相关文章推荐
- SUI Mobile:侧栏组件的使用
- build your own lisp ch5
- iptables中DNAT、SNAT和MASQUERADE的作用
- <LeetCode OJ> 60. Permutation Sequence
- 双端队列(Double-ended Queue)
- 代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧
- VUEJS 实战教程第三章,利用laypage插件实现分页
- UIDocumentInteractionController 预览和打开文档
- request获取各种路径总结
- [LeetCode]problem 60. Permutation Sequence
- VUEJS实战教程第一章,构建基础并渲染出列表
- gem5——building up-to-date kernels for gem5 running on ARM
- 2016 UESTC Training for Graph Theory
- UEditor之图片上传如何和真实项目结合
- UVA1252 Twenty Questions
- String 和StringBuilder的区别以及相互转换
- Android 更新UI的几种方式
- packet for query is too large <1781> 1024 >. you can change this value on the server by setting the
- 【Mongo】MongoVUE的使用
- 聊聊Android优秀的图片加载缓存的开源框架?UIL、Glide、Picasso