Ratchet教程:创建项目

发布于 大漠

通过前面几篇Ratchet教程的介绍,我想大家对Ratchet有一定的了解,或许都蠢蠢欲动,想自己动手制作一个移动项目出来。是的,我也有这样的冲动,刚好五一这几天以Ratchet框架为基础,帮朋友处理了一个移动端的项目,今天我就以主站W3cplus为例,整一个移动端的W3cplus。

废话我就不多说了,我们就开始一起实战吧。

创建项目

在我的电脑中,我将移动项目都放置在一个叫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是永远固定在顶部的:

Ratchet教程:创建项目Ratchet教程:创建项目

在上面的结构基础上进行一下调整:

<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教程:创建项目

为何会这样,我们来查看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>

主内容被顶部标题栏遮盖会依然存在:

Ratchet教程:创建项目

因为当.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"。也就是说,上面的结构,我们是看不到"我是底部内容"这几个文字。通过浏览器调试工具,不难发现。

Ratchet教程:创建项目Ratchet教程:创建项目

查看样式代码,我们可以找出原因:

.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>

这个时候我们来看效果:

Ratchet教程:创建项目Ratchet教程:创建项目

通过上面的一些实例,主要想向大家阐述的是,固定栏的结构一定要写在.content的前面,而且是<body>的子元素

一切内容都放置在.content

除了固定栏.bar内容都必须放置在.content的元素内。而且这个元素必须放在<body>标签内(也就是<body>子元素),同时要置于.bar元素之后,至于为什么?前面已经花了很大的篇幅进行了阐述。

在Ratchet框架中,如果你的内容不是置于.content中,超过一屏将无法通过滚动来展示内容。将上面的结构做一下修改,去掉.content这个类名。

Ratchet教程:创建项目

不要忘记<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

Ratchet教程:创建项目

要实现工具栏为蓝色,我们就需要覆盖.bar的初置样式代码:

.bar{
    background-color: #00a3cf;
}

在这个示例中,将代码置于style.css文件之中,这个时候你刷新浏览器将看到效果:

Ratchet教程:创建项目

以同样的方式,通过调试工具,找到对应需要覆盖的代码与样式:

Ratchet教程:创建项目

这里需要特别注意,因为<a>标签涉及的地方太多,但并不想通过这里的修改影响整个链接的样式,而只希望覆盖部分<a>元素的样式。那么我通过选择器加以限制:

.bar a,
.bar-tab .tab-item,
.bar .title {
    color: #fff;
}

刷新你的浏览器,你可以看到效果:

Ratchet教程:创建项目

是不是有些许的激动。其实这并不是完美的方案。为什么这么说呢?请继续往下看。

Sass文件功能

在Ratchet框架中,提供了很多的Sass文件。那么,要是你懂Sass的话,可以直接通过修改Sass文件中一些代码实现你需要的效果。

如果您从未有接触任何有关于Sass方面的技术,个人建议您先阅读有关于Sass方面的教程

拿个简单的例子,同样实现上面蓝色底,白色标题和icon的效果。这回不是能通过在style.css文件中添加代码来覆盖,而是直接通过Sass文件来修改。在Sass目录中,可以看到有一个variables.scssbars.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的背景色变成了我们需要的颜色:

Ratchet教程:创建项目

此时,可以按照类似的方法进行覆盖:

.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教程:创建项目

跟想像中的相比,是不是觉得原来覆盖Ratchet自带的样式并不是件复杂的事情。那么如何通过Sass来覆盖标题和底部固定栏的效果就留给同学们自己操作了。当你通过Sass的修改,实现了下图的效果,就表示你已基本上掌握了如何通过Sass来重置ratchet.css,达到你自己需要的主题效果。

Ratchet教程:创建项目

总结

在这一节中主要介绍了如何依赖于Ratchet源码创建自己的移动项目,并且详细介绍了创建自己移动项目依赖的文件。最主要的介绍了创建移动项目依赖于Ratchet框架需要注意的几个关键点。而且向大家介绍了如何使用自己掌握的前端技术,来覆盖Ratchet自带的ratchet.css样式,实现适合自己的设计风格。

说了这么多,不知道同学们有没有获取到自己需要的知识点。或许您有更好的覆盖方法,或者是使用Ratchet的经验。真心希望您能与我们一起分享,欢迎在下面的评论中指正文中的不足以及一起探讨相关的使用心得。

如需转载,烦请注明出处:https://www.fedev.cn/mobile/how-to-create-mobile-project-width-ratchet.html

adidas Dame 5 X Marvel 'Black Panther'