DG IZ; cool labels fade in
This commit is contained in:
danielvincent
parent
a685c6c0ab
commit
acc782d5b2
6 changed files with 203 additions and 18 deletions
|
|
@ -1,4 +1,7 @@
|
|||
= form_tag("/comments", :remote => true, :class =>"new_comment", :id => "new_comment-#{post.id}") do
|
||||
= text_area_tag "comment_text", 'leave a comment', :size => 30, :name => 'comment[text]'
|
||||
= hidden_field_tag "comment_post_id", "#{post.id}", :name => "comment[post_id]"
|
||||
= submit_tag 'comment', :id => "comment_submit_#{post.id}", :name => "commit"
|
||||
= form_for Comment.new, :remote => true do |f|
|
||||
%p
|
||||
%label{:for => "comment_text"} Comment
|
||||
= f.text_area :text
|
||||
= f.hidden_field :post_id, :value => post.id
|
||||
%p
|
||||
= f.submit "Comment"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
= stylesheet_link_tag "application"
|
||||
/= javascript_include_tag"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
|
||||
= javascript_include_tag 'jquery142', 'rails', 'view'
|
||||
= javascript_include_tag 'tiny_mce/tiny_mce.js'
|
||||
= javascript_include_tag 'tiny_mce/tiny_mce.js','jquery.infieldlabel'
|
||||
:javascript
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-17207587-1']);
|
||||
|
|
@ -57,6 +57,10 @@
|
|||
}, function() {
|
||||
$(this).children(".destroy_link").fadeOut(0);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("label").inFieldLabels();
|
||||
});
|
||||
/= javascript_include_tag 'satisfaction' , 'satisfaction-display'
|
||||
:javascript
|
||||
|
|
|
|||
|
|
@ -66,17 +66,30 @@
|
|||
#publisher_form
|
||||
= form_for StatusMessage.new, :remote => true do |f|
|
||||
= f.error_messages
|
||||
= f.text_area :message, :value => "Message"
|
||||
%p
|
||||
%label{:for => "status_message_message"} Message
|
||||
= f.text_area :message
|
||||
%p
|
||||
= f.submit "Post"
|
||||
|
||||
= form_for Bookmark.new, :remote => true do |f|
|
||||
= f.error_messages
|
||||
= f.text_area :title, :value => "Title"
|
||||
= f.text_area :link, :value => "URL"
|
||||
%p
|
||||
%label{:for => "bookmark_title"} Title
|
||||
= f.text_area :title
|
||||
%p
|
||||
%label{:for => "bookmark_link"} Link
|
||||
= f.text_area :link
|
||||
%p
|
||||
= f.submit "Post"
|
||||
|
||||
= form_for Blog.new, :remote => true do |f|
|
||||
= f.error_messages
|
||||
= f.text_field :title, :value => "Title"
|
||||
= f.text_area :body, :id => "blog_editor"
|
||||
%p
|
||||
%label{:for => "blog_title"} Title
|
||||
= f.text_area :title
|
||||
%p
|
||||
%label{:for => "blog_body"} Body
|
||||
= f.text_area :body
|
||||
%p
|
||||
= f.submit "Post"
|
||||
|
|
|
|||
140
public/javascripts/jquery.infieldlabel.js
Executable file
140
public/javascripts/jquery.infieldlabel.js
Executable file
|
|
@ -0,0 +1,140 @@
|
|||
/*
|
||||
* In-Field Label jQuery Plugin
|
||||
* http://fuelyourcoding.com/scripts/infield.html
|
||||
*
|
||||
* Copyright (c) 2009 Doug Neiner
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* Uses the same license as jQuery, see:
|
||||
* http://docs.jquery.com/License
|
||||
*
|
||||
* @version 0.1
|
||||
*/
|
||||
(function($){
|
||||
|
||||
$.InFieldLabels = function(label,field, options){
|
||||
// To avoid scope issues, use 'base' instead of 'this'
|
||||
// to reference this class from internal events and functions.
|
||||
var base = this;
|
||||
|
||||
// Access to jQuery and DOM versions of each element
|
||||
base.$label = $(label);
|
||||
base.label = label;
|
||||
|
||||
base.$field = $(field);
|
||||
base.field = field;
|
||||
|
||||
base.$label.data("InFieldLabels", base);
|
||||
base.showing = true;
|
||||
|
||||
base.init = function(){
|
||||
// Merge supplied options with default options
|
||||
base.options = $.extend({},$.InFieldLabels.defaultOptions, options);
|
||||
|
||||
// Check if the field is already filled in
|
||||
if(base.$field.val() != ""){
|
||||
base.$label.hide();
|
||||
base.showing = false;
|
||||
};
|
||||
|
||||
base.$field.focus(function(){
|
||||
base.fadeOnFocus();
|
||||
}).blur(function(){
|
||||
base.checkForEmpty(true);
|
||||
}).bind('keydown.infieldlabel',function(e){
|
||||
// Use of a namespace (.infieldlabel) allows us to
|
||||
// unbind just this method later
|
||||
base.hideOnChange(e);
|
||||
}).change(function(e){
|
||||
base.checkForEmpty();
|
||||
}).bind('onPropertyChange', function(){
|
||||
base.checkForEmpty();
|
||||
});
|
||||
};
|
||||
|
||||
// If the label is currently showing
|
||||
// then fade it down to the amount
|
||||
// specified in the settings
|
||||
base.fadeOnFocus = function(){
|
||||
if(base.showing){
|
||||
base.setOpacity(base.options.fadeOpacity);
|
||||
};
|
||||
};
|
||||
|
||||
base.setOpacity = function(opacity){
|
||||
base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
|
||||
base.showing = (opacity > 0.0);
|
||||
};
|
||||
|
||||
// Checks for empty as a fail safe
|
||||
// set blur to true when passing from
|
||||
// the blur event
|
||||
base.checkForEmpty = function(blur){
|
||||
if(base.$field.val() == ""){
|
||||
base.prepForShow();
|
||||
base.setOpacity( blur ? 1.0 : base.options.fadeOpacity );
|
||||
} else {
|
||||
base.setOpacity(0.0);
|
||||
};
|
||||
};
|
||||
|
||||
base.prepForShow = function(e){
|
||||
if(!base.showing) {
|
||||
// Prepare for a animate in...
|
||||
base.$label.css({opacity: 0.0}).show();
|
||||
|
||||
// Reattach the keydown event
|
||||
base.$field.bind('keydown.infieldlabel',function(e){
|
||||
base.hideOnChange(e);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
base.hideOnChange = function(e){
|
||||
if(
|
||||
(e.keyCode == 16) || // Skip Shift
|
||||
(e.keyCode == 9) // Skip Tab
|
||||
) return;
|
||||
|
||||
if(base.showing){
|
||||
base.$label.hide();
|
||||
base.showing = false;
|
||||
};
|
||||
|
||||
// Remove keydown event to save on CPU processing
|
||||
base.$field.unbind('keydown.infieldlabel');
|
||||
};
|
||||
|
||||
// Run the initialization method
|
||||
base.init();
|
||||
};
|
||||
|
||||
$.InFieldLabels.defaultOptions = {
|
||||
fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
|
||||
fadeDuration: 300 // How long should it take to animate from 1.0 opacity to the fadeOpacity
|
||||
};
|
||||
|
||||
|
||||
$.fn.inFieldLabels = function(options){
|
||||
return this.each(function(){
|
||||
// Find input or textarea based on for= attribute
|
||||
// The for attribute on the label must contain the ID
|
||||
// of the input or textarea element
|
||||
var for_attr = $(this).attr('for');
|
||||
if( !for_attr ) return; // Nothing to attach, since the for field wasn't used
|
||||
|
||||
|
||||
// Find the referenced input or textarea element
|
||||
var $field = $(
|
||||
"input#" + for_attr + "[type='text']," +
|
||||
"input#" + for_attr + "[type='password']," +
|
||||
"textarea#" + for_attr
|
||||
);
|
||||
|
||||
if( $field.length == 0) return; // Again, nothing to attach
|
||||
|
||||
// Only create object for input[text], input[password], or textarea
|
||||
(new $.InFieldLabels(this, $field[0], options));
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -183,9 +183,6 @@ form {
|
|||
#user_name a:hover {
|
||||
color: #cc1e14; }
|
||||
|
||||
#comment_text {
|
||||
padding: 3px; }
|
||||
|
||||
ul.comment_set {
|
||||
margin: 0;
|
||||
margin-top: 1em;
|
||||
|
|
@ -234,3 +231,18 @@ textarea {
|
|||
width: 100%;
|
||||
-moz-box-shadow: 0 2px 0px white;
|
||||
border-top: 1px solid #999999; }
|
||||
|
||||
input[type='submit'] {
|
||||
position: absolute;
|
||||
right: 0; }
|
||||
|
||||
form p {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
|
||||
label {
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0.48em; }
|
||||
|
|
|
|||
|
|
@ -215,8 +215,6 @@ form
|
|||
&:hover
|
||||
:color #CC1E14
|
||||
|
||||
#comment_text
|
||||
:padding 3px
|
||||
|
||||
ul.comment_set
|
||||
:margin 0
|
||||
|
|
@ -280,3 +278,18 @@ textarea
|
|||
:-moz-box-shadow 0 2px 0px #fff
|
||||
|
||||
:border-top 1px solid #999
|
||||
|
||||
input[type='submit']
|
||||
:position absolute
|
||||
:right 0
|
||||
|
||||
form p
|
||||
:position relative
|
||||
:padding 0
|
||||
:margin 0
|
||||
|
||||
label
|
||||
:color #999
|
||||
:position absolute
|
||||
:top 3px
|
||||
:left 0.48em
|
||||
|
|
|
|||
Loading…
Reference in a new issue