easyui获取当前相中的tabs,tab自动加载第贰个tab内容

By admin in 4858美高梅 on 2019年4月18日

$(‘#resourceTabs’).tabs(‘unselect’, 0);
$(‘#resourceTabs’).tabs(‘select’, 0);

easyui获取当前相中的tabs,easyui当前tabs

$(“#” + $(“#tabs”).find(“iframe”)[$(“.tabs-header ul
li”).index($(‘.tabs-selected’)) –
1].id).contents().find(“.search_button”).click();

那句代码获取easyui当前选中的tabs并触发类为”.search_button”的点击事件

4858美高梅 , 

 $(“#tabs”).find(“iframe”)

tabs为easyui的ID,tabs在HTML上加载的正是iframe,所以地方那句代码是获取获取当前开垦的享有tabs

(每张开3个tabs,HTML上就多一个iframe,同理每关闭1个tabs,HTML上就少几个iframe,动态加载)

 

$(“.tabs-header ul li”).index($(‘.tabs-selected’))

为当下展现的tabs的index,

注:tabs在页面上出示的逐条与HTML上iframe的依次1致,但鉴于有首页,所以index会比iframe序号多一,所以要减1

 

 $(“#tabs”).find(“iframe”)[$(“.tabs-header ul
li”).index($(‘.tabs-selected’)) – 1]

这么就足以赢得到了当前彰显的tabs的iframe节点HTML

$(“#” +
$(“#tabs”).find(“iframe”)[$(“.tabs-header ul
li”).index($(‘.tabs-selected’)) –
1].id).contents().find(“.search_button”).c…

昨日对jquery
UI的tabs进行了一发的问询,目标是想把迟钝的切换效果变得动感点,不过通过那尤其的打听,发现它并不适当或都说并不可能兑现自个儿想要的功能,小编想要的作用便是近乎Tmall百货店的banner那样,它的名目正是名称叫tabs,所以小编想,也正是因为它的定位是标签页、选项卡,所以不可能改装成banner大图轮换那样的效果。
自己想笔者应当把其他plug来落到实处banner大图轮换效果。
easyui获取当前相中的tabs,tab自动加载第贰个tab内容。无论贴进程中找到的技艺文书档案:

明天对jquery
UI的tabs实行了更进一步的明白,目标是想把愚拙的切换效果变得动感点,可是通过那特别的垂询,发现它并不正好或都说并不可能兑现本人想要的作用,小编想要的功能就是周边Tmall市廛的banner那样,它的称号正是称呼tabs,所以本人想,也正是因为它的定位是标签页、选项卡,所以不可能改装成banner大图轮换那样的意义。
自家想作者应当把别的plug来落实banner大图轮换效果。
任凭贴进程中找到的本领文书档案:

1 属性
1.1一ajaxOptions,当选项卡加载内容时,加多三个ajax选项。唯有ajax时,加多的ajax选项
才起效果。暗许值为null。上边包车型客车例证中,增加了beforeSend和success八个选项。ajax还有
有些选项请参考jquery ajax,那里不做详解。。。
一.1二 起头化设置例:请留心,$(‘.selector’)是tabs
的类名,在本例中.selector=#tabs,以
后不复说明。
$(‘.selector’).tabs({ ajaxOptions: { async: false }
});//这里是将异步改为了1道

一.一3起先化后的参数获取和安装:请小心:getter为获得,发音:盖特儿,setter为设置,发音:
塞特儿,未来不再表明。
//getter
var ajaxOptions = $(‘.selector’).tabs(‘option’, ‘ajaxOptions’);
//setter
$(‘.selector’).tabs(‘option’, ‘ajaxOptions’, { async: false });

1 属性
一.1一ajaxOptions,当选项卡加载内容时,增多二个ajax选项。唯有ajax时,加多的ajax选项
才起效果。默许值为null。下面的例证中,增添了beforeSend和success七个挑选。ajax还有
有个别抉择请参考jquery ajax,那里不做详解。。。
一.12 初步化设置例:请留意,$(‘.selector’)是tabs
的类名,在本例中.selector=#tabs,以
后不复表达。
$(‘.selector’).tabs({ ajaxOptions: { async: false }
});//那里是将异步改为了壹道

