Menu
Woocommerce Menu

自定义事件初探

0 Comment

对于scrollable方法及示例请参见jquery tools 之 scrollable(二)

 

“因为事件机制仅传递一个函数的名称,不带有任何参数的信息,所以无法传递参数进去”,这是后话了,“要解决这个问题,可以从相反的思路去考虑,不考虑怎么把参数传进去,而是考虑如何构建一个无需参数的事件处理程序,该程序是根据有参数的事件处理程序创建的,是一个外层的封装。”,这里的“该程序”就是
createFunction函数,它巧妙地利用apply函数将带参数的函数封装为无参数函数。最后我们看看如何实现自定义事件的多绑定:
// 使自定义事件支持多绑定
// 将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; // 定义args 用于存储传递给事件处理程序的参数
if ( ! obj) obj = window; // 如果是全局函数则obj=window;
// 得到传递给事件处理程序的参数
for ( var i = 2 ; i < arguments.length; i ++ )
args.push(arguments[i]);
// 用无参数函数封装事件处理程序的调用
return function () {
obj[strFunc].apply(obj, args); // 将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .onShow.length; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) {
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
}
}
function objOnShow(userName) {
alert( ” hello, ” + userName);
}
function objOnShow2(testName) {
alert( ” show: ” + testName);
}
function test() {
var obj = new class1();
var userName = ” your name ” ;
obj.attachOnShow(createFunction( null , ” objOnShow ” , userName));
obj.attachOnShow(createFunction( null , ” objOnShow2 ” , ” test message
” ));
obj.show();
}
我们看到,attachOnShow方法实现的基本思想是对数组的push操作,其实我们还可以在事件执行完成之后,移除事件处理函数,下面单独实现:
// 将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; // 定义args 用于存储传递给事件处理程序的参数
if ( ! obj) obj = window; // 如果是全局函数则obj=window;
// 得到传递给事件处理程序的参数
for ( var i = 2 ; i < arguments.length; i ++ )
args.push(arguments[i]);
// 用无参数函数封装事件处理程序的调用
return function () {
obj[strFunc].apply(obj, args); // 将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .onShow.length; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) { // 附加事件
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
},
detachOnShow: function (_eHandler) { // 移除事件
if ( ! this .onShow) { this .onShow = []; }
this .onShow.pop(_eHandler);
}
}

$(“div.scrollable”).scrollable({
        size: 3,
        vertical:false,
        //clickable:false,
        loop:true,//设置是否自动跳转(根据间隔时间)
        //interval: 1000,//设置间歇时间间隔
        //speed:2000,
        items: ‘#thumbs’,
        //prev:’.prev’,//跳转到上一项
        //next:’.next’//跳转到下一项
        prevPage:’.prev’,//跳转到上一页
        nextPage:’.next’,//跳转到下一页
        hoverClass: ‘hover’,
        easing:’linear’
    });    

onBeforeClose

还有,“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率。”。相信C#程序员对事件的好处是深有体会的。好了,Code
is cheap.看代码:
function class1() { // 最简单的事件设计模式
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1();
obj.onShow = function () {
alert( ” test ” );
}
obj.show();
}
下面看看如何给事件处理程序传递参数:
// 将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; // 定义args 用于存储传递给事件处理程序的参数
if ( ! obj) obj = window; // 如果是全局函数则obj=window;
// 得到传递给事件处理程序的参数
for ( var i = 2 ; i < arguments.length; i ++ )
args.push(arguments[i]);
// 用无参数函数封装事件处理程序的调用
return function () {
obj[strFunc].apply(obj, args); // 将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function objOnShow(userName) {
alert( ” hello, ” + userName);
}
function test() {
var obj = new class1();
var userName = ” test ” ;
obj.onShow = createFunction( null , ” objOnShow ” , userName);
obj.show();
}

下面对scrollable配置参数描述如下:

onLoad

复制代码 代码如下:

用于设置overlay弹出框开始的位置以及大小。默认的情况下,overlay弹出框开始的位置是其触发器(即触发其显示的页面元素)的位置,并且overlay弹出框初始的大小为0;如果overlay不是通过页面元素触发的话,那么他开始的位置为屏幕的中间位置。可以通过以下几个参数设置来覆盖该属性的默认值:

function objOnShow(userName) {
alert( ” hello, ” + userName);
}
function objOnShow2(testName) {
alert( ” show: ” + testName);
}
function test() {
var obj = new class1();
var userName = ” your name ” ;
obj.attachOnShow(createFunction( null , ” objOnShow ” , userName));
obj.attachOnShow(createFunction( null , ” objOnShow2 ” , ” test message
” ));
obj.show();
obj.detachOnShow(createFunction( null , ” objOnShow ” , userName));
obj.show(); // 移除一个,显示剩余的一个
obj.detachOnShow(createFunction( null , ” objOnShow2 ” , ” test message
” ));
obj.show(); // 两个都移除,一个也不显示
}
关于自定义事件的学习先到这里。

