2-8 自定义对象级插件——lifocuscolor插件
本节编程练习不计算学习进度，请电脑登录imooc.com操作

自定义对象级插件——lifocuscolor插件

自定义的lifocuscolor插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中时的背景色，调用格式为：

$(Id).focusColor(color)

其中，参数Id表示<ul>元素的Id号，color表示<li>元素选中时的背景色。

例如，在页面中，调用自定义的lifocuscolor插件，自定义<li>元素选中时的背景色，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当<ul>元素调用focusColor()方法绑定自定义的插件之后，当鼠标在<li>元素间移动时，显示自定义的背景色。

任务

我来试试，亲自感受调用自定义插件改变<ul>元素中选中<li>选项的背景色。

在下列代码的第26行，调用自定义插件的focusColor()方法，设置<ul>元素中选中<li>选项时的背景色。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>自定义对象级别插件</title>
  5.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  7.         <script src="http://www.imooc.com/data/jquery.lifocuscolor.js" type="text/javascript"></script>
  8.     </head>
  9.  
  10.     <body>
  11.         <div id="divtest">
  12.             <div class="title">
  13.                 <span class="fl">对象级别的插件</span>
  14.             </div>
  15.             <div class="content">
  16.                 <ul id="u1">
  17.                     <li><span>橘子</span><span>水果</span></li>
  18.                     <li><span>芹菜</span><span>蔬菜</span></li>
  19.                     <li><span>香蕉</span><span>水果</span></li>
  20.                 </ul>
  21.             </div>
  22.         </div>
  23.  
  24.         <script type="text/javascript">
  25.             $(function () {
  26.                 ? //调用自定义的插件
  27.             })
  28.         </script>
  29.     </body>
  30. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color: Blue;
  9.     color: #fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17.     padding: 8px 0px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21. ul
  22. {
  23.     list-style-type: none;
  24.     padding: 5px 0px;
  25.     margin: 0px;
  26.     font-size: 14px;
  27. }
  28. ul li
  29. {
  30.     height: 23px;
  31.     line-height: 23px;
  32.     padding: 3px 8px;
  33. }
  34. ul li span
  35. {
  36.     margin-right: 30px;
  37. }
  38. .fl
  39. {
  40.     float: left;
  41. }
  42. .fr
  43. {
  44.     float: right;
  45. }
下一节