JSer对象 active(args1, args2)
描述:
这是一个焦点响应元素样式的快捷实现. 根据焦点的得(focus)和失(blur)动作显示不同的样式.
参数:
此方法接收两个必须的参数args1和args2, 可以是以下三种类型之一,两个参数类型必须一致:
参数 类型 说明
args1

args2
string 当参数为字符时,此字符串将作为样式名称(class)添加到当前的元素.
object 当参数为对象时,将视之为"名称/值"的样式对象,并将此样式对象添加到当前元素.
function 当参数是一个函数时,将在active响应时,执行这个函数
返回:
JSer 当前的JSer对象。
特别提示:
  当您使用了此方法后,JSer将为元素添加一个名为"active"的自定义事件处理函数,以方便您通过调用.on("active")来使DOM元素在active动作发生之前呈现的样式与active动作发生之后呈现的样式保持一致.实现上,添加的这个事件函数和active动作发生之后(即blur)所执行的函数完全一致.但是,您并不能通过调用.blur()来替代.on("active"),这是因为,当您调用.blur()时,可能还会执行已绑定到该元素的其它blur事件处理函数,而on("active")则不会出现这种问题.
示例1:
css代码:
.activeOn{border:1px red solid;}
.activeOff{border:1px gray solid;}
js代码:
JSer(":input").active("hoverOn", "hoverOff").on("active");//on("active")不是必须的(下同)
上面的JS代码等效于:
JSer(":input").on({
    focus: function(){
        JSer(this).addClass("activeOn").removeClass("hoverOff");
    },
    blur: function(){
        JSer(this).addClass("activeOff").removeClass("hoverOn");
    },
    active: function(){
        JSer(this).addClass("activeOff").removeClass("hoverOn");
    }
}).on("active");
示例2:
js代码:
JSer(":input").active(
    {border:"1px red solid"},
    {border:"1px gray solid"}
).on("active");
hover方法传入的是两个对象,则作为CSS样式添加到:input元素,上面的代码等效于:
JSer(":input").on({
    focus: function(){
        JSer(this).css({border:"1px red solid"});
    },
    blur: function(){
        JSer(this).css({border:"1px gray solid"});
    },
    active: function(){
        JSer(this).css({border:"1px gray solid"});
    }
}).on("active");
示例3:
js代码:
JSer(":input").active(
    function(){ JSer(this).css("border", "1px red solid"); },
    function(){ JSer(this).css("border", "1px gray solid"); }
).on("active");
active方法传入的是两个函数,则active动作发生时,将执行这两个函数,上面代码等效于:
JSer(":input").on({
    focus: function(){
        JSer(this).css("border", "1px red solid");
    },
    blur: function(){
        JSer(this).css("border", "1px gray solid");
    },
    active: function(){
        JSer(this).css("border", "1px gray solid");
    }
}).on("active");
请参考:
hover(args1, args2)