Jquery ui选项卡仅在单击时加载iframe

时间:2014-11-01 18:19:57

标签: javascript php jquery-ui iframe

对不起我的英文,我使用谷歌翻译。 我在jQuery UI选项卡中有一个代码,iFrame仅在单击时才加载内容。我使用PHP(wordpress)来调用iframe。

问题是它只适用于将数据放入的iframe src,例如:

< iframe data-src = http://powvideo.net/embed-ui0njh4t1cgz-640x360.html”width =“680”height =“380”scrolling =“no”frameborder =“0”> (如果有效)

主持嵌入视频的方式如下:

< iframe src = http://powvideo.net/embed-ui0njh4t1cgz-640x360.html”width =“680”height =“380”scrolling =“no”frameborder =“0”> (不工作)

任何人都知道你是否可以修改脚本或php来输入正确的语法? 通过iframe src =

更改iframe data-src =

非常感谢提前。

代码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>

代码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>

1 个答案:

答案 0 :(得分:0)

如果我理解正确,问题是iframe需要包含data-src属性,而不是src属性,其中包含iframe的网址。这可以通过改变这个来实现:

$(this).attr('src',$(this).data('src'));

到此:

$(this).attr('data-src',$(this).data('src'));