jQuery-UI-formbuilder

jQuery-UI-formbuilder is a Ruby on Rails FormBuilder DSL powered by jQuery-UI. A lot of inspiration comes from https://github.com/justinfrench/formtastic.

Prerequisites

• HAML
• SASS
• jQuery theme recomended – http://jqueryui.com/themeroller/

Input Types

• boolean – check box
  • checked_value => “1”
  • unchecked_value => “0”
• check_boxes – list of checkboxes
  • buttonset => true|false
  • collection => Array | relation
• date – text field with jQuery calendar
• email – email field
• file – file field
• hidden – hidden field
• number – number field
  • min => in
  • max => int
  • step => int
• password – password field
• phone – phone field
• radio – radio button
  • collection => Array | relation
• range – range field
  • min => in
  • max => int
  • step => int
• search – search field
• select – select field
  • collection => Array | relation
• string – text field
• text – text area
• url – url field

Common Options

• label => Input label
• no_label => No label tag at all
• as => input type
• required => true | false
• hint => “Text” (output as placeholder)
• collection => [“Value”] | [[“ID”,“Value”]] | object_relation
  • label_method => Method to get label from collection
  • value_method => Method to get label from collection h2. Form for Options
• :novalidate => true
• :autofocus => true

Sample

    = jquery_form_for :sample do |f|
      =f.input :sample_id, :as => :hidden
      =f.fieldset “Person” do
        =f.row do
          =f.input :full_name, :hint => “First name, Last name”, :required => true
          =f.input :funny, :as => :boolean, :hint => “Is this person funny?”, :value => 1
          =f.input :date_of_birth, :as => :date, “data-calendar” => {:dateFormat => “dd.mm.yy”}
        =f.row do
          =f.input :email, :as => :email, :hint => “Can I send You an email?”
          =f.input :phone, :as => :phone, :hint => “(xx)-xxx-xxx-xx”
          =f.input :mobile, :as => :phone, :hint => “(xx)-xxx-xxx-xx”
          =f.input :age, :as => :number, :min => 18, :max => 99, :step => 1, :hint => “What is your age”
          =f.input :homepage, :as => :url, :hint => “Your website”
        =f.row do
          =f.input :photo, :as => :file, :hint => “Upload Your picture”
          =f.input :pet, :collection => [“Cat”,“Dog”,“Hamster”] #Defaults to select
          =f.input :stars, :as => :range
          =f.input :sex, :as => :radio, :collection => [[“M”, “Male”],[“F”,“Female”]], :value => “M”
        =f.input :skills_simple, :as => :check_boxes, :collection => [“Ruby”,“<span class="caps">PHP</span>”, “Perl”, “Java”, “.<span class="caps">NET</span>”, “OjectiveC”], :values => [“Ruby”,“.<span class="caps">NET</span>”]
        =f.input :skills, :as => :check_boxes, :buttonset => true, :collection => [“Ruby”,“<span class="caps">PHP</span>”, “Perl”, “Java”, “.<span class="caps">NET</span>”, “OjectiveC”], :values => [“Ruby”,“.<span class="caps">NET</span>”]
        =f.input :friends, :as => :check_boxes, :buttonset => true, :collection => [[1,“Carl”],[2,“Mary”], [3,“John”], [4,“James”], [5,“Anete”], [6,“Jane”]], :values => [5,2], :hint => “Who are Your friends?”
      =f.fieldset “Misc” do
        =f.input :search_history, :as => :search, :hint => “Search Your history”
      =f.buttons do
        =f.submit
        =f.cancel :icon => “trash”</h2>

TODO

• Date field dateFormat from rails
• autocomplete tag
• Tabs
• Write documentation and samples
• input[range] to jQuery slider?
• confirmation to dialog

Contributing to jquery-ui-formbuilder

• Check out the latest master to make sure the feature hasn’t been implemented or the bug hasn’t been fixed yet
• Check out the issue tracker to make sure someone already hasn’t requested it and/or contributed it
• Fork the project
• Start a feature/bugfix branch
• Commit and push until you are happy with your contribution
• Make sure to add tests for it. This is important so I don’t break it in a future version unintentionally.
• Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.

Copyright

Copyright © 2011 Aivars Akots, released under the MIT license.