rails 项目中 使用 jquery ui

Usage

in your Gemfile, add:

<code class="ruby"><span class="id identifier rubyid_gem">gem</span> <span class="tstring" style="color:#36a7;"><span class="tstring_beg">'</span><span class="tstring_content">jquery-ui-rails</span><span class="tstring_end">'</span></span>
</code>

Require Everything

To require all jQuery UI modules, add the following to your application.js:

<code class="javascript">//= require jquery.ui.all
</code>

Also add the jQuery UI CSS to your application.css:

<code class="css">/*
 *= require jquery.ui.all
 */
</code>

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:

<code class="javascript">$(function() {
  $('.datepicker').datepicker();
});
</code>

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:

<code class="javascript">//= require jquery.ui.datepicker
</code>

In your application.css, require the corresponding CSS module:

<code class="css">/*
 *= require jquery.ui.datepicker
 */
</code>

JavaScript Assets

UI Core

<code class="javascript">//= require jquery.ui.core
//= require jquery.ui.widget
//= require jquery.ui.mouse
//= require jquery.ui.position
</code>

You usually do not need to require these directly, as they are pulled in by the other JavaScript modules as needed.

Interactions

<code class="javascript">//= require jquery.ui.draggable
//= require jquery.ui.droppable
//= require jquery.ui.resizable
//= require jquery.ui.selectable
//= require jquery.ui.sortable
</code>

For jquery.ui.resizable and jquery.ui.selectable, remember to require their matching CSS files in your application.css as well.

Widgets

<code class="javascript">//= 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
</code>

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:

<code class="javascript">//= require jquery.ui.datepicker
//= require jquery.ui.datepicker-pt-BR
</code>

Note that you still need to include the main datepicker module. It is not required automatically for performance reasons.

Effects

<code class="javascript">//= 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
</code>

Stylesheet Assets

UI Core

<code class="css">/*
 *= require jquery.ui.core
 *= require jquery.ui.theme
 */
</code>

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

<code class="css">/*
 *= require jquery.ui.resizable
 *= require jquery.ui.selectable
 */
</code>

Widgets

<code class="css">/*
 *= 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
 */
</code>

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.

<code class="bash">git clone git://github.com/joliss/jquery-ui-rails.git
cd jquery-ui-rails
git submodule update --init
bundle install
bundle exec rake # rebuild assets
</code>

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:

<code class="bash">cd jquery-ui
git checkout master  # or 1-8-stable
... hack-hack-hack ...
bundle exec rake  # rebuild assets based on your changes
</code>

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:

<code class="bash">cd testapp
bundle install
rails server
</code>

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 named jquery-ui.js in the official distribution. We should follow their naming. But jquery-rails provides a jquery-ui.js asset as well, so until that is removed from the jquery-rails gem (see issue #46), we cannot distribute jquery-ui.js without risking conflicts.

  To reduce confusion, as long as there is no jquery-ui.js, we also do not distribute the official jquery-ui-i18n.js and jquery-ui.css. The latter is available as jquery.ui.all.css however.