<!-- lang: js -->
/*** ol.ui.alternation* 为表格或其他元素添加间隔的斑马线和鼠标滑过高亮效果。* 用法：* alternation(idOrClass:String,options:Object)：* idOrClass: 必须，jQuery选择器,可以是id或者class，通常指定要高亮的表格idoptions: 可选, 设置高亮参数options:{参数 类型   默认值 必填？ 说明row: String "tr"  可选 如果构造函数第一个参数指定为table的id，则该参数可以忽略，否则必须指定一个能匹配一组对象的jquery选择器名称，例如："div"colors:Array null 可选 指定每行间隔的颜色，如果没指定，则不显示间隔色，可以指定多于2钟颜色。hover: String null 可选 指定鼠标滑过的颜色，如果为null则不设置index: Number 0 可选 指定从第几个元素开始设置效果remain:Number 0 可选 从下往上，有多少个元素不用设置效果alterNum:Number 1 可选 间隔行数，每隔多少行应用变色效果}使用说明:1.常规使用ol.ui.alternation("#position_data_table",{index:1,colors:["#fff",'#f7f7f7'],hover:'#e3f3bf'});2.多种颜色、间隔不连续 ol.ui.alternation("#position_data_table",{index:2,remain:2,alterNum:3,colors:["#eeffcc",'#886688','#ffee11'],hover:'#e3f3bf'});   3.鼠标滑过效果作用于多行(1).首先要为每一行添加一个group属性，同一组的group值必须一样<tr class='item' group="1"></tr><tr class='item' group="1"></tr><tr class='item' group="2"></tr><tr class='item' group="2"></tr><tr class='item' group="3"></tr><tr class='item' group="3"></tr> (2).调用ol.ui.alternation("#position_data_table");此时当鼠标滑过某行时，与该行属于同一组的其他行都会添加上名为"hover"的样式(3).自定义hover样式 为了灵活性考虑，hover样式没有默认的值，由使用者自己定义，例如：.hover{border:1px solid #bbccff;background-color:#eeffcc;}4.作用于非表格元素上<div id="ol_ui_alternation"><a href=''>单片机</a><a href=''>java</a><a href=''>软件工程师</a></div>ol.ui.alternation("#ol_ui_alternation",{row:"a",colors:["#fff","#fff","#fff","#fff","#fff","#F3F3F3",'#F3F3F3',"#F3F3F3",'#F3F3F3','#F3F3F3'],hover:'#e3f3bf'});*/(function(){/**参数 *row:*colors:*hover:*index:*remain:*alterNum:*/var _default={row:"tr",colors:["#fff",'#f7f7f7'],//颜色hover:"#e3f3bf",  //鼠标停留背景色index: 1 ,     //起始行行标remain: 0 ,  //保留最后不处理的行数alterNum:1      //间隔行数};cv.ui.alternation = function(selector,options){var $=jQuery;function _alternation(obj,options){var self=this;this.container=$(obj);this.data={};this.rows=null;this.init=function(){this.rows=this.container.find(options.row);var row;var group;for(var i=0;i<this.rows.length;i++){row=this.rows[i];row.setAttribute("alternation",i);group=row.getAttribute("group");this.data[i]={group:group,backgroundColor:""};}}//表格着色this.bindColor=function(){if(!options.colors)return;var end=this.rows.length-options.remain;for(var i=options.index;i<end;){for(var j=0;j<options.colors.length&&i<end;j++){row=this.rows[i];row.style.backgroundColor=options.colors[j];this.data[i].backgroundColor=options.colors[j];i=i+options.alterNum;}}}//绑定动作this.bindEvent=function(){this.rows.unbind("mouseover").bind("mouseover",function(){var thix=$(this);var index=thix.attr("alternation");var row=self.data[index];if(options.hover)thix.css("backgroundColor",options.hover);if(row.group)self.container.find(options.row+"[group="+row.group+"]").addClass("hover");}).unbind("mouseout").bind("mouseout",function(){var thix=$(this);var index=thix.attr("alternation");var row=self.data[index];if(options.hover)thix.css("backgroundColor",row.backgroundColor);if(row.group)self.container.find(options.row+"[group="+row.group+"]").removeClass("hover");});}this.init();this.bindColor();this.bindEvent();}//function endoptions=$.extend({},_default, options);$(selector).each(function(){new _alternation(this,options);});}
})();