求把一段jquery程序改写成可调用的形式
$(function(){
$(window).load(function(){
$('input[type=text]').each(function(){
var thisTitle = $(this).attr('title');
if(!(thisTitle === '')){
$(this).wrapAll('<span style="text-align:left;display:inline-block;position:relative;"></span>');
$(this).parent('span').append('<span class="placeholder">' + thisTitle + '</span>');
$('.placeholder').css({
color:'#999',
overflow:'hidden',
position:'absolute'
}).click(function(){
$(this).prev().focus();
});
$(this).focus(function(){
$(this).next('span').css({display:'none'});
});
}
});
});
});
想改上述程序，可调用
<input type="radio" name="chk" id="chk" value="1" onclick="调用上述程序">
<input type="text" name="nam" id="nam" title="显示提示">
[解决办法]
改成
<input type="radio" name="chk" id="chk" value="1" >
$("#chk").click(function(){
$('input[type=text]').each(function(){
var thisTitle = $(this).attr('title');
if(!(thisTitle === '')){
$(this).wrapAll('<span style="text-align:left;display:inline-block;position:relative;"></span>');
$(this).parent('span').append('<span class="placeholder">' + thisTitle + '</span>');
$('.placeholder').css({
color:'#999',
overflow:'hidden',
position:'absolute'
}).click(function(){
$(this).prev().focus();
});
$(this).focus(function(){
$(this).next('span').css({display:'none'});
});
}
});
});
[解决办法]
- JScript code
<head><title>jQuery Placeholder</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">$(function(){ $(window).load(function(){ $('input[type=text],input[type=password],textarea').each(function(){ var thisTitle = $(this).attr('title'); if(!(thisTitle === '')){ $(this).wrapAll('<span style="text-align:left;display:inline-block;position:relative;"></span>'); $(this).parent('span').append('<span class="placeholder">' + thisTitle + '</span>'); $('.placeholder').css({ top:'4px', left:'5px', fontSize:'100%', lineHeight:'120%', textAlign:'left', color:'#999', overflow:'hidden', position:'absolute', zIndex:'99' }).click(function(){ $(this).prev().focus(); }); $(this).focus(function(){ $(this).next('span').css({display:'none'}); }); $(this).blur(function(){ var thisVal = $(this).val(); if(thisVal === ''){ $(this).next('span').css({display:'inline-block'}); } else { $(this).next('span').css({display:'none'}); } }).keyup(function(){ if($(this).val()==""){ $(this).val("提示信息");}}); var thisVal = $(this).val(); if(thisVal === ''){ $(this).next('span').css({display:'inline-block'}); } else { $(this).next('span').css({display:'none'}); } } }); });});</script></head><body> <form action=""> 名字<input type="text" title="输名字" size="50"> <br /><br /> 密码<input type="password" title="输密码" size="50"> <br /><br /> 详细<br/> <textarea title="输详细" cols="50" rows="5"></textarea> </form></body></html>