jquery 插件
自己实践做的一个插件，插件本身没有什么实用价值,就是熟悉jquery怎么来开发插件。
Code
(function($){
$.fn.myPlugin = function(options) {
var opts = $.extend({},$.fn.myPlugin.defaults,options);
$(this).click(function(){
if(!$("#showDiv").length>0)
{
var div="<div id=\"showDiv\" style=\"font-size:"+opts.fontSize+";border:solid 1px #000;color:"+opts.color+"\"> "+opts.content+"</div>";
$(this).append(div);
}
});
$(this).mouseout(function(){
$("#showDiv").hide();
});
$(this).mouseover(function(){
$("#showDiv").show();
});
};
$.fn.myPlugin.defaults={
fontSize:"14px",
color:"#00FF00",
content:"test"
};
})(jQuery);
调用
Code
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#show").myPlugin({
fontSize:"14px",
color:"#FF0000",
content:"testaaaaaa"
});
});
</script>填写框水印提示插件
Code
/*
* Watermark plugin (for jQuery)
* Version: 1.0 jQuery v1.3.2
* Created by
*/
(function($){
$.fn.watermark = function(options){
// build main options before element iteration
var opts = $.extend({}, $.fn.watermark.defaults, options);
return this.each(function(){
var target = $(this);
function clear(){
if (target.val() == opts.defaultText && target.hasClass(opts.watermarkCss))
{
target.val("").removeClass(opts.watermarkCss);
}
}
function renderDefault(){
if ($.trim(target.val()) === ''){
target.val(opts.defaultText).addClass(opts.watermarkCss);
}
}
// Bind the related event handlers
target.focus(clear);
target.blur(renderDefault);
target.change(renderDefault);
renderDefault();
});
};
// plugin defaults settings
$.fn.watermark.defaults = {
defaultText: 'search',
watermarkCss: 'watermark'
};
})(jQuery);调用
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.SearchWatermark
{
font-size:12px;
color:#ccc;
}
</style>
<script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="JS/Watermark.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#txtSearch").watermark({
defaultText:'Search Entrys',
watermarkCss:'SearchWatermark'});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server" Width="129px" ></asp:TextBox>
</div>
</form>
</body>
</html>
Code(function($){
$.fn.myPlugin = function(options) {
var opts = $.extend({},$.fn.myPlugin.defaults,options);
$(this).click(function(){
if(!$("#showDiv").length>0)
{
var div="<div id=\"showDiv\" style=\"font-size:"+opts.fontSize+";border:solid 1px #000;color:"+opts.color+"\"> "+opts.content+"</div>";
$(this).append(div);
}
});
$(this).mouseout(function(){
$("#showDiv").hide();
});
$(this).mouseover(function(){
$("#showDiv").show();
});
};
$.fn.myPlugin.defaults={
fontSize:"14px",
color:"#00FF00",
content:"test"
};
})(jQuery);
Code<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#show").myPlugin({
fontSize:"14px",
color:"#FF0000",
content:"testaaaaaa"
});
});
</script>
Code/*
* Watermark plugin (for jQuery)
* Version: 1.0 jQuery v1.3.2
* Created by
*/
(function($){
$.fn.watermark = function(options){
// build main options before element iteration
var opts = $.extend({}, $.fn.watermark.defaults, options);
return this.each(function(){
var target = $(this);
function clear(){
if (target.val() == opts.defaultText && target.hasClass(opts.watermarkCss))
{
target.val("").removeClass(opts.watermarkCss);
}
}
function renderDefault(){
if ($.trim(target.val()) === ''){
target.val(opts.defaultText).addClass(opts.watermarkCss);
}
}
// Bind the related event handlers
target.focus(clear);
target.blur(renderDefault);
target.change(renderDefault);
renderDefault();
});
};
// plugin defaults settings
$.fn.watermark.defaults = {
defaultText: 'search',
watermarkCss: 'watermark'
};
})(jQuery);
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.SearchWatermark
{
font-size:12px;
color:#ccc;
}
</style>
<script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="JS/Watermark.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#txtSearch").watermark({
defaultText:'Search Entrys',
watermarkCss:'SearchWatermark'});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server" Width="129px" ></asp:TextBox>
</div>
</form>
</body>
</html>
浙公网安备 33010602011771号