69 lines
2.3 KiB
JavaScript
69 lines
2.3 KiB
JavaScript
/*
|
|
Name inputDefault
|
|
Version V1.0
|
|
Author huangdijia@gmail.com
|
|
Website http://www.hdj.me/
|
|
Date 2011/08/10
|
|
*/
|
|
|
|
(function($){
|
|
$.fn.inputDefault = function(options){
|
|
var defaults = {attrName: 'fs', size:0, bold: false, italic:false, color:'#CCC'};
|
|
var options = $.extend(defaults, options);
|
|
this.each(function(){
|
|
var $this = $(this);
|
|
var text = $this.attr(options.attrName);
|
|
|
|
var offset = $this.position();
|
|
|
|
var outerWidth = $this.outerWidth();
|
|
var outerHeight = $this.outerHeight();
|
|
|
|
var innerWidth = $this.innerWidth();
|
|
var innerHeight = $this.innerHeight();
|
|
|
|
var plusLeft = (outerWidth - innerWidth)/2;
|
|
var plusTop = (outerHeight - innerHeight)/2;
|
|
|
|
var paddingTop = parseInt($this.css('paddingTop'));
|
|
var paddingRight = parseInt($this.css('paddingRight'));
|
|
var paddingBottom = parseInt($this.css('paddingBottom'));
|
|
var paddingLeft = parseInt($this.css('paddingLeft'));
|
|
|
|
if(!$.browser.chrome){
|
|
var width = innerWidth - (paddingLeft + paddingRight);
|
|
var height = innerHeight - (paddingTop + paddingBottom);
|
|
}else{
|
|
var width = innerWidth - paddingRight;
|
|
var height = innerHeight - paddingBottom;
|
|
}
|
|
|
|
var top = offset.top + plusTop;
|
|
var left = offset.left + plusLeft;
|
|
|
|
var lineHeight = $this.css('lineHeight');
|
|
var display = $this.val() ? 'none' : 'block';
|
|
|
|
var fontSize = options.size ? options.size : $this.css('fontSize');
|
|
var fontStyle = options.italic ? 'italic' : '';
|
|
var fontWeight = options.bold ? '700' : $this.css('fontWeight');
|
|
|
|
var css = {position:'absolute', fontSize: fontSize, fontWeight:fontWeight, fontStyle:fontStyle, lineHeight:lineHeight, display:display, paddingTop:paddingTop, paddingRight:paddingRight, paddingBottom:paddingBottom, paddingLeft:paddingLeft, cursor:'text', width:width, height:height, top:top, left:left, color:options.color, overflow:'hidden'};
|
|
|
|
var lable = $("<label></label>").text(text).css(css).click(function(){
|
|
$(this).hide();
|
|
$(this).prev().focus();
|
|
});
|
|
|
|
$this.after(lable);
|
|
}).focus(function(){
|
|
var $this = $(this);
|
|
var $label = $(this).next('label');
|
|
$label.hide();
|
|
}).blur(function(){
|
|
var $this = $(this);
|
|
var $label = $(this).next('label');
|
|
if(!$this.val()) $label.show();
|
|
});
|
|
}
|
|
})(jQuery); |