// tab change plug
(function(o){
// main plug Function
o.fn.tabChange = function(option){
var $t = this;
if($t.size() > 1){
$t.each(function(){
o(this).tabChange(option);
})
return;
}
var opt = { // default option
autoIndex : 0, // init
event : 'mouseover', // event
effect : 'show|hide', // effect
effectTimeS : 0, // animate start time
effectTimeE : 0, // animate end time
tabO : $t.find('li'), // event tab object
tabC : $t.next().children('div'), // relative object
currentClass : 'current' // current class
},
option = option || {},
effect = [];
// extend default options
o.extend(opt,option);
effect = opt.effect.split('|');
// action function
var action = function(index){
opt.tabO.removeClass(opt.currentClass);
opt.tabO.eq(index).addClass(opt.currentClass);
opt.tabC.eq(index)[effect[0]](opt.effectTimeS).siblings()[effect[1]](opt.effectTimeE);
}
// tab init
action(opt.autoIndex);
// bind ev for each JQobject
opt.tabO.each(function(i){
o(this)[opt.event](function(){action(i)});
})
}
})(jQuery)
|
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name='keywords' content="">
<meta name='description' content="">
<meta name='robots' content='all'>
<style>
* {margin:0; padding:0}
table { margin:2em; font-size:14px; font-family:verdana }
td { padding:5px; }
</style>
</head>
<body>
<div id="box"></div>
<script>
function get(a,b,l){
var l = l || 10;
var h = '<table>';
var i = 0;
for (a; a < b; a++ )
{
i ++;
if (i%l == 1){
h += '<tr>';
}
h += '<td title="' + a + '">' + String.fromCharCode(a) + '</td>';
if(i != 0 && i%l == 0){
h += '</tr>';
}
}
h += '</table>';
return h;
}
var h = get(1,5000,40)
document.getElementById('box').innerHTML = h;
</script>
</body>
</html>
|
