(转)Ratchet教程:创建项目
原文:http://www.w3cplus.com/mobile/how-to-create-mobile-project-width-ratchet.html
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
是永远固定在顶部的:
在上面的结构基础上进行一下调整:
<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的经验。真心希望您能与我们一起分享,欢迎在下面的评论中指正文中的不足以及一起探讨相关的使用心得。
如需转载,烦请注明出处:http://www.w3cplus.com/mobile/how-to-create-mobile-project-width-ratchet.html
(转)Ratchet教程:创建项目的更多相关文章
- 前端——Vue-cli 通过UI页面创建项目
在使用该教程创建项目时请先安装vue ui,具体安装方法请百度 1.打开CMD,输入vue ui 2.点击创建按钮,选择项目目录 3.填写项目名 4.配置项目 选择项目所需要的模块
- 原创:MVC 5 实例教程(MvcMovieStore 新概念版:mvc5.0,EF6.01) - 3、创建项目
说明:MvcMovieStore项目已经发布上线,想了解最新版本功能请登录 MVC 影视(MvcMovie.cn) 进行查阅.如需转载,请注明出处:http://www.cnblogs.com/Dod ...
- C#程序员的春天之从零开始学习unity3D游戏开发入门教程二(创建项目及基本面板介绍)
一项目创建: 创建项目是开发的第一步. 运行untiy之后如果是第一次运行会弹出 我们这里随便创建一个项目. 二Untiy面板介绍: 三代码编辑器的切换: 这里我安装了vs2012. 到这里开发环境基 ...
- Spring+SpringMvc+Mybatis框架集成搭建教程一(项目创建)
一.框架搭建环境 Spring 4.2.6.RELEASE SpringMvc 4.2.6.RELEASE Mybatis 3.2.8 Maven 3.3.9 Jdk 1.7 Idea 15.04 二 ...
- thinkphp学习简易教程(一) thinkphp创建项目
1.在本地服务器根目录下创建项目目录,如命名为app: 2.把thinkphp的压缩包解压到与项目同级目录下,如app是放在目录APP下面,即项目目录路径为'APP/app/',则thinkphp应解 ...
- 【Android Studio使用教程2】Android Studio创建项目
创建项目 首先,先指出Android Studio中的两个概念. Project 和 Module .在Android Studio中, Project 的真实含义是工作空间, Module 为一个具 ...
- WebStorm中Node.js项目配置教程(1)——创建项目
Node.js绝对是一个web开发的热点话题,作为web神器的WebStorm也是开发Node.js的佼佼者. 接下来就Node.js项目在WebStorm的配置操作就行详细的讲解,首先是创建项目.两 ...
- ionic3 创建项目至apk打包全过程教程
主要流程: 安装node.js --> 安装jdk --> 安装AndroidSDK --> 安装cordova --> 安装ionic --> 创建项 ...
- sitecore系统教程之内容编辑器中创建项目
在内容编辑器中创建新项目时,必须先在内容树中选择一个项目,以指示新项目的位置.您可以创建一个新项目作为您选择的项目的兄弟或子项目: 兄弟是您在与所选项目相同的级别创建的项目. 子项是您在所选项下创建的 ...
随机推荐
- robot API笔记3
robot.htmldata package 包编写HTML格式的输出文件. 这个包被认为是稳定的但不是公共API的一部分. Submodules robot.htmldata.htmlfilewri ...
- PLI与Pillow
PIL概念 XXXXX 注意 PIL不兼容setuptools. Pillow概念 Pillow(PIL fork)是用来处理raster图像的Python图像库,即像素数据的矩阵. 查阅PIL的 ...
- js中event.target,this
event.target这是注册事件时的对象,或者它的子元素.通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的.经常用于事件冒泡时处理事件委托. 1.this和e ...
- 终端执行python shell的方法
假设有一个Py文件,放在下PycharmProjects/learn下,文件名是 myfile.py. 1.打开终端输入python3进入2.在shell下 输入import sys 回车3.输入 s ...
- hdu---(1421)搬寝室(dp)
搬寝室 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- 简述 Ruby 与 DSL 在 iOS 开发中的运用
阅读本文不需要预先掌握 Ruby 与 DSL 相关的知识 何为 DSL DSL(Domain Specific Language) 翻译成中文就是:"领域特定语言".首先,从定义就 ...
- 你所知道的Java单例模式并不是单例模式
当我们搜索单例模式的时候,能看到很多例子,什么懒汉式.饿汉式,大概如下: public class Singleton { private static Singleton instance=null ...
- CentOS命令登录MySQL时,报错ERROR 1045 (28000):
CentOS命令登录MySQL时,报错ERROR 1045 (28000): Access denied for user root@localhost (using password: NO)错误解 ...
- Floyd 算法的动态规划本质
[转载自:http://www.cnblogs.com/chenying99/p/3932877.html] Floyd–Warshall(简称Floyd算法)是一种著名的解决任意两点间的最短路径(A ...
- POJ 3687 逆序拓扑
额.题目大意:有N个球.编号和重量都是唯一不重复的.然后.给你m个pair a和b,表示编号为a的点一定比编号为b的点轻.然后捏.输出每个点对应的重量.关键是要求.如果有多种可能性的话,输出让序号小的 ...