一.13开始化后的参数获取和装置:请小心:getter为博得,发音:盖特儿,setter为设置,发音:
塞特儿,今后不再表明。
//getter
var ajaxOptions = $(‘.selector’).tabs(‘option’, ‘ajaxOptions’);
//setter
$(‘.selector’).tabs(‘option’, ‘ajaxOptions’, { async: false });

一.2一 cache
默认为false,无缓存。这几个选项用于ajax调用,简单来讲无缓存,正是每一次发送
呼吁都刷新;有缓存正是首先次呼吁刷新,今后就不刷新了,关闭页面是其它贰次事。
ajaxOptions:{cache:false}应该和那个职能是壹模同样的吗。
1.2② 起始化设置例:
$(‘.selector’).tabs({ cache: true });
贰.二三 初叶化后的参数获取和安装:
//getter
var cache = $(‘.selector’).tabs(‘option’, ‘cache’);
//setter
$(‘.selector’).tabs(‘option’, ‘cache’, true);

一.二一 cache
默以为false,无缓存。这么些选项用于ajax调用,一言以蔽之无缓存,便是历次发送
伸手都刷新;有缓存正是第2遍呼吁刷新,今后就不刷新了,关闭页面是别的二次事。
ajaxOptions:{cache:false}应该和那一个效应是同样的呢。
壹.2二 开首化设置例:
$(‘.selector’).tabs({ cache: true });
二.23 开首化后的参数获取和设置:
//getter
var cache = $(‘.selector’).tabs(‘option’, ‘cache’);
//setter
$(‘.selector’).tabs(‘option’, ‘cache’, true);

1.3一collapsible,意思是可折叠的,暗中认可选项是false,不得以折叠。要是设置为true,允许用
户将曾经入选的选项卡内容折叠起来。这样说吧:点击一回选项卡二,选项卡
贰内容突显出来
了,那时候再度点击选项卡二,选项卡的内容区就收了起来,再一次点击选项卡2,选项卡的内容区
则又张开了。明白否?知道你不明白,不明白就用最上边包车型地铁例证试试吧。
壹.3二 初阶化设置例:
$(‘.selector’).tabs({ collapsible: true });
一.33 起首化后的参数获取和装置:请参见一.贰三…

一.31collapsible,意思是可折叠的,暗中认可选项是false,无法折叠。假设设置为true,允许用
户将已经入选的选项卡内容折叠起来。那样说呢:点击贰遍选项卡二,选项卡
2内容突显出来
了,这时候再一次点击选项卡2,选项卡的内容区就收了起来,再度点击选项卡二,选项卡的内容区
则又开始展览了。掌握否?知道你不知情,不知情就用最上边的例证试试啊。
壹.3二 初阶化设置例:
$(‘.selector’).tabs({ collapsible: true });
壹.33 开首化后的参数获取和安装:请参见一.贰三…

一.四1 cookie
暗许值为null,供给cookie插件。保存最后二回选取的选项卡到cookie 中。可
利用的选项例:(example): { expires: 7, path: ‘/’, domain: ‘jquery.com’,
secure:
true }.
1.4二 开首化设置例:$(‘.selector’).tabs({ cookie: { expires: 30 } });
一.43 早先化后的参数获取和安装:请参见一.二三…

一.肆1 cookie
暗中认可值为null,必要cookie插件。保存最终3遍选择的选项卡到cookie 中。可
应用的选项例:(example): { expires: 柒, path: ‘/’, domain: ‘jquery.com’,
secure:
true }.
一.4二 初步化设置例:$(‘.selector’).tabs({ cookie: { expires: 30 } });
1.四3 开始化后的参数获取和设置:请参考一.23…

一.51deselectable 默以为false,效用仿佛和collapsible一样。

