倒數時間countdowngem安裝方式gem 'countdown'
使用在view的方式
<%= countdown Time.now + 28.hours %>
or
<%= countup 1.hour, step: :seconds %>
WOW滑入滑出特效
documnet ready 啟用特效
(function() {
// initialization code here
new WOW().init();
// do somethings.....
})();
使用在 class 裡面以及加相當的資訊去做調配 在erb檔案如果有 - 符號請使用 _ 去做替代
<%= image_tag(product.image.thumb.url, class: "thumbnail" , data: { wow_delay: "1.5s" }) %>
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
介紹星等評分的JqueryRaty套件，去官網上面 Clone下載來到本地。
請先建立好
vendor/assets/stylesheetsvendor/assets/javascripts
public/images目錄lib/jquery.raty.css放到vendor/assets/stylesheets/目錄下
lib/jquery.raty.js放到vendor/assets/javascripts/目錄下。
images 下所有圖片，放在 public/images 目錄下
加載 raty相關軟件
app/assets/javascript/application.js底下新增
//= require jquery.raty
app/assets/stylesheets/application.scss底下新增
@import "jquery.raty";
使用方式在 View上面
<div class="raty" data-score= "core"></div>
使用 ajax
$(".raty").raty({
path: '/images/',
//score 初始函示 使用data抓取值
score: function() { return $(this).data('score'); },
//在這觸發且送出請求post到後端給予星等去做評分動作
click: function(score) {
var that = this;
$.ajax({
url: $(this).data("score-url"),
method: "POST",
data: { score: score },
dataType: "json",
success: function(data){
//do somethings...
}})
}
});
下拉式搜尋選單jQuery Plugin Select2，使用Gemfile安裝gem "select2-rails"。
In app/assets/javascripts/application.js
//= require select2
再來是安裝 bootstrap 這套件有提供 bootstrap樣式
In app/asssets/stylesheets/application.scss
@import "select2";
@import "select2-bootstrap";
在頁面上使用做連結啟用
$("#elementid").select2()
動態新增formnested_form_field，Gemfile安裝gem "nested_form_fields"
在app/assets/javascripts/application.js新增
//= require nested_form_fields
套用在tickets 這個form上做一個定位
<%= f.nested_fields_for :tickets do |tt| %>
套用刪除表單
<%= tt.remove_nested_fields_link "要移除的表單", :class => "btn btn-danger" %>
新增表單
<%= f.add_nested_fields_link :tickets, "新增表單", :class => "btn btn-default" %>
日期選擇器Gembootstrap-datepicker，在Gemfile 安裝gem 'bootstrap-datepicker-rails'。
在app/assets/javascripts/application.js新增
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.zh-TW
在app/assets/stylesheets/application.scss新增以下指令
@import "bootstrap-datepicker3";
在View上面 請指定欄位為 text or textbox
<%= ff.text_field :birthday, :class => "form-control" %>
最重要的是下面script這段 點選時候他就會觸發 時間選擇器
$("#birthdayid").datepicker({ format: "yyyy-mm-dd" });
使用所見所得(WYSIWYG) 的編輯器，又叫 Rich Editor。
ckeditor，Gemfile安裝gem 'ckeditor'。
在app/assets/javascripts/application.js新增以下指令記得要在require_tree之上
//= require ckeditor/init
在view上套用cktext_area
toolbar: 'mini'可以讓畫面變比較簡潔
<%= f.cktext_area :description, ckeditor: { toolbar: 'mini', language: 'zh-TW'} %>
在config/initializers/assets.rb新增以下指令
Rails.application.config.assets.precompile += %w(ckeditor/*)
ckeditor完成
REFERENCE / 8