My new gem – label_better_rails

Hi after a success of my previous gem sticky-rails ( gemmified version of sticky jquery plug-in)  , I have created another gem and this also a gemmified version of another beautiful jquery plug-in label_better ,
This will help you to add label_better gem to your rails application assets pipeline quickly , Home page for this gem is https://github.com/navinspm/label_better_rails

Thanks to http://www.thepetedesign.com/demos/label_better_demo.html

Label your form input like a boss with beautiful animation and without taking up space

Screen shot

Installation

Add this line to your application’s Gemfile:

gem 'label_better_rails'

And then execute:

$ bundle

Or install it yourself as:

$ gem install label_better_rails

label_better is a jquery_plug in that gives beautiful animation to your label , so please check if you are using the jquery on your rails app, and add jquery.label_better in your application.js

Your app/assets/javascripts/application.js appear like:

//= require jquery
//= require jquery_ujs
//= require jquery.label_better
//= require_tree .

Then in your view file where you want to add label_better just remove our default rails label then give a class name and the placeholder to the field example

    <%= f.text_field :firstname ,:class => 'label_better', :placeholder => 'firstname'%><br/><br/>
    <%= f.text_field :lastname ,:class => 'label_better', :placeholder => 'lastname'%><br/><br/>
    <%= f.email_field :email,:class => 'label_better', :placeholder => 'email' %><br/><br/>
    <%= f.phone_field :phonenumber,:class => 'label_better', :placeholder => 'Mobile' %><br/><br/>
    <%= f.url_field :website ,:class => 'label_better', :placeholder => 'Website'%><br/><br/>
    <%= f.password_field :password ,:class => 'label_better', :placeholder => 'confirmpassword'%><br/><br/>
    <%= f.password_field :confirmpassword , :class => 'label_better', :placeholder => 'confirmpassword' %>

then add javascript in your view file

$("input.label_better").label_better({
    position: "top", 
    animationTime: 500, 
    easing: "ease-in-out",
    offset: 5, 
    hidePlaceholderOnFocus: true 
  });

Change this values depends on your need

Contributing

  1. Fork it ( https://github.com/[my-github-username]/label_better_rails/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s