一.5一deselectable 默以为false,作用仿佛和collapsible一样。

1.61 disabled
设置什么样选项卡不可用,是贰个数组例[0,1,2],也正是率先个、第二个、第
多少个选项卡。默以为[]。
壹.6贰 起先化设置例:$(‘.selector’).tabs({ disabled: [1, 2] });
一.6三 初步化后的参数获取和安装:请参考一.二三…

一.陆一 disabled
设置什么样选项卡不可用,是1个数组例[0,1,2],相当于第三个、首个、第
七个选项卡。默以为[]。
一.6二 开头化设置例:$(‘.selector’).tabs({ disabled: [1, 2] });
一.陆叁 初叶化后的参数获取和安装:请参见一.二3…

1.7一 event ,切换选项卡的事件,默感到’click’,点击切换选项卡。
1.7二 开始化设置例:$(‘.selector’).tabs({ event: ‘mouseover’ });
//鼠标滑过切换选
项卡
一.73 开始化后的参数获取和装置:请参考1.23…

1.7一 event ,切换选项卡的风云,默以为’click’,点击切换选项卡。
一.7二 开始化设置例:$(‘.selector’).tabs({ event: ‘mouseover’ });
//鼠标滑过切换选
项卡
一.7三 初始化后的参数获取和设置:请参考一.二三…

1.八一 fx,切换选项卡时的动画效果,默感到:null,无动画效果,
1.8二 初步化设置:请参考最上面包车型大巴例证。
一.8三 初步化后的参数获取和设置:请参见一.贰3…

一.八一 fx,切换选项卡时的卡通片效果,默以为:null,无动画效果,
壹.八二 开头化设置:请参见最上面的事例。
一.八三 早先化后的参数获取和设置:请参考一.二三…

1.91 idPrefix
,在使用ajax时,idPrefix选项可感觉其充分3个唯壹的id,默以为
:’ui-tabs-‘ 。
1.玖贰 初阶化设置例:$(‘.selector’).tabs({ idPrefix: ‘ui-tabs-primary’
});
壹.九3 开首化后的参数获取和安装:请参见一.二三…

壹.玖一 idPrefix
,在利用ajax时,idPrefix选项可认为其丰硕1个唯一的id,默以为
:’ui-tabs-‘ 。
一.92 开首化设置例:$(‘.selector’).tabs({ idPrefix: ‘ui-tabs-primary’
});
一.玖三 开始化后的参数获取和装置:请参见一.二3…

1.拾1selected,起初化时,哪个选项卡被选中,默感到0,便是第四个选项卡被入选。
一.10二 起先化设置例:$(‘.selector’).tabs({ selected: 三 });
1.十3 初阶化后的参数获取和安装:请参见一.二叁…

壹.十一selected,开始化时,哪个选项卡被选中,默以为0,正是率先个选项卡被入选。
一.102 初阶化设置例:$(‘.selector’).tabs({ selected: 3 });
壹.十三 早先化后的参数获取和装置:请参见壹.二3…

一.11一spinner,当远程内容加载的时候,(ajax),spinner字符串的html内容将被显示在增选
卡的标题上。(笔者很想得到,作者要好试了,怎么不起功能?)
1.112 起初化设置例:$(‘.selector’).tabs({ spinner: ‘Retrieving data…’
});
1.1一叁 起先化后的参数获取和安装:请参考一.二3…

一.11一spinner,当远程内容加载的时候,(ajax),spinner字符串的html内容将被出示在增选
卡的题目上。(笔者很想得到,作者要好试了,怎么不起作用?)
壹.11二 初步化设置例:$(‘.selector’).tabs({ spinner: ‘Retrieving data…’
});
1.1一三 初步化后的参数获取和安装:请参考一.二三…

1.121 panelTemplate ,

1.121 panelTemplate ,

1.131 tabTemplate ,

1.131 tabTemplate ,

