What Is Jquelpers?

This is a collection of helpers for Ruby on Rails. Jquelpers is a contraction of Jquery and Helpers. Currently it aim to support all the plugins composing Jquery-UI library, but others plugins are note forbidden (like the calculator)

Jquelpers is a fork of jquery-ui-rails-helpers by CodeOfficer (https://github.com/CodeOfficer/jquery-ui-rails-helpers)

I hope you’ll find Jquelpers useful.

Warning !

This fork is not anymore compatible with the original jquery-ui-rails-helpers plugin. If you decide to use this fork, you will have to rewrite your apps (for the best !).

This gem works with Rails 2.3.8 ; I did’nt try anywhere else, but this should work with Rails 3.0 (tell me if it does’nt)

Let’s start

Install 


gem install jquelpers

And require it 


config.gem 'jquelpers'

Set the defaut options. (in progress….) 


Jquelpers.default=
{  :tabs => {:html=> {:class => "styleit"}},
  :accordions => {:html=> {}, :jquery=> ""},
  :datepicker => {:html=> {}, :jquery=> "showButtonPanel: true, showOn: \"both\", buttonImageOnly: true, buttonImage: '/images/calendar.png', " },
  :calculator => {:html=> {}, :jquery=> "useThemeRoller: true, showOn: \"both\", buttonImageOnly: true, buttonImage: '/images/calculator.png', "},
  :autocomplete => {:jquery=> "minLength: 2,"}
  }

Set the location of your files, these are default (if you have the same files you can skip this step) note the %l it is the I18n wildcard, working with I18n.locale ! 


Jquelpers.js_files = [
    [:jquery, "jquery-1.4.4.min"],
    [:core, "jquery.ui.core.min"],
    [:widget, "jquery.ui.widget.min"],
    [:tabs, "jquery.ui.tabs.min"],
    [:accordion, "jquery.ui.accordion.min"],
    [:calculator, "jquery.calculator.min"],
    [:calculator_I18n, "jquery.calculator-%{l}"],
    [:datepicker, "jquery.ui.datepicker.min"],
    [:datepicker_I18n, "jquery.ui.datepicker-%{l}"],
    [:position, "jquery.ui.position.min"],
    [:autocomplete, "jquery.ui.autocomplete.min"]
  ]
Jquelpers.css_files = [
    [:UI, "UI-custom/jquery-ui-1.8.6.custom"],
    [:calculator, "jquery.calculator.alt"]
  ]

IncludesHelper

IncludesHelpers allow Jquelpers to manage when and wich files have to included in the rendered page. 


jquelpers_include_javascript(options = {})
jquelpers_include_stylesheet(options = {})

they have all options of javascript_include_tag & stylesheet_link_tag plus :always => true for including all files all time (bypass clever loading)

Application layout, or any layouts is a good place for these.

TabsHelper

This helper simplifies the code required to use the jQuery UI Tab plugin. 


<% tabs_for :tabs_container :jquery => "collapsible = true" do |tab| %>
  <% tab.create('Tab 1') do %></p>
<ol>
  <li>… insert tab contents
  <% end <span>>
  <</span> tab.create(

Tabs will be rendered in the order you create them. You can easily render a tab conditionally by appending your condition to the end of the ‘create’ block as such … (Cancan gem in this exemple) 


<% tab.create('My Profile') do %>
  # ... insert tab contents
<% end can? :read, Profile %>

You can pass HTML options or JQuery options to either the parent DIV or any individual tab’s DIV (there is no JQuery options for each tab.) as you like … 


<% tabs_for :tabs_container :jquery => "collapsible = true", :class => 'zippy' do |tab| %>
  <% tab.create('Tab 1', :style => 'background: #FFF') do %></p>
<ol>
  <li>

The default DOM ID for the parent div is … id=“tabs” … unless you pass in an HTML option with a different value. And you SHOULD pass an id. Dom id’s are automaticaly genrated, but you can override them (I told you, you can pass html options)

one additonal option is :include => :force in order to load right now all files used by this helpers, could be useful for ajax responses where clever loading is not yet very clever… This option is avaiable for all the helpers included in Jquelpers

AccordionsHelper

This helper simplifies the code required to use JQuery UIs Accordion plugin. Usage is identical to the Tabs helper. 


<% accordions_for do |accordion| %>
  <% accordion.create("accordion_title") do %>
    # ... insert accordion contents
  <% end %>
<% end %>

DatepickerHelper

This helper simplifies the code required to use JQuery UIs Datepicker plugin. Usage is identical to others helpers. 


<% form_for do |f| %>
  <% f.datepicker :date, :jquery => "any option" %>
<% end %>
or outside a form_for : 

  <% datepicker_tag :object_name, :date, :jquery => "any option" %>

AutocompleteHelper

Fork from https://github.com/chris/auto_complete_jquery

This helper simplifies the code required to use JQuery UIs Autocomplete plugin. Usage is identical to others helpers. 


<% form_for do |f| %>
  <% f.autocomplete :drink, :source => "autocomplete_url",:jquery => "any option" %>
<% end %>
or outside a form_for : 

  <% autocomplete_tag :object_name, :drink, :source =>["Water", "Wine", "Juice", "Beer"], :jquery => "any option" %>

:source have to be set and can be an array (for static completion), or a string contening the url of a webservice.

if you have to develop the webservice also you can use the jq_ac_for method in any controller. 


  jq_ac_for :item, :category
Which create an action named jq_ac_for_item_category wich look in the database (to be transformed for a class agnostic search) and give a basic response with found ‘category’ in the ‘Item’ class

CalculatorHelper

For the jQuery Calculator from Keith Wood. (NOT in jquery UI) http://keith-wood.name/calculator.html This helper simplifies the code required this plugin.

Usage is identical to others helpers. 


<% form_for do |f| %>
  <% f.calculator :price, :jquery => "any option" %>
<% end %>
or outside a form_for : 

  <% calculator_tag :object_name, :calculator, :jquery => "any option" %>

Todo.

  • Real support of default options. (one the way)
  • Improve Clever load for js&css files (for Ajax requests)
  • write documentation
  • Write tests (if somebody explain me why and how)