jQuery插件求助
碰到这样一个有关jQuery插件的问题：请尝试编写jQuery插件，函数名为colorButton,只适用于input[type=“button”]和input[type...
碰到这样一个有关jQuery插件的问题：
请尝试编写jQuery插件，函数名为colorButton, 只适用于input [type=“button”]和input[type:”submit”]标签。
插件接受两个可选的配置参数，参数为16进制颜色值如：#FFCC00。插件默认的两个颜色值为 “#FFCC00”和“#CCFF00”，如果配置插件时未传入值则采用默认颜色值，传入值可覆盖默认值。每个适用的元素上可单独配置。
当鼠标进入元素时如果是 button则将当前对象的背景色改为颜色值一，如果为submit则将当前对象的背景色改为颜色值二。鼠标移开后颜色置为window 按钮默认色值（灰色）。
插件需可处理多个元素同时绑定的操作。
调用插件方法形如
$(‘input[type=“submit”]’).colorButton({c1:”#F0F0F0”, c2:”#0F0F0F”});
$(“input”).colorButton();
哪位能帮下忙？ 展开
请尝试编写jQuery插件，函数名为colorButton, 只适用于input [type=“button”]和input[type:”submit”]标签。
插件接受两个可选的配置参数，参数为16进制颜色值如：#FFCC00。插件默认的两个颜色值为 “#FFCC00”和“#CCFF00”，如果配置插件时未传入值则采用默认颜色值，传入值可覆盖默认值。每个适用的元素上可单独配置。
当鼠标进入元素时如果是 button则将当前对象的背景色改为颜色值一，如果为submit则将当前对象的背景色改为颜色值二。鼠标移开后颜色置为window 按钮默认色值（灰色）。
插件需可处理多个元素同时绑定的操作。
调用插件方法形如
$(‘input[type=“submit”]’).colorButton({c1:”#F0F0F0”, c2:”#0F0F0F”});
$(“input”).colorButton();
哪位能帮下忙？ 展开
1个回答
展开全部
(function($){
$.fn.colorButton = function(opt){
var options = $.extend({}, $.fn.colorButton.defaults, opt||{});
this.each(function(){
showColor($(this),options);
});
};
$.fn.colorButton.defaults={
c1: '#FFCC00',
c2: '#CCFF00'
};
function showColor(obj,opt){
var n=obj.attr('nodeName'),t=obj.attr('type'),flag=false;
if(n){n=n.toLowerCase();}
if(t){t=t.toLowerCase();}
if(n=='input'){
if(t=='button'){
flag=true;
n=opt.c1;
}else if(t=='submit'){
flag=true;
n=opt.c2;
}
}
if(flag){
obj.hover(
function(){
$(this).css('background-color',n);
},function(){
$(this).css('background-color','');
});
}
}
})(jQuery);
html
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#testdiv input[type="submit"]').colorButton({c1:'#f0f0f0',c2:'#0f0f0f'});
//$('#testdiv input').colorButton();
});
//-->
</script>
</head>
<body>
<div id="testdiv">
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" value="按钮"/>
<select><option/></select>
<textarea></textarea>
<button></button>
</div>
</body>
$.fn.colorButton = function(opt){
var options = $.extend({}, $.fn.colorButton.defaults, opt||{});
this.each(function(){
showColor($(this),options);
});
};
$.fn.colorButton.defaults={
c1: '#FFCC00',
c2: '#CCFF00'
};
function showColor(obj,opt){
var n=obj.attr('nodeName'),t=obj.attr('type'),flag=false;
if(n){n=n.toLowerCase();}
if(t){t=t.toLowerCase();}
if(n=='input'){
if(t=='button'){
flag=true;
n=opt.c1;
}else if(t=='submit'){
flag=true;
n=opt.c2;
}
}
if(flag){
obj.hover(
function(){
$(this).css('background-color',n);
},function(){
$(this).css('background-color','');
});
}
}
})(jQuery);
html
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#testdiv input[type="submit"]').colorButton({c1:'#f0f0f0',c2:'#0f0f0f'});
//$('#testdiv input').colorButton();
});
//-->
</script>
</head>
<body>
<div id="testdiv">
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" value="按钮"/>
<select><option/></select>
<textarea></textarea>
<button></button>
</div>
</body>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
AiPPT
2024-09-19 广告
随着AI技术的飞速发展，如今市面上涌现了许多实用易操作的AI生成工具1、简介：AiPPT: 这款AI工具智能理解用户输入的主题，提供“AI智能生成”和“导入本地大纲”的选项，生成的PPT内容丰富多样，可自由编辑和添加元素，图表类型包括柱状图...
点击进入详情页
本回答由AiPPT提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
