Greg's Blog

Jquery Gem安裝相關特效

: Gem Rails

倒數時間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下載來到本地。
請先建立好

  1. vendor/assets/stylesheets
  2. vendor/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完成

參考資源

Related Posts