本邮件内容由第三方提供,如果您不想继续收到该邮件,可 点此退订 。
PLSQL_性能优化效能跟踪工具DBMS_PROFILER分析(案例) - 东方瀚海 阅读原文»
【摘要】2014-06-01 BaoXinjian In Capgemini一、摘要Oracle PLSQL性能诊断是经常会遇到问题,所以Oracle提供了比较多的程式诊断工具,其中包括了dbms_profiler包DBMS_PROFILER中会用到一些基本构建如下在调用程式前DBMS_PROFILER.S... 阅读全文
Jquery简单的placeholder效果 - 龙恩0707 阅读原文»
Jquery简单的placeholder效果
由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考!
先看看效果吧!如下JSFiddle地址
JS代码如下:
/*
* JS placeholder
* IE6-IE9不支持HTML5中的placeholder
*/
function Placeholder(options) {
this.config = {
defaultColor: '#ccc',
curColor: '#333',
targetElem: '.placeholderCls'
};
this.init(options);
}
Placeholder.prototype = {
constructor:Placeholder,
init: function(options){
this.config = $.extend(this.config, options || {});
var self = this,
_config = self.config;
$(_config.targetElem).each(function(){
var supportPlaceholder = 'placeholder' in document.createElement('input');
if(!supportPlaceholder) {
var defaultValue = $(this).attr('placeholder');
$(this).focus(function(){
var pattern = new RegExp("^" + defaultValue + "$|^$");
pattern.test($(this).val()) && $(this).val('').css('color',_config.curColor);
}).blur(function(){
if($(this).val() == defaultValue) {
$(this).css('color',_config.defaultColor);
}else if($(this).val().length == 0){
$(this).val(defaultValue).css('color', _config.defaultColor);
}
}).trigger('blur');
}
});
}
};
* JS placeholder
* IE6-IE9不支持HTML5中的placeholder
*/
function Placeholder(options) {
this.config = {
defaultColor: '#ccc',
curColor: '#333',
targetElem: '.placeholderCls'
};
this.init(options);
}
Placeholder.prototype = {
constructor:Placeholder,
init: function(options){
this.config = $.extend(this.config, options || {});
var self = this,
_config = self.config;
$(_config.targetElem).each(function(){
var supportPlaceholder = 'placeholder' in document.createElement('input');
if(!supportPlaceholder) {
var defaultValue = $(this).attr('placeholder');
$(this).focus(function(){
var pattern = new RegExp("^" + defaultValue + "$|^$");
pattern.test($(this).val()) && $(this).val('').css('color',_config.curColor);
}).blur(function(){
if($(this).val() == defaultValue) {
$(this).css('color',_config.defaultColor);
}else if($(this).val().length == 0){
$(this).val(defaultValue).css('color', _config.defaultColor);
}
}).trigger('blur');
}
});
}
};
HTML代码如下:
<form id="form1">
<h3>通过value方式模拟placeholder</h3>
<p>
<label for="username1">用户名:</label>
<input type="text" class="placeholderCls" placeholder="请输入用户名">
</p>
<p>
<label for="address1">地 址:</label>
<input type="text" class="placeholderCls" placeholder="请输入地址">
</p>
<p>
<label for="remarks1">备 注:</label>
<textarea placeholder="请输入备注" class="placeholderCls"></textarea>
</p>
</form>
<h3>通过value方式模拟placeholder</h3>
<p>
<label for="username1">用户名:</label>
<input type="text" class="placeholderCls" placeholder="请输入用户名">
</p>
<p>
<label for="address1">地 址:</label>
<input type="text" class="placeholderCls" placeholder="请输入地址">
</p>
<p>
<label for="remarks1">备 注:</label>
<textarea placeholder="请输入备注" class="placeholderCls"></textarea>
</p>
</form>
代码初始化:
<script>
new Placeholder({});
</script>
new Placeholder({});
</script>
本文链接:Jquery简单的placeholder效果,转载请注明。
没有评论:
发表评论