自定義對(duì)象級(jí)插件——lifocuscolor插件
自定義的lifocuscolor插件可以在<ul>元素中，鼠標(biāo)在表項(xiàng)<li>元素移動(dòng)時(shí)，自定義其獲取焦點(diǎn)時(shí)的背景色，即定義<li>元素選中時(shí)的背景色，調(diào)用格式為：
$(Id).focusColor(color)
其中，參數(shù)Id表示<ul>元素的Id號(hào)，color表示<li>元素選中時(shí)的背景色。
例如，在頁面中，調(diào)用自定義的lifocuscolor插件，自定義<li>元素選中時(shí)的背景色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)<ul>元素調(diào)用focusColor()方法綁定自定義的插件之后，當(dāng)鼠標(biāo)在<li>元素間移動(dòng)時(shí)，顯示自定義的背景色。
任務(wù)
我來試試，親自感受調(diào)用自定義插件改變<ul>元素中選中<li>選項(xiàng)的背景色。
在下列代碼的第26行，調(diào)用自定義插件的focusColor()方法，設(shè)置<ul>元素中選中<li>選項(xiàng)時(shí)的背景色。
- ?不會(huì)了怎么辦
-
- 首先，通過選擇器獲取<ul>元素，然后，調(diào)用該元素的
focusColor()方法設(shè)置在<ul>元素中移動(dòng)鼠標(biāo)時(shí)，<li>元素選中時(shí)的背景色。
focusColor()方法中的參數(shù)為背景色的顏色值。
<!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>
<title>自定義對(duì)象級(jí)別插件</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://idcbgp.cn/data/jquery-1.8.2.min.js"></script>
<script src="http://idcbgp.cn/data/jquery.lifocuscolor.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">對(duì)象級(jí)別的插件</span>
</div>
<div class="content">
<ul id="u1">
<li><span>橘子</span><span>水果</span></li>
<li><span>芹菜</span><span>蔬菜</span></li>
<li><span>香蕉</span><span>水果</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
? //調(diào)用自定義的插件
})
</script>
</body>
</html>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
ul
{
list-style-type: none;
padding: 5px 0px;
margin: 0px;
font-size: 14px;
}
ul li
{
height: 23px;
line-height: 23px;
padding: 3px 8px;
}
ul li span
{
margin-right: 30px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