复制代码 代码如下:

9999

属性
默认值
size 5
vertical FALSE
clickable TRUE
loop FALSE
interval 0
speed 400
keyboard TRUE
items ".items"
prev ".prev"
next ".next"
prevPage ".prevPage"
nextPage ".nextPage"
navi ".navi"
naviItem "a"
activeClass "active"
disabledClass "disabled"
hoverClass  
easing "swing"
api FALSE
onBeforeSeek  
onSeek  

默认情况下,点击页面中overlay弹出框外的其他区域,可以关闭该overlay弹出框。但是,将该属性设置为false可以屏蔽该功能。

  1. $(“div.scrollable”).scrollable//该方法为采用默认方法显示滚动栏
  2. $(“div.scrollable”).scrollable({config object})
    //该方法通过配置对象来定制滚动栏显示内容及方式。
    以下代码为第二种方式的配置参数实现(只需将该实现放于jquery的ready方法中即可):

用于设置overlay弹出框最终所处的位置及大小。、可以通过以下几个参数设置来覆盖该属性的默认值:

代码如下: !– navigator — div
class=”navi”/div !– prev link — a class=”prev”/a !– root element for
scrollable — div class=”scrollable” div id=”thumbs” div img…

overlay弹出框经常与expose功能共同使用。而二者共同使用的方式正是通过overlay的该配置属性来设置的。该配置项接受expose功能的配置对象。该属性接受的参数分两种:一种为只接受expose背景色设置的字符串;另一种方式为expose配置对象。该属性的两种参数方式可参见本文示例。

<!– navigator –>
<div class=”navi”></div>
<!– prev link –>
<a class=”prev”></a>
<!– root element for scrollable –>
<div class=”scrollable”>
<div id=”thumbs”>
<div>
<img src=””
src=”” />
<h3><em>1. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing
a.
</p>
<span class=”blue”>60 sec</span>
</div>
<div>
<img src=””
src=”” />
<h3><em>2. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing
a.
</p>
<span class=”blue”>80 sec</span>
</div>
<div>
<img src=””
src=”” />
<h3><em>3. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing
a.
</p>
<span class=”blue”>100 sec</span>
</div>
<div>
<img src=””
src=”” />
<h3><em>4. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing
a.
</p>
<span class=”blue”>120 sec</span>
</div>
<div>
<img src=””
src=”” />
<h3><em>5. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing
a.
</p>
<span class=”blue”>140 sec</span>
</div>
</div>
</div>
<!– next link –>
<a class=”next”></a>
<!– let rest of the page float normally –>
<br clear=”all” />

 

该功能是通过jqueryObject.scrollable()方法来实现的,其中scrollable方法提供以下两种方式:

设置overlay提示框的z-index属性(css),至于z-index属性作用,请参见相关资料。该属性已被设置为一个很高的值-999,所以一般情况下,该属性不需要再行设置。但是需要注意的是,该值应该大于通页面其他元素的z-index值。

close

oneInstance

    
left:用于设置overlay弹出框最终位置据屏幕左边缘的距离。

    
width:用于设置overlay弹出框在开始位置处的宽度(即弹出框最初始宽度);而overlay在开始处高度则会根据宽度自动计算出来。

如scrollable的学习,首先给出操作的html目标代码:

该属性设置同selector,tab功能的api属性。该属性意义参考本系列selector,tab相关说明。

preload

默认情况下,一个页面只会显示一个overlay弹出框。但是,可通过将该属性设置为false来允许该页面显示多个overlay弹出框。(注:该属性在closeOnClick设置为false的情况下才能有比较明显的效果。)

默认情况下,背景图片会被预先加载到浏览器的缓存中。所以,当overlay提示框被打开时,overlay提示框的背景图片已被加载到缓存,所以当触发overlay提示框时,整个提示框弹出过程会很平滑。另外,可通过将属性设置为false来阻止背景图片的预加载。

TRUE

FALSE

 

  1. $(“button[rel]”).overlay()//该方法能采用默认方法显示提示overlay
  2. $(“button[rel]”).overlay({config object})
    //该方法通过配置对象将来定制overlay的显示。
    以下代码为第二种方式的配置参数实现(只需将该实现放于jquery的ready方法中即可):

expose

None

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图