2 事件
先交付三个事变绑定的事例,请留意:
$(‘#example’).bind(‘tabsselect’, function(event, ui) {
   ui.tab     // 被入选(点击后)的选项卡成分
   ui.panel   //那一个成分包蕴被入选(点击后)的选项卡的内容
   ui.index   //重临1个被选中(或点击后)选项卡的索引值(从0起初)
});

2 事件
先交由1个风浪绑定的事例,请留意:
$(‘#example’).bind(‘tabsselect’, function(event, ui) {
   ui.tab     // 被入选(点击后)的选项卡成分
   ui.panel   //那几个成分包含被入选(点击后)的选项卡的内容
   ui.index   //再次来到三个被选中(或点击后)选项卡的索引值(从0初叶)
});

2.1一 select 类型:tabsselect ,点击选项卡时触发该事件。
二.12 初始化时绑定事件:
$(‘.selector’).tabs({
   select: function(event, ui) { … }
});
二.一3 在初叶化后使用事件绑定绑定该事件:
$(‘.selector’).bind(‘tabsselect’, function(event, ui) {

});

二.1一 select 类型:tabsselect ,点击选项卡时触发该事件。
二.1二 伊始化时绑定事件:
$(‘.selector’).tabs({
   select: function(event, ui) { … }
});
二.一三 在开端化后选取事件绑定绑定该事件:
$(‘.selector’).bind(‘tabsselect’, function(event, ui) {

});

2.二壹 load,类型:tabsload
三个远程(ajax)选项卡的内容被加载成功后触发该事件。
2.22 参考2.12
2.23 参考2.13
二.3一 show,类型:tabsshow 当选项卡突显后触发该事件。
2.四壹 add,类型:tabsadd ,当三个选项卡被加多后触发。
贰.51 remove ,类型tabsremove ,当二个选项卡被删去后触发。
二.陆一 enable ,类型tabsenable ,当3个选项卡可用时接触。
二.71 disable,类型tabsdisable,当二个选项卡不可用时接触。

二.二一 load,类型:tabsload
1个远程(ajax)选项卡的剧情被加载成功后触发该事件。
2.22 参考2.12
2.23 参考2.13
二.31 show,类型:tabsshow 当选项卡彰显后触发该事件。
贰.四一 add,类型:tabsadd ,当贰个选项卡被增多后触发。
2.5壹 remove ,类型tabsremove ,当叁个选项卡被去除后触发。
2.陆1 enable ,类型tabsenable ,当三个选项卡可用时接触。
二.7一 disable,类型tabsdisable,当2个选项卡不可用时接触。

3 方法
三.1一 destroy,哈哈,又到了笔者最欣赏的损毁地球时间。例:.tabs( ‘destroy’
)
叁.2一 disable,整个选项卡不可用。
三.3一 enable,整个选项卡可用。.tabs( ‘enable’ )
3.四1 option,设置属性。例:.tabs( ‘option’ , optionName , [value] )
三.5一 add,remove,增添、删除选项卡。例:.tabs( ‘add’ , url , label ,
[index] )
,.tabs( ‘remove’ , index )
3.六一 enable,设置有个别选项卡标签可用。例:.tabs( ‘enable’ , index )
三.71 disable,设置有些选项卡标签不可用。例:.tabs( ‘disable’ , index )
三.八一 select,选拔多个挑选卡标签。例:.tabs( ‘select’ , index )
,index从0开首。
3.玖1load,重载三个ajax选项卡的内容,那个一向载入远程内容,即便cache设置为true,第一
个参数是要重载选项卡的索引值。例:.tabs( ‘load’ , index )
三.10一 url,当三个ajax选项卡将要加载时,改变url。.tabs( ‘url’ , index ,
url )
三.111 abort,中止全体运维在tab标签上的ajax请求或动画。.tabs( ‘abort’ )
3.121rotate,自动翻滚选项卡标签。.tabs(‘rotate’,ms,[countinue]),第二个参数是皮秒
,是四个标签自动翻滚所供给的时日,设为0或
null为甘休翻滚。首个参数是设置当用户选
择一个增选卡标签后是还是不是持续滚滚,默感觉:false,不接二连三。
真累,歇歇再说吧。。。
4 技巧
4.1 怎么着采用已入选选项卡标签的索引值?
例:var $tabs = $(‘#example’).tabs();
var selected = $tabs.tabs(‘option’, ‘selected’); // => 0
四.二 怎么着用3个别样成分代替选项卡单击事件来切换选项卡?
例:var $tabs = $(‘#example’).tabs(); // 第二个标签被选中
$(‘#my-text-link’).click(function() { // 绑定单击事件
    $tabs.tabs(‘select’, 贰); // 切换成第二个选项卡标签
    return false;
});
4.三 怎样及时选取刚加多的选项卡标签?
例:var $tabs = $(‘#example’).tabs({
    add: function(event, ui) {
        $tabs.tabs(‘select’, ‘#’ + ui.panel.id);
    }
});
四.四 怎么样在二个新窗口中开荒选项卡标签?
例:$(‘#example’).tabs({
    select: function(event, ui) {
        location.href = $.data(ui.tab, ‘load.tabs’);
        return false;
    }
});

