PHP:spl_autoload_unregister()的用法_spl函數
792
2023-12-15
1. 寫插件部分，如下：
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各種屬性，各種參數
}
var options = $.extend(defaults, options);
this.each(function(){
//功能代碼
var _this = this;
});
}
})(jQuery);
附上一個例子：
;(function($){
$.fn.table = function(options){
var defaults = {
//arguments , properties
evenRowClass : 'evenRow',
oddRowClass : 'oddRow',
currentRowClass : 'currentRow',
eventType : 'mouseover',
eventType2 : 'mouseout',
}
var options = $.extend(defaults, options);
this.each(function(){
//function code
var _this = $(this);
//even row
_this.find('tr:even:not("#thead")').addClass(options.evenRowClass);
//_this.find('#thead').removeClass(options.evenRowClass);
// odd row
_this.find('tr:odd').addClass(options.oddRowClass);
/*_this.find('tr').mouseover(function(){
$(this).addClass(options.currentRowClass);
}).mouseout(function(){
$(this).removeClass(options.currentRowClass);
});*/
_this.find('tr').bind(options.eventType, function(){
$(this).addClass(options.currentRowClass);
});
_this.find('tr').bind(options.eventType2, function(){
$(this).removeClass(options.currentRowClass);
});
});
return this;
}
})(jQuery);
html部分調用插件如下：
();== ();==(function(){});==$(document).ready();
等頁面加載成功后執行
;$(function(){
$('#table1').table({
//arguments , properties
evenRowClass : 'evenRow1',
oddRowClass : 'oddRow1',
currentRowClass : 'currentRow1'
});
});
附上代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{margin:0; padding:0;}
table{
border-collapse:collapse;
width:100%;
border:1px solid red;
margin-top:50px;
text-align:center;
}
tr, th, td{
height:30px;
border:1px solid red;
}
.evenRow1{
background:red;
}
.oddRow1{
background:orange;
}
.currentRow1{
background:blue;
}
#ss{
float:right;
margin-right:100px;
}
#search{
font-size:14px;
width:50px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://www.gimoo.net/t/1902/jquery-table-1.0.js"></script>
</head>
<body>
<script>
;$(function(){
$('#table1').table({
//arguments , properties
evenRowClass : 'evenRow1',
oddRowClass : 'oddRow1',
currentRowClass : 'currentRow1'
});
$('input[type=button]').click(function(){
var text = $('input[type=text]').val();
$('#table1 tr:not("#thead")').hide().filter(':contains("'+text+'")').show();
});
});
</script>
<div id="ss">
<input type="text" placeholder="請輸入查詢數據">
<input id="search" type="button" value="查詢">
</div>
<table id="table1">
<tr id="thead">
<th>姓名</th>
<th>學號</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>1</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>2</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>張三</td>
<td>1</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>2</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>王五</td>
<td>3</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>王五</td>
<td>3</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>張三</td>
<td>1</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>2</td>
<td>男</td>
<td>30</td>
</tr>
</table>
</body>
</html>
通過這個例子學到了jquery 對象級插件開發
以上這篇jquery插件方式實現table查詢功能的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持綠夏網。
