[JQ權威指南]物件級別外掛的開發
阿新 • • 發佈：2019-02-03
(1)功能描述
在列表
- 元素中，滑鼠在表項
- 元素移動時，可以自定義其獲取焦點(focus)時的背景顏色，即設定表項
- 選中的背景色，
(2)搭建框架
新建一個JS檔案，命名為jquery.lifocuscolor.js,並在檔案中使用$.fn.extend()方法完成框架的搭建
/*------------------------------------------------------------/
功能：設定列表中表項獲取滑鼠焦點時的背景色
引數：li_col【可選】 滑鼠所在表項行的背景色
返回：原呼叫物件
示例：$("ul").focusColor("red");
/------------------------------------------------------------*/ (3)編寫程式碼
; (function($) {
$.fn.extend({
"focusColor": function(li_col) {
var def_col = "#ccc" (4)引用外掛
<!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>編寫一個物件級別的外掛</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js"></script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js"></script>
<script type="text/javascript"
src="Plugin/jquery.lifocuscolor.js"></script>
<style type="text/css">
body{font-size:12px}
.divFrame{width:260px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold}
.divFrame .divContent{padding:8px;line-height:1.6em}
.divFrame .divContent ul{padding:0px;margin:0px;list-style-type:none}
.divFrame .divContent ul li span{margin-right:20px}
</style>
<script type="text/javascript">
$(function() {
$("#u1").focusColor("red");//呼叫自定義的外掛
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
物件級別的外掛
</div>
<div class="divContent">
<ul id="u1">
<li><span>張三</span><span>男</span></li>
<li><span>李四</span><span>女</span></li>
<li><span>王五</span><span>男</span></li>
</ul>
</div>
</div>
</body>
</html>
(5)頁面效果