3 方法
叁.1一 destroy,哈哈,又到了自个儿最欢跃的毁灭地球时间。例:.tabs( ‘destroy’
)
三.二一 disable,整个选项卡不可用。
三.31 enable,整个选项卡可用。.tabs( ‘enable’ )
3.四一 option,设置属性。例:.tabs( ‘option’ , optionName , [value] )
三.5一 add,remove,增加、删除选项卡。例:.tabs( ‘add’ , url , label ,
[index] )
,.tabs( ‘remove’ , index )
3.陆1 enable,设置有些选项卡标签可用。例:.tabs( ‘enable’ , index )
三.7一 disable,设置有些选项卡标签不可用。例:.tabs( ‘disable’ , index )
3.捌1 select,选用三个摘取卡标签。例:.tabs( ‘select’ , index )
,index从0发轫。
三.9一load,重载一个ajax选项卡的始末,这几个一贯载入远程内容,纵然cache设置为true,第贰
个参数是要重载选项卡的索引值。例:.tabs( ‘load’ , index )
3.拾一 url,当叁个ajax选项卡将在加载时,改换url。.tabs( ‘url’ , index ,
url )
三.11壹 abort,中止全数运维在tab标签上的ajax请求或动画。.tabs( ‘abort’ )
叁.121rotate,自动翻滚选项卡标签。.tabs(‘rotate’,ms,[countinue]),第三个参数是飞秒
,是两个标签自动翻滚所急需的时刻,设为0或
null为停止翻滚。第伍个参数是设置当用户选
择2个精选卡标签后是否继续滚滚,默感觉:false,不三番五次。
真累,歇歇再说吧。。。
4 技巧
四.1 怎么着吸收已入选选项卡标签的索引值?
例:var $tabs = $(‘#example’).tabs();
var selected = $tabs.tabs(‘option’, ‘selected’); // => 0
4.二 怎样用贰个别样成分取代选项卡单击事件来切换选项卡?
例:var $tabs = $(‘#example’).tabs(); // 第三个标签被选中
$(‘#my-text-link’).click(function() { // 绑定单击事件
    $tabs.tabs(‘select’, 2); // 切换来第4个选项卡标签
    return false;
});
4.3 如何及时选用刚增添的选项卡标签?
例:var $tabs = $(‘#example’).tabs({
    add: function(event, ui) {
        $tabs.tabs(‘select’, ‘#’ + ui.panel.id);
    }
});
四.四 怎样在三个新窗口中开发选项卡标签?
例:$(‘#example’).tabs({
    select: function(event, ui) {
        location.href = $.data(ui.tab, ‘load.tabs’);
        return false;
    }
});

原文:

原文:

UI的tabs举行了越来越的询问,目标是想把迟钝的切换效果变得动感点,不过经过那进一步的摸底,发现它并不体面或都说并不可能…

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有