Sử dụng Bootstrap's javascrip trong rails

I, Giới thiệu về bootstrap

• Bootstrap là một framework giúp cho các nhà phát triển có thể dễ dàng tạo ra một thiết kế đẹp cho một trang web hoặc một ứng dụng web. Bootstrap có các class mà css đã được xác định để tạo thành phần chung như widget, font chữ, lists, forms, và nhiều hơn nữa. Framework cũng cung cấp Javascript giúp chúng ta dễ dàng để tạo ra những thứ như modals, popovers, scrollspies, accordions... Một số ưu điểm chính khi sử dụng bootstrap
  • Dễ dàng sử dụng và tùy biến.
  • Tiết kiệm thời gian khi thiết kế giao diện.
  • định dạng cơ bản cho hầu hết các thẻ HTML (Typography, Code, Bảng, Dạng, Buttons, hình ảnh, biểu tượng)
  • Danh sách rộng rãi của các thành phần
  • Có Javascript đi kèm.
  • hỗ trợ Responsive trong việc việt thiết kê màn hình cho các thiết bị.

II. Sử dụng bootstrap's javascript trong rails

1, Tạo một ứng dụng rails

Trước hêt chúng ta cần tạo một ứng dụng rails để sử dụng bootstrap

rails new demo_bootstrap

tạo một model Task cho app:

rails generate scaffold Task title:string tasks:text

Migrate để thay đổi database

rake db:migrate

cài đặt đơn giản cho routes in file config/routes.rb

# config/routes.rb
Rails.application.routes.draw do
resources :tasks
root 'tasks#index'
...

Để sử dụng bootstrap trong ứng dụng rails, chúng ta cần add bootstrap gem cho ứng dụng trong Gemfile

# Gemfile
...
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'

sau đó chạy bundle install để cập nhật gem. Ngoài ra, chúng ta cần require cho các file js của bootstrap khi compile chúng trong file app/assets/javascripts/application.js

// app/assets/javascripts/application.js
...
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

2, Sử dụng chức năng của bootstrap's javascript trong rails

• Modals: Modals là các "pop-ups" được chứa trong trang chúng ta đang sử dụng và không được mở trên một cửa sổ mới của trình duyệt. Trong ứng dụng của chúng ta, chúng ta sẽ sử dụng modals để hiện thị các nội dung công việc. Để thay đổi nó, chúng ta sẽ thay đổi trong app/views/tasks/index.html.erb. ta cần thay đổi từ:

<%= task.content %>

sang

<div class="modal fade" id="task-<%= task.id %>-tasks" tabindex="-1" role="dialog" aria-labelledby="task-<%= task.id %>-label" aria-hidden="true">
.<div class="modal-dialog">
..<div class="modal-content">
...<div class="modal-header">
....<h4 class="modal-title" id="task-<%= task.id %>-label">Content</h4>
...</div>
...<div class="modal-body">
....<%= task.content %>
...</div>
...<div class="modal-footer">
....<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
...</div>
..</div>
.</div>
</div>

sau khi chúng ta refresh trình duyệt, kích vào link "View content" để xem kết quả.

• Dropdowns: Bầy giờ chúng ta sẽ sử dụng 1 dropdowns để tạo 1 menu cho ứng dụng của chúng ta với các nút chuẩn, nav-pills của bootstrap. Chúng ta sẽ dùng dropdown trong file app/views/shared/_navigation.html.erb như sau

<nav clasủas="navbar navbar-default" role="navigation">
.<div class="container">
..<div class="navbar-header">
...<a class="navbar-brand" href="/">Tasks</a>
..</div>
..<ul class="nav navbar-nav navbar-right">
...<li class="dropdown">
....<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></a>
....<ul class="dropdown-menu" role="menu">
....<li><a href="#">Login</a></li>
....<li class="divider"></li>
....<li><%= link_to 'Create a task', new_task_path %></li>
...</ul>
..</li>
..</ul>
.</div>
</nav>

• Tooltips: Tooltips là lựa chọn tôt để thay thế thuộc tính title của các thẻ HTML. Chúng ta sẽ thay đổi việc hiển thi thuộc tính title trong app/views/tasks/index.html.erb file. Từ

<%= task.title %>

sang

<td>
<span class="has-tooltip" data-toggle="tooltip" title="<%= "Created on #{task.created_at.strftime("%m/%e/%Y at %w:%M %p")}, Last modified on #{task.updated_at.strftime("%m/%e/%Y at %w:%M %p")}" %>">
<%= task.title %>
</span>
</td>

refresh trình duyệt, rùi di chuyển chuột lên lên title của task cần xem thông tin thi ta sẽ thấy tooltip chứa các thông tin sẽ hiển thị lên.

• Popovers: Popovers là một thành phần trong bootstrap tương tự như tooltip. Ngoài ra nó cũng có thể chứa thêm các thành phần khác như các mẫu html, định dạng vị trí hiển thị... ví dụ trong app của chúng ta sẽ thêm một link dùng cho việc hiển thị content của task thông qua việc dùng Popovers. thêm 1 thẻ td có chứa đoạn code sau:

<button type="button" class="btn btn-link has-popover" data-toggle="popover" title="Content"
data-content="<%= task.content %>">View Content (popover)</button>
Và chúng ta cũng cần thêm một đoạn javascript đê hiên thị popovers
$(document).ready(function() {
.$('.has-tooltip').tooltip();
.$('.has-popover').popover({
...trigger: 'hover'
.});
});

ở đây, chúng ta sử dụng trigger hover để hiển thị popovers, ngoài ra có thể sử dụng các sự kiện khác để popovers hiển thị.

Tài liệu tham khảo: http://getbootstrap.com/javascript/ Demo: https://github.com/dinhhuan/Demo_bootstrap