Wijmo is a complete kit of over 40 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo. Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.
If you want to use Wijmo, go to wijmo.com to get started. Or visit the Wijmo Forum for discussions and questions.
This gem packages the Wijmo UI 2.2.0 assets (JavaScripts, stylesheets, and images) for the Rails 3.1+ asset pipeline, so you never have to download a custom package through the web interface again.
In your Gemfile, add:
gem 'Wijmo'
To require all wijmo UI modules, add the following to your application.js:
//= require wijmo.ui.all
Also add the wijmo UI CSS to your application.css:
/*
*= require wijmo.ui.all
*/
All images required by Wijmo 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();
});
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 wijmo.ui.datepicker
In your application.css, require the corresponding CSS module:
/*
*= require wijmo.ui.datepicker
*/
//= require wijmo.ui.core
//= require wijmo.ui.widget
//= require wijmo.ui.mouse
//= require wijmo.ui.position
You usually do not need to require these directly, as they are pulled in by the other JavaScript modules as needed.
//= require wijmo.ui.draggable
//= require wijmo.ui.droppable
//= require wijmo.ui.resizable
//= require wijmo.ui.selectable
//= require wijmo.ui.sortable
For wijmo.ui.resizable and wijmo.ui.selectable, remember to require
their matching CSS files in your application.css as well.
//= require wijmo.ui.accordion
//= require wijmo.ui.autocomplete
//= require wijmo.ui.button
//= require wijmo.ui.datepicker
//= require wijmo.ui.dialog
//= require wijmo.ui.menu
//= require wijmo.ui.progressbar
//= require wijmo.ui.slider
//= require wijmo.ui.spinner
//= require wijmo.ui.tabs
//= require wijmo.ui.tooltip
For all of these, remember to require their matching CSS files in your
application.css as well.
Datepicker has optional i18n modules for non-US locales, named
wijmo.ui.datepicker-xx[-YY]
(list),
for example:
//= require wijmo.ui.datepicker
//= require wijmo.ui.datepicker-pt-BR
Note that you still need to include the main datepicker module. It is not required automatically for performance reasons.
//= require wijmo.ui.effect.all
//= require wijmo.ui.effect
//= require wijmo.ui.effect-blind
//= require wijmo.ui.effect-bounce
//= require wijmo.ui.effect-clip
//= require wijmo.ui.effect-drop
//= require wijmo.ui.effect-explode
//= require wijmo.ui.effect-fade
//= require wijmo.ui.effect-fold
//= require wijmo.ui.effect-highlight
//= require wijmo.ui.effect-pulsate
//= require wijmo.ui.effect-scale
//= require wijmo.ui.effect-shake
//= require wijmo.ui.effect-slide
//= require wijmo.ui.effect-transfer
/*
*= require wijmo.ui.core
*= require wijmo.ui.theme
*/
You might want to require these if you do not use any of the following modules, but still want wijmo UI's basic theming CSS. Otherwise they are automatically pulled in as dependencies.
/*
*= require wijmo.ui.resizable
*= require wijmo.ui.selectable
*/
/*
*= require wijmo.ui.accordion
*= require wijmo.ui.autocomplete
*= require wijmo.ui.button
*= require wijmo.ui.datepicker
*= require wijmo.ui.dialog
*= require wijmo.ui.menu
*= require wijmo.ui.progressbar
*= require wijmo.ui.slider
*= require wijmo.ui.spinner
*= require wijmo.ui.tabs
*= require wijmo.ui.tooltip
*/
For bugs in wijmo UI itself, head to the wijmo UI Development Center.
For bugs in this gem distribution, use the GitHub issue tracker.
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.git
cd jquery-ui-rails
git submodule update --init
bundle install
bundle exec rake # rebuild assets
Most of the code lives in the Rakefile. Pull requests are more than welcome!
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-ui
git 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 Wijmo checkout (gem 'Wijmo', :path => '~/path/to/Wijmo'), all you need to do
now is refresh your browser, and your changes to Wijmo UI are live in your
Rails application.
You can send pull requests to the Wijmo GitHub project straight out of your submodule.
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 testapp
bundle install
rails server
Now point your browser at http://localhost:3000/.
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 wijmo.ui.all.css however.
FAQs
Unknown package
We found that Wijmo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.