Library of scripts and styles to assist in adding select2 user interfaces to the bike inventory application.
See select2-rails for basics for setup
Add 'select2-rails', 'select2-bikebinder' and additional asset dependencies to your application Gemfile
gem "jquery-rails"
gem "jquery-ui-rails"
gem "i18n-js"
gem "select2-rails"
gem "select2-bikebinder"
Clone the select2-bikebinder repository and specify a local path in the Gemfile
# specify a local path to the gem
gem "select2-bikebinder", :path => "/path/to/repo/select2-bikebinder"
bundle install
Clone the select2-bikebinder repository, build then install
cd /path/to/repo/select2-bikebinder
gem build select2-bikebinder.gemspec
gem install select2-bikebinder-VER.gem
rails g select2_bike_binder:install
rake i18n:js:setup
Add the following to your app/assets/javascripts/application.js
:
//= require select2
//= require i18n
//= require 'jquery'
//= require 'jquery.ui.all'
//= require i18n/translations
//= require select2/select2_builder
//
// scripts for each select2 interface element
//= require select2/wheel_select
//= require select2/color_select
//= require select2/bike_model_brand_select
Add to your app/assets/stylesheets/application.css
:
*= require select2
*= require jquery.ui.all
*= require select2/wheel_select
*= require select2/color_select
# examples of CSS selectors for form elements
css_selector = "*.#{Select2BikeBinder::Builder::WheelDiameterSelect.selector_class}"%>",
css_class = Select2BikeBinder::Builder::ModelNestedBrandSelect.selector_class
brand_name ="*.#{Select2BikeBinder::Builder::ModelNestedBrandSelect::Selector[:brand_name]}"
brand_id ="*.#{Select2BikeBinder::Builder::ModelNestedBrandSelect::Selector[:brand_id]}"
<script type="text/javascript">
I18n.locale = "<%= I18n::locale %>"; //specify locale
$(document).ready(
function() {
select_init(sel2.WheelSelectBuilder)
select_init(sel2.ColorSelectBuilder)
select_init(sel2.ModelNestedBrandSelectBuilder,
{optns:{api_url:"<%= bike_mfg_queries_url %>",
brand_api_url: "<%= brand_queries_url %>",
model_api_url: "<%= model_queries_url %>",
}});
select_init(sel2.BrandSelectBuilder,
{optns:{api_url:"<%= search_brands_url %>"}});
select_init(sel2.ModelSelectBuilder,
{optns:{api_url:"<%= search_models_url %>"}});
}
);}
</script>
<h1>Examples</h1>
<h2>Stand-alone selects</h2>
<%= render Select2BikeBinder::Builder::ModelNestedBrandSelect.new('me2b') %>
<%= render Select2BikeBinder::Builder::WheelDiameterSelect.new('e2b', :multiple=>true, :value=>"622,559,630") %>
<%= render Select2BikeBinder::Builder::WheelDiameterSelect.new('e1b', :value=>'591') %>
<%= render Select2BikeBinder::Builder::WheelDiameterSelect.new('e3b', :width=>'200px', :multiple=>true, :compact=>true) %>
<%= render Select2BikeBinder::Builder::BrandSelect.new('me2b' ) %>
<%= render Select2BikeBinder::Builder::ModelSelect.new('b234' ) %>
<%= render Select2BikeBinder::Builder::ColorSelect.new( 's5c', :multiple=>true, :compact=>false) %>
<h2>Form-builder selects</h2>
<%= form_for(@obj, :url => root_path) do |f| %>
<%= f.label :color, "Color" %>
<% color_optns = {:multiple=>false, :param_key => 'color', :value=>bike.color.key} %>
<%= render Select2BikeBinder::Builder::ColorSelect.new f, color_optns %>
<%= f.label :wheel_size, "Wheel Size" %>
<%= render Select2BikeBinder::Builder::WheelDiameterSelect.new(f,
:param_key=>'wheel_size', :multiple=>false, :value=>bike.wheel_size, :width=>"90%") %>
<div style="border:1px solid #333">
<%= render :partial=>'select2_ui/brand_model_lookup_create', :locals =>{:form_builder =>f} %>
</div>
<% end %>
See license file.