威尼斯娱乐jquery tools之tooltip_jquery_脚本之家

如tabs的学习,首先给出操作的html目标代码: 复制代码 代码如下:
该功能是通过jqueryObject.tooltip()方法来实现的,其中tabs方法提供以下两种方式:

scrollable提供的一系列获取scrollable对象的方法具体使用方式如下: 复制代码 代码如下:var
scrollable=$.scrollable(); //alert.prev);//获取配置对象中的prev属性
scrollable.getConf().speed=200;//设置配置对象的speed属性
//alert);//获取当前滚动项的索引 //alert.length);//获取当前滚动项的数量
//alert(scrollable.getItemWrap;//获取包含滚动项的节点,并将所有滚动项显示出来
//alert(scrollable.getPageAmount;//获取当前滚动栏分页数
//alert(scrollable.getPageIndex;//获取当前所在分页
//alert.html;//获取滚动项的上一级节点 //alert;
//alert(scrollable.getVisibleItems;//获取当前可见滚动项数量
scrollable.next();//如果有下一个滚动项,则跳转到下一个滚动项
scrollable.prev{return true});//跳转到前一滚动项 //var seekTo=
scrollable.click.seekTo{ //alert; //}); //scrollable.move;
//scrollable.prevPage();//跳转到前一页
//scrollable.nextPage();//跳转到下一页
//scrollable.setPage;//跳转到下一页
//scrollable.begin();//跳转到第一个滚动项
//scrollable.end();//跳转到最后一个滚动项
scrollable.click;//使第四个滚动项处于选中状态 scrollable.onBeforeSeek{
alert(“you click the “+this.getIndex()+”st scrollable item!”); });
$.click{ scrollable.getItems.remove();//删除最后一个滚动项
scrollable.reload;//自动更新相关配置信息,并跳转到被删除滚动项的前一项
});以下是scrollable对象的方法说明描述:

复制代码 代码如下:

