rails 项目中 使用 jquery ui
来源:互联网 发布:外贸出口数据 编辑:程序博客网 时间:2024/04/28 00:43
Usage
in your Gemfile, add:
gem 'jquery-ui-rails'
Require Everything
To require all jQuery UI modules, add the following to your application.js:
//= require jquery.ui.all
Also add the jQuery UI CSS to your application.css:
/* *= require jquery.ui.all */
All images required by jQuery UI are automatically served through the asset pipeline, so you are good to go! For example, this code will add a datepicker:
$(function() { $('.datepicker').datepicker();});
Require Specific Modules
The jQuery UI code weighs 51KB (minified + gzipped) and takes a while to execute, so for production apps it's recommended to only include the modules that your application actually uses. Dependencies are automatically resolved. Simply pick one or more modules from the asset list below.
For example, if you only need the datepicker module, add this to your application.js:
//= require jquery.ui.datepicker
In your application.css, require the corresponding CSS module:
/* *= require jquery.ui.datepicker */
JavaScript Assets
UI Core
//= require jquery.ui.core//= require jquery.ui.widget//= require jquery.ui.mouse//= require jquery.ui.position
You usually do not need to require these directly, as they are pulled in by the other JavaScript modules as needed.
Interactions
//= require jquery.ui.draggable//= require jquery.ui.droppable//= require jquery.ui.resizable//= require jquery.ui.selectable//= require jquery.ui.sortable
For jquery.ui.resizable
and jquery.ui.selectable
, remember to require
their matching CSS files in your application.css as well.
Widgets
//= require jquery.ui.accordion//= require jquery.ui.autocomplete//= require jquery.ui.button//= require jquery.ui.datepicker//= require jquery.ui.dialog//= require jquery.ui.menu//= require jquery.ui.progressbar//= require jquery.ui.slider//= require jquery.ui.spinner//= require jquery.ui.tabs//= require jquery.ui.tooltip
For all of these, remember to require
their matching CSS files in your application.css as well.
I18n
Datepicker has optional i18n modules for non-US locales, named jquery.ui.datepicker-xx[-YY]
(list), for example:
//= require jquery.ui.datepicker//= require jquery.ui.datepicker-pt-BR
Note that you still need to include the main datepicker module. It is not required automatically for performance reasons.
Effects
//= require jquery.ui.effect.all//= require jquery.ui.effect//= require jquery.ui.effect-blind//= require jquery.ui.effect-bounce//= require jquery.ui.effect-clip//= require jquery.ui.effect-drop//= require jquery.ui.effect-explode//= require jquery.ui.effect-fade//= require jquery.ui.effect-fold//= require jquery.ui.effect-highlight//= require jquery.ui.effect-pulsate//= require jquery.ui.effect-scale//= require jquery.ui.effect-shake//= require jquery.ui.effect-slide//= require jquery.ui.effect-transfer
Stylesheet Assets
UI Core
/* *= require jquery.ui.core *= require jquery.ui.theme */
You might want to require these if you do not use any of the following modules, but still want jQuery UI's basic theming CSS. Otherwise they are automatically pulled in as dependencies.
Interactions
/* *= require jquery.ui.resizable *= require jquery.ui.selectable */
Widgets
/* *= require jquery.ui.accordion *= require jquery.ui.autocomplete *= require jquery.ui.button *= require jquery.ui.datepicker *= require jquery.ui.dialog *= require jquery.ui.menu *= require jquery.ui.progressbar *= require jquery.ui.slider *= require jquery.ui.spinner *= require jquery.ui.tabs *= require jquery.ui.tooltip */
Contributing
Bug Reports
For bugs in jQuery UI itself, head to the jQuery UI Development Center.
For bugs in this gem distribution, use the GitHub issue tracker.
Setup
The jquery-ui-rails
gem should work in Ruby 1.8.7 apps. To run the rake tasks, you need Ruby 1.9 however.
git clone git://github.com/joliss/jquery-ui-rails.gitcd jquery-ui-railsgit submodule update --initbundle installbundle exec rake # rebuild assets
Most of the code lives in the Rakefile
. Pull requests are more than welcome!
Hacking jQuery UI
The jquery-ui-rails repository is contributor-friendly and has a git submodule containing the official jquery-ui repo. This way it's easy to hack the jQuery UI code:
cd jquery-uigit checkout master # or 1-8-stable... hack-hack-hack ...bundle exec rake # rebuild assets based on your changes
Assuming your app's Gemfile points at your jquery-ui-rails checkout (gem 'jquery-ui-rails', :path => '~/path/to/jquery-ui-rails'
), all you need to do now is refresh your browser, and your changes to jQuery UI are live in your Rails application.
You can send pull requests to the jquery-ui GitHub project straight out of your submodule. See also their Getting Involved guide.
Testing
As a smoke test, a testapp
application is available in the repository, which displays a check mark and a datepicker to make sure the assets load correctly:
cd testappbundle installrails server
Now point your browser at http://localhost:3000/.
Limitations
Only the base theme (Smoothness) is included. Once it becomes possible to generate all theme files from the jQuery UI sources, we can package all the other themes in the ThemeRoller gallery.
Perhaps we can also add helper tasks to help developers generate assets for their own custom themes or for third-party themes (like Selene).
If you still want a different theme right now, you could probably download a custom theme and require the theme CSS after requiring any other jQuery UI CSS files you need, making sure to serve up the theme images correctly. (This is arguably cumbersome, not officially supported by this gem, and adds 1 KB overhead as both the base theme and the custom theme are served up.)
The
jquery.ui.all.js
file is namedjquery-ui.js
in the official distribution. We should follow their naming. But jquery-rails provides ajquery-ui.js
asset as well, so until that is removed from the jquery-rails gem (see issue #46), we cannot distributejquery-ui.js
without risking conflicts.To reduce confusion, as long as there is no
jquery-ui.js
, we also do not distribute the officialjquery-ui-i18n.js
andjquery-ui.css
. The latter is available asjquery.ui.all.css
however.
- rails 项目中 使用 jquery ui
- rails 项目中 使用 jquery ui
- rails 项目中 使用 jquery ui
- Rails项目中使用jQuery操作session
- jquery-ui-rails
- jquery-rails与jquery-ui-rails
- Jquery UI 中datepicker使用
- Rails项目中使用Cucumber测试
- 如何在rails项目中使用grunt
- Rails 3 选用JQuery and JQuery UI
- 在drupal7中使用jQuery.UI
- jQuery easy ui中datagrid的使用
- Ruby On Rails开发中关于jQuery-datetimepicker-rails的一些使用心得
- vue项目中使用jQuery
- Rails 3.0.x 使用 jquery
- Rails Jquery datepicker 使用教程
- 在项目中使用AngularJS+UI-Grid
- rails中使用bleak_house
- C语言 EOF,NULL(\0),换行符(\n),回车(\r)是什么?区别是什么?
- Java打包方式详解
- 配置 windows azure 项目
- 合作开发用到的几个 设计模式
- 解释:xcode object-c 中atomic、nonatomic
- rails 项目中 使用 jquery ui
- 虚拟主机wordpress 更改内存限制方法
- ubuntu下搭建git server
- 精妙的SQL语句
- 在图片上进行画图操作
- shell中单引号、双引号、反引号的区别(转自互联网)
- x264使用小技巧
- 服务器端口的监控(得到其响应时间)
- 织梦cms技巧:织梦登录后台显示空白页的解决办法