您的位置：首页 > 大数据 > 人工智能

Rails应用开发点滴

2015-07-01 17:06 525 查看

1. Bootstrap安装

Gemfile加入:

gem 'bootstrap-sass', '~> 3.1.1'

命令行运行 bundle install

app\assets\stylesheets\增加文件 bootstrap_and_overrides.css.scss,内容为

@import "bootstrap";

app\assets\javascripts\application.js

//= require bootstrap

2. simple_form安装配置

Gemfile加入:

gem 'simple_form'

运行集成bootstrap的生成器

rails generate simple_form:install --bootstrap

3. /config/application.rb中进行配置更改

在注释出现的相应位置,加入行

config.time_zone = 'Beijing'

config.i18n.default_locale = :cn

4. locale关于中文的处理

在/config目录中: 复制en.yml,命名为cn.yml; 复制simple_form.en.yml, 命名为simple_form.cn.yml;

并打开这两个文件进行相应翻译调整.

5. /app/assets/stylesheets/application.css中, 定制action中设置的notice的显示样式,加入

.alert-notice{
background-color: #dff0d8;
border-color: #b2dba1;
color: #3c763d;
}

这样可以在/app/views/layouts/application.html.erb中的<%= yield %>之间, 一次性插入

<% flash.each do |key, value| %>
<p class="alert alert-<%= key %>"><%= value %></p>
<% end %>

从而规范了所有使用该layout的页面的显示方式,而缺省情况下alert-notice的样式未被定义,Rails生成的页面里都会(不太符合DRY)被加入

<p id="notice"><%= notice %></p>

这样可以把页面里的这行冗余代码删除了.

6. 注意redirect_to两种调用方式对notice的影响

经实际测试, 形式为:

redirect_to ***_path, notice: "****"

的调用, notice消息能够显示; 而形式为:

redirect_to action :actionname, notice: "****"

的调用, notice消息不能够显示;

7. CKEditor安装配置

gem 'ckeditor'

在

app/assets/javascripts/application.js

中加入

//= require ckeditor/init

对定义为text类型的field如:content, 对simple_form生成的代码进行如下修改:

<%= form.input :content, :as => :ckeditor, :input_html => { :ckeditor => {:toolbar => 'Full'} } %>

其中{:toolbar => 'Full'} 也可以设为{:toolbar => 'mini'}, 这样toolbar更加紧凑

此外, CKEditor是在加载时动态替换textarea, 这与Rails的Turbolinks缓存页面机制冲突,会导致再次访问页面时CKEditor显示为textarea, 需要在使用它的页面进行更改:

<body data-no-turbolink="true">

8. Link_to的bootstrap效果调整, 类似下面的设置, 黑色字体在深蓝底色下显示不够明显

<%= link_to '新建字典类型', new_manage_dict_type_path, class: "btn btn-primary btn-sm" %>

在app\assets\stylesheets\增加文件 bootstrap_and_overrides.css.scss中加入以下代码解决

a.btn-primary{ /*缺省a的字体颜色为黑色,不适合*/
color: #fff !important;
}

9. 树控件dtree的安装与设置

解压缩 dtree.zip, 三个部分拷贝到不同位置:

img文件夹 -> public

dtree.css -> app\assets\stylesheets

dtree.js -> app\assets\javascripts

在 dtree.css 中的

.dtree a.node:hover, .dtree a.nodeSel:hover {

内加入如下代码,解决bootstrap使<a>元素在hover时变黑的问题.

background-color: #dff0d8 !important;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航