Ratchet教程:创建项目
2014-05-04 00:00
246 查看
通过前面几篇Ratchet教程的介绍,我想大家对Ratchet有一定的了解,或许都蠢蠢欲动,想自己动手***一个移动项目出来。是的,我也有这样的冲动,刚好五一这几天以Ratchet框架为基础,帮朋友处理了一个移动端的项目,今天我就以主站W3cplus为例,整一个移动端的W3cplus。
废话我就不多说了,我们就开始一起实战吧。
创建项目
在我的电脑中,我将移动项目都放置在一个叫mobile的文件夹中,那么这次我们要做的项目也是一样的,放在了这里,并将其命名为m-w3cplus。项目创建好之后,将下载下来的Ratchet源码悉数复制到m-w3cplus项目的根目录之中。为了更好的使用,我还把Ratchet中的Sass源码也放在了m-w3cplus项目中备用。整个项目文件结构如下:
其中sass目录是Ratchet框架中最原始的.scss文件,可以用来维护ratchet.css文件。在这里引用这些Sass文件是为了实现自定义样式,后续会介绍的。
页面设置
在m-w3cplus项目中,目前仅创建了一个index.html页面,而这个页面引用的是Ratchet的模板页面,不过在实际使用当中,有几个规则必须得掌握:
1、固定栏永远是第一
所有的固定栏,也就是带有类名.bar必须放置在<body>标签内(也就是<body>子元素)。这一点是非常重要的。我们来看一个简单的示例效果:
可以看到我们的顶部标题栏header.bar是永远固定在顶部的:
在上面的结构基础上进行一下调整:
此时虽然标题栏依旧固定在顶部,但主内容有部分是被标题栏给遮盖了:
为何会这样,我们来查看ratchet.css代码,在代码中搜索.bar,我们不难发现有这样的一段代码:
在div.content中使用绝对定位,并且“TRBL”都置为“0”。如此一来,如果.bar放在.content元素中,那么内容会有一部分(大约是"44px")内容会被遮盖。为了解决这个问题,记得.bar得放置在.content外面。而且还要在其前面。如果你结构写成:
主内容被顶部标题栏遮盖会依然存在:
因为当.bar放置在.content之后,样式:
将会失效。当然你会说,我可以重置样式。这样问题是可以解决,但这是不是无形中增加了代码量和自己的工作量。
除了顶部工具栏之外,有时候后我们还会碰到底部工具栏固定。按照我们结构先后顺序,常会写成:
可以看到,我们底部的工具栏将主内容遮掉差不多"50px"。也就是说,上面的结构,我们是看不到"我是底部内容"这几个文字。通过浏览器调试工具,不难发现。
查看样式代码,我们可以找出原因:
从这几行样式代码可以知道,在Ratchet框架中,.bar-footer、.bar-footer-secondary、.bar-tab和.bar-footer-secondary-tab都是通过~通用选择器来控制的。大家都知道通用选择器是控制元素后面要兄弟元素。依此推断,带有.bar的固定栏都应该写在.content元素的前面。将上面的示例修改一下:
这个时候我们来看效果:
通过上面的一些实例,主要想向大家阐述的是,固定栏的结构一定要写在.content的前面,而且是<body>的子元素。
一切内容都放置在.content中
除了固定栏.bar内容都必须放置在.content的元素内。而且这个元素必须放在<body>标签内(也就是<body>子元素),同时要置于.bar元素之后,至于为什么?前面已经花了很大的篇幅进行了阐述。
在Ratchet框架中,如果你的内容不是置于.content中,超过一屏将无法通过滚动来展示内容。将上面的结构做一下修改,去掉.content这个类名。
不要忘记<meta>标签
使用Ratchet框架,另一个重点之处就是别忘了<meta>标签,特别是:
有关于移动端开发中关于 <meta>标签的应用,可以阅读Ratchet系列教程的第二篇《Ratchet教程:meta与link标签》,里面做了详细的描述。
自定义style.css文件
在Ratchet框架基础上,我们添加了一个自定义样式文件style.css文件,这个文件最主要的作用就是用来放置覆盖ratchet.css的样式代码。众说周知,Ratchet框架能帮助我们解决很多移动项目中的一些基本功能。但我们的实际项目,并不一定和Ratchet框架提供的组件是一模一样的。举个实例,如上面的.bar效果中的icon。默认是蓝色的图标,白色的背景。假设我有一个新的设计,固定的工具栏是蓝底,图标是白色的。这个时候依赖于Ratchet我们是无法实现的,我们要做的是在这个基础上进行覆盖,那么覆盖的样式代码建议放置在style.css文件中,这样我们既可以实现项目的需求,而且不影响Ratchet框架提供的基础。一起来实战一下。
使用浏览器的调试工具,可以找到 .bar设置了一个背景色为#fff。
要实现工具栏为蓝色,我们就需要覆盖.bar的初置样式代码:
在这个示例中,将代码置于style.css文件之中,这个时候你刷新浏览器将看到效果:
以同样的方式,通过调试工具,找到对应需要覆盖的代码与样式:
这里需要特别注意,因为<a>标签涉及的地方太多,但并不想通过这里的修改影响整个链接的样式,而只希望覆盖部分<a>元素的样式。那么我通过选择器加以限制:
刷新你的浏览器,你可以看到效果:
是不是有些许的激动。其实这并不是完美的方案。为什么这么说呢?请继续往下看。
Sass文件功能
在Ratchet框架中,提供了很多的Sass文件。那么,要是你懂Sass的话,可以直接通过修改Sass文件中一些代码实现你需要的效果。
如果您从未有接触任何有关于Sass方面的技术,个人建议您先阅读有关于Sass方面的教程。
拿个简单的例子,同样实现上面蓝色底,白色标题和icon的效果。这回不是能通过在style.css文件中添加代码来覆盖,而是直接通过Sass文件来修改。在Sass目录中,可以看到有一个variables.scss和bars.scss文件。那么我们需要变动的就是这两个文件中的部分代码。
在variables.scss文件中我们可以很轻松的看到这样的一段代码:
而在bars.scss文件中可以看到:
对比之下,一目了然,背景色调用了变量中的$chrome-color值。简单的方法就是直接修改variables.scss文件中的颜色变量值。但为了不影响整体的东西。我更建议在variables.scss中添加一个theme的颜色变量:
然后在bars.scss文件中修改调用的变量:
在命令终端编译你的Sass:
这个时候,你可以看到ratchet.css中关于.bar的背景色进行了改变:
这个时候你将看到.bar的背景色变成了我们需要的颜色:
此时,可以按照类似的方法进行覆盖:
效果如下:
跟想像中的相比,是不是觉得原来覆盖Ratchet自带的样式并不是件复杂的事情。那么如何通过Sass来覆盖标题和底部固定栏的效果就留给同学们自己操作了。当你通过Sass的修改,实现了下图的效果,就表示你已基本上掌握了如何通过Sass来重置ratchet.css,达到你自己需要的主题效果。
总结
在这一节中主要介绍了如何依赖于Ratchet源码创建自己的移动项目,并且详细介绍了创建自己移动项目依赖的文件。最主要的介绍了创建移动项目依赖于Ratchet框架需要注意的几个关键点。而且向大家介绍了如何使用自己掌握的前端技术,来覆盖Ratchet自带的ratchet.css样式,实现适合自己的设计风格。
说了这么多,不知道同学们有没有获取到自己需要的知识点。或许您有更好的覆盖方法,或者是使用Ratchet的经验。真心希望您能与我们一起分享,欢迎在下面的评论中指正文中的不足以及一起探讨相关的使用心得。
-
废话我就不多说了,我们就开始一起实战吧。
创建项目
在我的电脑中,我将移动项目都放置在一个叫mobile的文件夹中,那么这次我们要做的项目也是一样的,放在了这里,并将其命名为m-w3cplus。项目创建好之后,将下载下来的Ratchet源码悉数复制到m-w3cplus项目的根目录之中。为了更好的使用,我还把Ratchet中的Sass源码也放在了m-w3cplus项目中备用。整个项目文件结构如下:
ratchet/ ├── css/ │ ├── ratchet.css │ └── stysle.css ├── js/ │ └── ratchet.min.js ├── fonts/ ├── images/ ├── sass/ └── index.html
其中sass目录是Ratchet框架中最原始的.scss文件,可以用来维护ratchet.css文件。在这里引用这些Sass文件是为了实现自定义样式,后续会介绍的。
页面设置
在m-w3cplus项目中,目前仅创建了一个index.html页面,而这个页面引用的是Ratchet的模板页面,不过在实际使用当中,有几个规则必须得掌握:
1、固定栏永远是第一
所有的固定栏,也就是带有类名.bar必须放置在<body>标签内(也就是<body>子元素)。这一点是非常重要的。我们来看一个简单的示例效果:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3cplus</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link href="/css/ratchet.css" rel="stylesheet"> <link rel="stylesheet" href="/css/style.css"> <script src="/js/ratchet.js"></script> </head> <body> <header class="bar bar-nav"> <a href="##" class="icon icon-bars pull-left"></a> <a href="##" class="icon icon-search pull-right"></a> <h1 class="title">W3cplus</h1> </header> <div class="content"> <div style="height: 800px;">我是测试内容</div> </div> </body> </html>
可以看到我们的顶部标题栏header.bar是永远固定在顶部的:
在上面的结构基础上进行一下调整:
<div class="content"> <header class="bar bar-nav"> <a href="##" class="icon icon-bars pull-left"></a> <a href="##" class="icon icon-search pull-right"></a> <h1 class="title">W3cplus</h1> </header> <div style="height: 800px;">我是测试内容</div> </div>
此时虽然标题栏依旧固定在顶部,但主内容有部分是被标题栏给遮盖了:
为何会这样,我们来查看ratchet.css代码,在代码中搜索.bar,我们不难发现有这样的一段代码:
.content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch; background-color: #fff; } .content > * { -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .bar-nav ~ .content { padding-top: 44px; }
在div.content中使用绝对定位,并且“TRBL”都置为“0”。如此一来,如果.bar放在.content元素中,那么内容会有一部分(大约是"44px")内容会被遮盖。为了解决这个问题,记得.bar得放置在.content外面。而且还要在其前面。如果你结构写成:
<div class="content"> <div style="height: 800px;">我是测试内容</div> </div> <header class="bar bar-nav"> <a href="##" class="icon icon-bars pull-left"></a> <a href="##" class="icon icon-search pull-right"></a> <h1 class="title">W3cplus</h1> </header>
主内容被顶部标题栏遮盖会依然存在:
因为当.bar放置在.content之后,样式:
.bar-nav ~ .content { padding-top: 44px; }
将会失效。当然你会说,我可以重置样式。这样问题是可以解决,但这是不是无形中增加了代码量和自己的工作量。
除了顶部工具栏之外,有时候后我们还会碰到底部工具栏固定。按照我们结构先后顺序,常会写成:
<header class="bar bar-nav"> <a href="##" class="icon icon-bars pull-left"></a> <a href="##" class="icon icon-search pull-right"></a> <h1 class="title">W3cplus</h1> </header> <div class="content"> <div style="height: 800px;position:relative;"> <p>我是测试内容</p> <p style="position: absolute;bottom:0;">我是底部内容</p> </div> </div> <footer class="bar bar-tab"> <a href="##" class="tab-item"><span class="icon icon-left-nav"></span>上一篇</a> <a href="##" class="tab-item">下一篇<span class="icon icon-right-nav"></span></a> </footer>
可以看到,我们底部的工具栏将主内容遮掉差不多"50px"。也就是说,上面的结构,我们是看不到"我是底部内容"这几个文字。通过浏览器调试工具,不难发现。
查看样式代码,我们可以找出原因:
.bar-footer ~ .content { padding-bottom: 44px; } .bar-footer-secondary ~ .content { padding-bottom: 88px; } .bar-tab ~ .content { padding-bottom: 50px; } .bar-footer-secondary-tab ~ .content { padding-bottom: 94px; }
从这几行样式代码可以知道,在Ratchet框架中,.bar-footer、.bar-footer-secondary、.bar-tab和.bar-footer-secondary-tab都是通过~通用选择器来控制的。大家都知道通用选择器是控制元素后面要兄弟元素。依此推断,带有.bar的固定栏都应该写在.content元素的前面。将上面的示例修改一下:
<header class="bar bar-nav"> <a href="##" class="icon icon-bars pull-left"></a> <a href="##" class="icon icon-search pull-right"></a> <h1 class="title">W3cplus</h1> </header> <footer class="bar bar-tab"> <a href="##" class="tab-item"><span class="icon icon-left-nav"></span>上一篇</a> <a href="##" class="tab-item">下一篇<span class="icon icon-right-nav"></span></a> </footer> <div class="content"> <div style="height: 800px;position:relative;"> <p>我是测试内容</p> <p style="position: absolute;bottom:0;">我是底部内容</p> </div> </div>
这个时候我们来看效果:
通过上面的一些实例,主要想向大家阐述的是,固定栏的结构一定要写在.content的前面,而且是<body>的子元素。
一切内容都放置在.content中
除了固定栏.bar内容都必须放置在.content的元素内。而且这个元素必须放在<body>标签内(也就是<body>子元素),同时要置于.bar元素之后,至于为什么?前面已经花了很大的篇幅进行了阐述。
在Ratchet框架中,如果你的内容不是置于.content中,超过一屏将无法通过滚动来展示内容。将上面的结构做一下修改,去掉.content这个类名。
不要忘记<meta>标签
使用Ratchet框架,另一个重点之处就是别忘了<meta>标签,特别是:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
有关于移动端开发中关于 <meta>标签的应用,可以阅读Ratchet系列教程的第二篇《Ratchet教程:meta与link标签》,里面做了详细的描述。
自定义style.css文件
在Ratchet框架基础上,我们添加了一个自定义样式文件style.css文件,这个文件最主要的作用就是用来放置覆盖ratchet.css的样式代码。众说周知,Ratchet框架能帮助我们解决很多移动项目中的一些基本功能。但我们的实际项目,并不一定和Ratchet框架提供的组件是一模一样的。举个实例,如上面的.bar效果中的icon。默认是蓝色的图标,白色的背景。假设我有一个新的设计,固定的工具栏是蓝底,图标是白色的。这个时候依赖于Ratchet我们是无法实现的,我们要做的是在这个基础上进行覆盖,那么覆盖的样式代码建议放置在style.css文件中,这样我们既可以实现项目的需求,而且不影响Ratchet框架提供的基础。一起来实战一下。
使用浏览器的调试工具,可以找到 .bar设置了一个背景色为#fff。
要实现工具栏为蓝色,我们就需要覆盖.bar的初置样式代码:
.bar{ background-color: #00a3cf; }
在这个示例中,将代码置于style.css文件之中,这个时候你刷新浏览器将看到效果:
以同样的方式,通过调试工具,找到对应需要覆盖的代码与样式:
这里需要特别注意,因为<a>标签涉及的地方太多,但并不想通过这里的修改影响整个链接的样式,而只希望覆盖部分<a>元素的样式。那么我通过选择器加以限制:
.bar a, .bar-tab .tab-item, .bar .title { color: #fff; }
刷新你的浏览器,你可以看到效果:
是不是有些许的激动。其实这并不是完美的方案。为什么这么说呢?请继续往下看。
Sass文件功能
在Ratchet框架中,提供了很多的Sass文件。那么,要是你懂Sass的话,可以直接通过修改Sass文件中一些代码实现你需要的效果。
如果您从未有接触任何有关于Sass方面的技术,个人建议您先阅读有关于Sass方面的教程。
拿个简单的例子,同样实现上面蓝色底,白色标题和icon的效果。这回不是能通过在style.css文件中添加代码来覆盖,而是直接通过Sass文件来修改。在Sass目录中,可以看到有一个variables.scss和bars.scss文件。那么我们需要变动的就是这两个文件中的部分代码。
在variables.scss文件中我们可以很轻松的看到这样的一段代码:
// Colors // -------------------------------------------------- // Main theme colors $primary-color: #428bca !default; $chrome-color: #fff !default; // Action colors $default-color: #fff !default; $positive-color: #5cb85c !default; $negative-color: #d9534f !default;
而在bars.scss文件中可以看到:
.bar { position: fixed; right: 0; left: 0; z-index: 10; height: $bar-base-height; padding-right: $bar-side-spacing; padding-left: $bar-side-spacing; background-color: $chrome-color; border-bottom: $border-default; -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in. backface-visibility: hidden; }
对比之下,一目了然,背景色调用了变量中的$chrome-color值。简单的方法就是直接修改variables.scss文件中的颜色变量值。但为了不影响整体的东西。我更建议在variables.scss中添加一个theme的颜色变量:
//theme //-------------------------- $theme-bg-color:#00a3cf;
然后在bars.scss文件中修改调用的变量:
.bar { position: fixed; right: 0; left: 0; z-index: 10; height: $bar-base-height; padding-right: $bar-side-spacing; padding-left: $bar-side-spacing; //background-color: $chrome-color; background-color: $theme-bg-color; border-bottom: $border-default; -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in. backface-visibility: hidden; }
在命令终端编译你的Sass:
[airen@airen:/Applications/XAMPP/htdocs/Sites/mobile/m-w3cplus]$ sass --watch sass/ratchet.scss:css/ratchet.css >>> Sass is watching for changes. Press Ctrl-C to stop.
这个时候,你可以看到ratchet.css中关于.bar的背景色进行了改变:
.bar { position: fixed; right: 0; left: 0; z-index: 10; height: 44px; padding-right: 10px; padding-left: 10px; background-color: #00a3cf; border-bottom: 1px solid #dddddd; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
这个时候你将看到.bar的背景色变成了我们需要的颜色:
此时,可以按照类似的方法进行覆盖:
.bar { position: fixed; right: 0; left: 0; z-index: 10; height: $bar-base-height; padding-right: $bar-side-spacing; padding-left: $bar-side-spacing; //background-color: $chrome-color; background-color: $theme-bg-color; border-bottom: $border-default; -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in. backface-visibility: hidden; > a { color: $card-bg; } }
效果如下:
跟想像中的相比,是不是觉得原来覆盖Ratchet自带的样式并不是件复杂的事情。那么如何通过Sass来覆盖标题和底部固定栏的效果就留给同学们自己操作了。当你通过Sass的修改,实现了下图的效果,就表示你已基本上掌握了如何通过Sass来重置ratchet.css,达到你自己需要的主题效果。
总结
在这一节中主要介绍了如何依赖于Ratchet源码创建自己的移动项目,并且详细介绍了创建自己移动项目依赖的文件。最主要的介绍了创建移动项目依赖于Ratchet框架需要注意的几个关键点。而且向大家介绍了如何使用自己掌握的前端技术,来覆盖Ratchet自带的ratchet.css样式,实现适合自己的设计风格。
说了这么多,不知道同学们有没有获取到自己需要的知识点。或许您有更好的覆盖方法,或者是使用Ratchet的经验。真心希望您能与我们一起分享,欢迎在下面的评论中指正文中的不足以及一起探讨相关的使用心得。
-
相关文章推荐
- 虚拟主机测评:盘点6个选择虚拟主机常犯的错误
- discuz ucenter 密码忘记了找回密码方法
- c++ server example
- c++ client example
- 地理信息系统控件GIS控件TatukGIS Developer Kernel 下载及介绍
- 数据抽取工具——DMCTextFilter V4.2(纯文本抽出通用程序库)
- 使用Spring设计和实现Web应用程序 开发指引(三)
- 表的复制
- mono环境搭建
- Intel显卡自动调节屏幕刷新率
- PLSQL中 EXECUTE IMMEDIATE语句(带有语法)
- Win8、OneNote快捷键冲突
- PHP base64+gzinflate压缩编码和解码代码
- 基于 Perl 实现的批量文件的 MD5 自动化校验工具
- Myeclipse 10 for mac 安装过程及myeclipse 10 for mac 破解
- 一行命令搞定/usr/bin/perl^M: bad interpreter
- 数据库查询生成器控件集Active Query Builder下载及介绍大全
- POSIX 线程详解
- std::function与std::bind 函数指针
- C/C++编译过程理解