[英]Jquery ui tabs load iframe only when clicked
Sorry for my English, I use google translator. 对不起,我的英语,我使用谷歌翻译。 I have a code in jQuery UI tabs with iFrame loads contents only when clicked. 我在jQuery UI标签中有一个代码,只有在单击iFrame时,它才会加载内容。 I Use PHP (wordpress) to call the iframe. 我使用PHP(wordpress)来调用iframe。
The problem is it only works with an iframe src putting data in, for example: 问题在于,它仅适用于将数据放入iframe src的情况,例如:
< iframe data-src = " http://powvideo.net/embed-ui0njh4t1cgz-640x360.html " width = "680" height = "380" scrolling = "no" frameborder = "0"> (IF it works) < iframe data-src = “ http://powvideo.net/embed-ui0njh4t1cgz-640x360.html ” width =“ 680” height =“ 380”滚动=“ no” frameborder =“ 0”>(如果有效)
The hosting of the embed video delivered as follows: 托管视频的托管方式如下:
< iframe src = " http://powvideo.net/embed-ui0njh4t1cgz-640x360.html " width = "680" height = "380" scrolling = "no" frameborder = "0"> (NOT working) < iframe src = “ http://powvideo.net/embed-ui0njh4t1cgz-640x360.html ” width =“ 680” height =“ 380”滚动=“ no” frameborder =“ 0”>(无效)
Anyone know if you can modify the script or php to put the correct syntax? 有人知道您是否可以修改脚本或PHP来放置正确的语法吗? Change iframe data-src= by iframe src= 通过iframe src =更改iframe data-src =
Many thanks in advance. 提前谢谢了。
Code jquery ui: 代码jQuery UI:
<script>
$(function() {
$( "#tabs" ).tabs({
beforeActivate: function( event, ui ) {
ui.newPanel.find('iframe').each(function() { if($(this).data('src') && !$(this).attr('src')) $(this).attr('src',$(this).data('src')); });
},
create: function( event, ui ) {
ui.panel.find('iframe').each(function() { if($(this).data('src')) $(this).attr('src',$(this).data('src')); });
}
});
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
</script>
Code Html 代码HTML
<div id="tabs">
<ul>
<li><a href="#tabs-1">Opción 1</a></li>
</ul>
<div id="tabs-1">
<?php $values = get_post_custom_values("reproductor"); echo $values[0]; ?>
</div>
</div>
If I understand you correctly, the problem is that the iframe needs to have a data-src
attribute, not a src
attribute, that contains the url for the iframe. 如果我理解正确,那么问题是iframe需要具有data-src
属性而不是src
属性,其中包含iframe的网址。 This can be accomplished by changing this: 可以通过更改以下内容来实现:
$(this).attr('src',$(this).data('src'));
to this: 对此:
$(this).attr('data-src',$(this).data('src'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.