Jquery UI选项卡有一个add事件,在添加选项卡后立即触发。 在此示例中,单击某个按钮时,将添加一个新选项卡并将其选中。
我使用ajax以下列方式添加动态内容:
var $tabs = $("#tabs").tabs({ tabTemplate: "#{label} ", add: function (event, ui){ var lastIndex = $("#tabs").tabs("length")-1; $("#tabs").tabs("select", lastIndex); } }); function createTab(phpFile){ $tabs.tabs("add", phpFile, "Tab Title"); } $("button").on('click', function (){ var url = "search.php?term=someRandomString"; createPlaySongTab(url); });
我的目标是让新添加的内容像这样淡入面板
add: function (event, ui){ $(ui.panel).hide(); var lastIndex = $("#tabs").tabs("length")-1; $("#tabs").tabs("select", lastIndex); $(ui.panel).fadeIn(1000); }
假设我的.php看起来像这样
在这种情况下,内容根本不会淡入,因为淡入淡出的持续时间为fadeIn(1000)
并且在添加选项卡后立即触发add事件,而不是在.php文件加载完成后。 在内容完全加载后,如何让内容淡入?
尝试加载事件。 一旦加载了远程选项卡的内容,就会触发此事件。
$( ".selector" ).tabs({ load: function(event, ui) { ... } });
它有jquery函数ajaxcomplete(); google it,希望这有助于$(’#element’)。ajaxcomplete(function(){your stuff //});
以上就是jQuery教程分享如何在将ajax内容加载到新添加的jquery ui选项卡后执行回调函数相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/561832.html