open source projects

by Flvorful.com

Rails Plugins
jQuery Plugins
OS ActionScript

SuperInPlaceControls

download & install docs demo

Projects

Rails

jQuery

EasyHTMLTags

Actionscript 3.0

BetterFLV

Latest news

Nov 2: new version of SuperInPlaceControls plugin released with support for Rails 2.1 and 2.3. Also added better jquery support and validation support

Links:

TextField with Label

code text_field_with_label :product, :title produces Title:
HTML Output

<label id="product_title_label" class="text_field_label" for="product_title">Title: </label>
<input id="product_title" class="input_text_field" type="text" value="123" size="30" name="product[title]" input_type="text_field"/>
<br/>

TextArea with Label

code textarea_field_with_label :product, :description produces Description:
HTML Output

<label id="product_description_label" class="textarea_label" for="product_description">Description: </label>
<textarea id="product_description" class="input_textarea" rows="20" name="product[description]" input_type="textarea" cols="40"/>
<br/>

Select with Label

code select_field_with_label :product, :product_type produces Price:
HTML Output

<label id="product_price_label" class="select_label" for="product_price">Price: </label>
<select id="product_price" class="input_select" name="product[price]">
	<option value="699">699</option>
	<option value="799">799</option>
	<option value="899">899</option>
	<option value="999">999</option>
</select>
<br/>

Checkbox with Label

code checkbox_field_with_label :product, :agree_to_terms, {:human_name => "I agree to the terms and conditions"} produces I agree to the terms and conditions
HTML Output

<input id="product_agree_to_terms" class="input_checkbox" type="checkbox" value="1" name="product[agree_to_terms]"/>
<input type="hidden" value="0" name="product[agree_to_terms]"/>
<label id="product_agree_to_terms_label" class="checkbox_label" for="product_agree_to_terms">I agree to the terms and conditions </label>
<br/>

Radio with Label

code

radio_button_with_label :product, :product_type, "Awesomeness"
radio_button_with_label :product, :product_type, "Phatness"

produces Awesomeness
Phatness
HTML Output

<input type="radio" value="Awesomeness" name="product[product_type]" id="product_product_type_awesomeness" class="input_radio"/>
<label id="product_product_type_awesomeness_label" for="product_product_type_awesomeness" class="radio_label">Awesomeness </label><br/>

<input type="radio" value="Phatness" name="product[product_type]" id="product_product_type_phatness" class="input_radio"/>
<label id="product_product_type_phatness_label" for="product_product_type_phatness" class="radio_label">Phatness </label><br/>

Checkbox Collection with Labels

code checkbox_collection :product, :category_ids, @product, Category.find(:all).map { |e| [e.id, e.title] } produces Arts & Entertainment
Automotive
Business & Industrial
Culture & Society
Education
Employment & Recruiting
Finance
Games
Health
Hobbies
Home & Garden

HTML Output

<form>
  <input checked="checked" class="inplace_checkbox" id="product_category_ids_748" name="product[category_ids][]" type="checkbox" value="748"> 
  <label class="checkbox_collection_label" for="product_category_ids_748">Arts &amp; Entertainment</label><br>
  
  <input checked="checked" class="inplace_checkbox" id="product_category_ids_749" name="product[category_ids][]" type="checkbox" value="749"> 
  <label class="checkbox_collection_label" for="product_category_ids_749">Automotive</label><br>
  
  <input checked="checked" class="inplace_checkbox" id="product_category_ids_750" name="product[category_ids][]" type="checkbox" value="750"> 
  <label class="checkbox_collection_label" for="product_category_ids_750">Business &amp; Industrial</label><br>
  
  <input checked="checked" class="inplace_checkbox" id="product_category_ids_751" name="product[category_ids][]" type="checkbox" value="751"> 
  <label class="checkbox_collection_label" for="product_category_ids_751">Culture &amp; Society</label><br>
  
  <input checked="checked" class="inplace_checkbox" id="product_category_ids_752" name="product[category_ids][]" type="checkbox" value="752"> 
  <label class="checkbox_collection_label" for="product_category_ids_752">Education</label><br>
  
  <input class="inplace_checkbox" id="product_category_ids_753" name="product[category_ids][]" type="checkbox" value="753">
  <label class="checkbox_collection_label" for="product_category_ids_753">Employment &amp; Recruiting</label><br>
  
  <input class="inplace_checkbox" id="product_category_ids_754" name="product[category_ids][]" type="checkbox" value="754"> 
  <label class="checkbox_collection_label" for="product_category_ids_754">Finance</label><br>
  
  <input checked="checked" class="inplace_checkbox" id="product_category_ids_755" name="product[category_ids][]" type="checkbox" value="755"> 
  <label class="checkbox_collection_label" for="product_category_ids_755">Games</label><br>
  
  <input class="inplace_checkbox" id="product_category_ids_756" name="product[category_ids][]" type="checkbox" value="756"> 
  <label class="checkbox_collection_label" for="product_category_ids_756">Health</label><br>
  
  <input class="inplace_checkbox" id="product_category_ids_757" name="product[category_ids][]" type="checkbox" value="757"> 
  <label class="checkbox_collection_label" for="product_category_ids_757">Hobbies</label><br>
  
  <input class="inplace_checkbox" id="product_category_ids_758" name="product[category_ids][]" type="checkbox" value="758"> 
  <label class="checkbox_collection_label" for="product_category_ids_758">Home &amp; Garden</label><br>
  <br>
</form>

Radio Collection with Labels

code radio_collection :product, :price, %w(199 299 399 499 599 699 799 899 999).map { |e| [e, e] } produces 199
299
399
499
599
699
799
899
999

HTML Output

<input type="radio" value="199" name="product[price]" id="product_price_199" class="input_radio radio_collection_input"/>
<label for="product_price_199" class="radio_collection_label">199</label><br/>

<input type="radio" value="299" name="product[price]" id="product_price_299" class="input_radio radio_collection_input" checked="checked"/>
<label for="product_price_299" class="radio_collection_label">299</label><br/>

<input type="radio" value="399" name="product[price]" id="product_price_399" class="input_radio radio_collection_input"/>
<label for="product_price_399" class="radio_collection_label">399</label><br/>

<input type="radio" value="499" name="product[price]" id="product_price_499" class="input_radio radio_collection_input"/>
<label for="product_price_499" class="radio_collection_label">499</label><br/>

<input type="radio" value="599" name="product[price]" id="product_price_599" class="input_radio radio_collection_input"/>
<label for="product_price_599" class="radio_collection_label">599</label><br/>

<input type="radio" value="699" name="product[price]" id="product_price_699" class="input_radio radio_collection_input"/>
<label for="product_price_699" class="radio_collection_label">699</label><br/>

<input type="radio" value="799" name="product[price]" id="product_price_799" class="input_radio radio_collection_input"/>
<label for="product_price_799" class="radio_collection_label">799</label><br/>

<input type="radio" value="899" name="product[price]" id="product_price_899" class="input_radio radio_collection_input"/>
<label for="product_price_899" class="radio_collection_label">899</label><br/>

<input type="radio" value="999" name="product[price]" id="product_price_999" class="input_radio radio_collection_input"/>
<label for="product_price_999" class="radio_collection_label">999</label><br/><br/>