如overlay的学习,首先给出操作的html目标代码: 复制代码 代码如下:

  1. $.tooltip()//该方法能采用默认方法显示提示信息栏 2. $.tooltip
    //该方法通过配置对象将来灵活组织提示信息栏的显示。
    以下代码为第二种方式的配置参数实现(只需将该实现放于jquery的ready方法中即可):
    复制代码 代码如下: $.tooltip({
    position:[‘center’,’right’], offset:[-2,10], effect:’fade’,
    fadeInSpeed:300//此属性只有在effect为fade时有效 delay:0, opacity:1,
    tip:””, api:false, onBeforeShow:function(){
    //alert;//this在该回调函数代表即将显示的tooltip对象
    //,关于该api对象的操作参见获取tolltip对象的方法 }, onShow:function(){
    //alert; }, onBeforeHide:function(){ //alert; }, onHide:function(){
    //alert; } });

方法名称返回值说明getConf()Object返回scrollable的配置对象,并且可通过设置该对象的相关属性值来修改该配置对象的属性。getIndex()number获取当前滚动项的索引号,0代表第一个元素,1代表第二个元素,以此类推。此外,需注意的是,如果获取到多个滚动项,那么将会只返回第一个滚动项的索引号。getItems()jQuery返回所有的滚动项,结果以jquery对象的方式返回。getItemWrap()jQuery获取滚动项的父节点,结果以jquery对象的方式返回。getPageAmount()number获取当前滚动栏的分页数。getPageIndex()number返回当前分页索引号。比如说,如果分页设置为5个滚动项/页,并且当前滚动项位置为7的话,那么将会返回1jQuery获取滚动项的上一级节点。getSize()number返回滚动项的数量。该方法等同于getConf().sizegetVisibleItems()jQuery获取一个由当前可见滚动项组成列表,该列表为一个jquery对象,可见滚动项的数量由配置对象的size属性定义。
reload()APIscrollable支持动态添加和删除滚动项的功能。在动态添加或删除滚动项以后,调用此方法来自动更新分页导航以及滚动项移动的相关信息。prev()API跳转到该滚动项的前一项API跳转到该滚动项的下一项seekToAPI跳转到指定索引处的滚动项。move的滚动项位置由当前滚动项向前/后移动offset。Offset为正,则滚动项向右/下移动,否则,向左/上移动。比如:move,则处于当前状态的滚动项的索引由i滚动项转移至i+2滚动项。prevPage。nextPage()API跳转到后一页。setPageAPI跳转到第index页。比如,index=2,那么会从当前页跳转到第3页。movePageAPI用于将显示页的位置由当前页切换到该页/后offset页,该方法其他解释类似于API跳转到第一个滚动项,相当于seekToAPI跳转到最后一个滚动项。clickAPI使第index个滚动项处于选中状态。
onBeforeSeekAPI参见配置对象的onBeforeSeek相关说明onSeekAPI参见配置对象的onSeek相关说明注意:上面方法表中prev()方法以下的方法除了表中携带的参数外,还包含两个隐含参数:speed和callback。其中speed参数是用于控制滚动项的动画效果持续时间的,而callback为其回调方法。具体实现可参见scrollable的prev()方法使用示例。
最后,给出本scrollable系列的完整示例代码: 复制代码 代码如下:

威尼斯娱乐 1

expose test!

下面就以上配置参数说明描述如下:

威尼斯娱乐 2

1. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

60 sec

威尼斯娱乐 3

威尼斯娱乐 4

属性默认值描述effectslideup’

1. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

60 sec

威尼斯娱乐 5

2. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

80 sec

威尼斯娱乐 6

open div

设置提示框出项和隐藏方式,系统提供提供三种effect:toggle,fade,slideup,当然用户也可以定制所需的effect。对于系统提供的三种effect,系统也提供了与其对应的配置参数,这里会在下面单独仔细描述。

2. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

80 sec

威尼斯娱乐 7

3. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

100 sec

威尼斯娱乐 8

close div

delay30设置鼠标离开触发提示框的触发器后提示框显示时间offset[0,
0]精确的调整提示框的位置,该属性具体使用将在下面提示框位置说明中详细描述。opacity1设置提示框的透明度,取值为0-1,值越大表示提示框透明度越低,0为完全透明,此时提示框如同不显示,为1则提示框完全不透明如果背景图片设置为PNG24图形格式,则可以设置背景图片的透明度position[‘top’,
‘center’]初略的设置提示框位置,如需精确控制提示框位置,需配合offset使用,该属性具体使用将在下面提示框位置说明中详细描述。tip设置存储提示框信息的页面元素,tip值格式为jquery选择器格式.默认情况下,提示框信息存放于触犯器元素的下一个紧邻的兄弟节点处,如果该处选择器选择的是页面元素id的话,那么该页面元素将成为所有触发器的提示信息;否则,如果选择器选择出多个结果,那么,每个触发器都会找到其后第一个符合的页面元素作为提示信息.如果没有的话,就从触发器父亲节点重新检索。apiFALSE设置当前tooltip所在容器的返回类型类型。如果为false,以jquery对象返回;否则,以js对象返回。如果存在多个值,返回最后一个值。onBeforeShow提示信息出现之前调用该属性触发的函数,如果该回调函数返回false,那么就会阻止提示信息显示。onShow提示信息显示后调用该属性触发的函数onBeforeHide提示信息显示后调用该属性该属性触发的函数,如果该回调函数返回false,那么就会阻止提示信息隐藏onHide提示信息隐藏后调用该属性该属性触发的函数

3. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

100 sec

威尼斯娱乐 9

4. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

120 sec

威尼斯娱乐 10

该功能是通过jqueryObject.expose()方法来实现的,其具体实现方式如下:
$.expose //该方法通过配置对象将来定制expose的显示。
以下代码为配置参数说明描述:

提示框位置说明

4. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

120 sec

威尼斯娱乐 11

5. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

140 sec

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

  1. $.scrollable//该方法为采用默认方法显示滚动栏 2. $.scrollable
    //该方法通过配置对象来定制滚动栏显示内容及方式。
    以下代码为第二种方式的配置参数实现(只需将该实现放于jquery的ready方法中即可):
    复制代码 代码如下: $.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’ });
    下面对scrollable配置参数描述如下:

属性默认值
size5设置滚动项显示的数量,但是前提条件是必须要正确设置滚动项的父节点(jquery
tools官方网站和本文示例中该父节点的class为scrollable)CSS文件中的宽度,否则仅仅设置该处基本没效果;此外,如果设置分页的话,此处将会显示每页滚动项的数量,即触发“nextPage”或“prePage”后移动的滚动项数量。verticalFALSE设置滚动项滚动的方向,如果为false的话,滚动项水平滚动,否则为垂直滚动;注:对于垂直滚动,不仅需要修改该属性,还需修改相应的css文件。clickableTRUE当滚动项被点击时,是否触发滚动操作。loopFALSE当滚动到最后一个滚动项时,是否重新从第一个滚动项开始滚动,此项需和interval属性共同使用。interval0用于设置滚动项间自动切换的间隔时间。通过将该属性设置为正值,滚动项会在到达间隔时间后自动切换到下一个滚动项。speed400自动滚动的速度keyboardTRUE通过将该属性设置为true/false,来激活/屏蔽键盘方向键对滚动项的切换操作。如果该属性设置为true,那么通过左/右方向键来切换水平滚动的滚动项;通过上/下方向键来切换垂直滚动的滚动项。items”.items”包含滚动项的HTML元素——通过jquery选择器获取;该html元素必须置于滚动项的父节点内prev”.prev”包含向前移动滚动项的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。next”.next”包含向后移动滚动项的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。prevPage”.prevPage”包含跳转到上一页的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。nextPage”.nextPage”包含跳转到下一页的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。navi”.navi”包含分页导航器的HTML元素——通过jquery选择器获取;该html元素必须为滚动项父节点的兄弟节点。但是,如果该选择器通过id获取html元素,那么该html元素可以置于页面的任何位置。naviItem”a”包含于分页导航器内的HTML元素——通过jquery选择器获取;这些元素用于分页导航。activeClass”active”以下两种情况下对应项的CSS类名称:a.被点击的滚动项;b.当前页对应的分页导航项disabledClass”disabled”用于将next/nextPage和prev/prevPage渲染为不可用的CSS类名称。例如:当前滚动项前面没有滚动项时,prev元素会被置为不可用状态。hoverClass
当鼠标移动到某滚动项上方时,该滚动项的CSS类名称即被指为该class。easing”swing”用于设置滚动项切换时的动画效果,目前jquery
tools提供了“swing”和“linear”两种动画效果,更多的动画效果参考jquery
easing pluginapiFALSE该属性同该系列中juqry tools 之tabs 和 jquery tools
之 tooltiponBeforeSeek
滚动项滚动前触发该该属性设置的函数。如果该属性设置函数返回false,那么触发该函数的滚动项将不会滚动并替代前一个滚动项位置。该函数将会返回一个包含目标元素索引号的数组。onSeek
滚动项滚动后触发该该属性设置的函数。对于scrollable方法及示例请参见jquery
tools 之 scrollable

属性默认值详细描述color’#456’设置页面中非expose效果显示时的背景颜色。如果此处未设置背景色,那么expose功能会提供一个默认的颜色。另外属性亦可通过maskId的CSS样式来设置。opacity0.8设置页面中非expose效果显示时的背景透明度。该处透明度的取值范围为[0,1],该处值越大,透明度越低。loadSpeed’slow’设置页面中非expose效果触发时的显示速度。该处值可设置为:’slow’,’normal’,’fast’和毫秒数值。例如:如果此处设置值为2000,那么非expose区域效果将会在2秒钟中内显示完成。如果此处设置值为0,那么非expose区域将会没有动画效果并立即显示出来。closeSpeed’fast’设置页面中非expose效果关闭时的关闭速度。该处值可设置为:’slow’,’normal’,’fast’和毫秒数值。具体示例可参见本文相关示例。
maskId’exposeMask’非expose区域对应的页面div元素id,它是一个普通的div元素,当expose被触发后,他会自动调整以完全的覆盖整个页面。非expose区域的显示效果可以通过设置该处div的样式来改变。如果此处没有设置,那么该插件会默认提供一个id为exposeMask的div来实现非expose区域。closeOnClickTRUE该属性用于设置非expose区域被点击时,是否关闭expose效果。该属性默认值为true,及非expose区域被点击后,expose效果被关闭。closeOnEscTRUE该属性用于设置Esc键被按下后,是否关闭expose效果。该属性默认值为true,及Esc键被按下后,expose效果被关闭。zIndex9998设置页面设置页面中非expose属性。一般情况下,默认的zIndex属性值都非常大,所以这里不需要设置,但是,有一点需要注意的是,该非expose的z-index属性值一定要大于页面中任何一个元素的z-index属性。apiFALSE该属性解释可参见本系列中tabs,scollable等功能同属性的解释。
onBeforeLoad
expose效果触发前调用函数。如果该函数返回false,那么expose将会被阻止实现。onLoad
expose效果实现后,该函数被触发。onBeforeClose
expose效果关闭前调用函数。如果该函数返回false,那么expose将会被阻止关闭。onClose
expose效果关闭后,该函数被触发。此外,expose还提供了一系列获取expose对象的方法,这些方法的说明描述如下:

提示框位置通过config配置对象的position和offset属性来设置实现。这两个属性都是用js数组进行值存放的。

5. An example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis
eget tellus pharetra porttitor. Praesent dui arcu, egestas quis,
adipiscing a.

140 sec

方法返回值详细描述load效果,该方法只有expose被初始化后才能调用成功。close效果。isLoaded()boolean判断当前exposejQuery返回非expose的jquery对象。可以通过jquery的相关方法来改变非expose区域的显示效果。getExposed的jquery对象。getConf的配置对象。
onBeforeLoadAPI同配置文件中onBeforeLoad属性。onLoadAPI同配置文件中onLoad属性。onBeforeCloseAPI同配置文件中onBeforeClose属性。onCloseAPI同配置文件中onClose属性。对于expose配置对象属性设置及方法调用的具体使用方法如下:
复制代码 代码如下:var testApi=$.expose({
color:’#44f’, opacity:0.5, loadSpeed:2000, closeSpeed:3000,
closeOnClick:false, closeOnEsc:false, api: true, lazy:true,
onBeforeLoad:function(){ alert; }, onLoad:function; },
onBeforeClose:function(){
alert(“mask-background:”+this.getMask+”,exposeId:”+this.getExposed +”\n
expose color:”+this.getConf; //alert; }, onClose:function; } }); $.click
{ testApi.load.click{ testApi.load; $.click{ testApi.close; alert(“test
is load:”+testApi.isLoaded.expose({
//此处通过maskId中样式的backgroundcolor来设置color属性 maskId:’mask’,
opacity:0.5, closeSpeed:’slow’, onBeforeLoad:function.animate; },
onBeforeClose:function.animate.click.expose;最后,给出完整示例代码及该功能得部分demo图片:
复制代码 代码如下:

Position属性用来设置提示信息相对于它的触发元素位置。比如说,如果该属性值为[‘bottom’,’center’],那么提示信息将会出现在其触发元素的正下方。下图能很好的描述触发元素与提示信息的位置关系:

expose test!

de life” alt=”jquery tools之tooltip – gaoyusi – My code life”
src=”;

威尼斯娱乐 12

offset属性用来进一步精确的调整提示框的位置。比如:[10,-20]表示提示信息向下10px并向左偏移20px。数组的前一个值用于描述提示框距其上边框向下偏移的值;数组的后一个值
用于描述提示框距其左边框向右偏移的值。

open div

系统内置effect描述

close div

系统内置的三种effect及其参数设置说明:

toggle:一种简单的显示/隐藏效果,这里tooltip没有提供与之对应的配置参数

fade:一种逐渐显示/逐渐隐藏的效果,这里tooltip提供了两个与其对应的配置参数:

fadeInSpeed——默认值为200ms,用于设置提示信息逐渐显示的速度。

fadeUotSpeed——默认值为200ms,用于设置提示信息逐渐隐藏的速度。

slideup:一种逐渐向上/下滑动的效果,这里tooltip提供了三个与其对应的配置参数:

slideOffset——默认值为10,用于描述提示信息在垂直方向上滑动到距触发元素的距离,如果为正值,那么就是向上滑动,否则为向下滑动。

slideInSpeed——默认值为200ms。用于设置提示信息滑动显示的速度

slideOutSpeed——默认值为200ms。用于设置提示信息滑动消失的速度

此外,tooltip还提供了一系列获取tooltip对象的方法,具体实现描述如下:复制代码 代码如下:var
tooltip=$.tooltip;//取第3个tooltip对象 tooltip.show; //alert;
//alert.html; //alert.next; //alert.effect);
tooltip.onBeforeShow=function() //alert; } tooltip.onShow=function(){
alert; } tooltip.onBeforeHide=function(){ alert; }
tooltip.onHide=function(){ alert; }

下面就以上获取tooltip对象的方法说明描述如下:

方法名返回值描述show()API显示提示信息,如果取到多个tooltip对象,默认显示第一个tooltip对象提示信息hideboolean该tooltip对象的提示信息是否处于显示状态getTip()jQuery将当前tooltip对象转换为jquery对象getTrigger()jQuery将当前tooltip的触发器对象转换为jquery对象getConf获取当前触发器器配置对象,对于对象内的每个属性调用只需直接取属性名即可onBeforeShowAPI同Config参数配置对象中的onBeforeShowonShowAPI同Config参数配置对象中的onShowonBeforeHideAPI同Config参数配置对象中的onBeforeHideonHideAPI同Config参数配置对象中的onHide

最后,以jquery tools上几个demo的截图为结尾:

de life” alt=”jquery tools之tooltip – gaoyusi – My code life”
src=”;

de life” alt=”jquery tools之tooltip – gaoyusi – My code life”
src=”;

de life” alt=”jquery tools之tooltip – gaoyusi – My code life”
src=”;

相关文章