小编Ben*_*son的帖子

我试图(最终)在几个Bootstrap 3.x选项卡上分割一个表单,但我遇到上一个和下一个按钮的问题.当手动单击选项卡或使用按钮时,只有第一个下一个按钮起作用,有时选项卡内容在选项卡之间根本不会更改.

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary" id="btnNext">Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnNext">Next</a>
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
</div>
<script>
  $('#btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('#btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>

我需要能够在打开Twitter Bootstrap模式时自动播放YouTube视频,然后在关闭时停止该视频.

我知道之前已经问过这个问题,但我能找到的答案会导致很多包含许多视频的页面的javascript代码,我正在努力减少膨胀.到目前为止,我有以下工作用于个别视频,但问题是每个模态和每个视频必须使用适当的变量重复此javascript代码.

$('#vidThumbnail-1').click(function () {
        var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&autoplay=1';
        $('#vid1').modal('show');
        $('#vid1 iframe').attr('src', src);

      //Fit Vids Implamented Below for Mobile Compatibility
        $("#vid1Thumbnail-1 iframe").wrap("<div class='flex-video'/>");
        $(".flex-video").fitVids();
    });
$('#vid1 button').click(function () {
        $('#vid1 iframe').removeAttr('src');
    });

HTML:

<div id="vidThumbnail-1"><img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg" /></div>

<div id="vid1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <iframe src="http://www.youtube.com/embed/8bKmrhI-YT8" width="640" height="360" frameborder="0" allowfullscreen></iframe>   
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
  </div>

当你有20个视频和20个模态时,这会变得臃肿!有没有办法利用数据属性方法启动模态内置引导程序而不是单独调用它,同时仍然只在目标模态中修改iframe src？打开模态的链接将是:

<a href="#vid1" role="button" data-toggle="modal">
<img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg"></a>

然后:

1. 读取目标模态中iframe的现有src属性(将其设置为变量？)
2. 使用"&autoplay = 1"附加现有src属性以启动视频.
3. 在关闭模态时将src属性替换为原始属性(通过按钮特别喜欢它在上面就好了).

这样我就不需要为每个单独的模态编写脚本,节省了大量的时间和臃肿的JS.但是,我不知道从哪里开始修改bootstrap.js来实现这一目标,而且我没有经验JS(或任何)编程.感谢你给与我的帮助!

我正在为LibreOffice的非营利性慈善机构组建一个会员数据库,但是没有mysql查询的经验,所以我很感激帮助.

我试图创建一个显示所有记录的会员加入日期字段(查询PAYMENTDATE)是超过1年的当前日期和其他领域(一个布尔值AwaitingRenewal)是NO.日期是05/03/85格式.感谢你给与我的帮助!

我正在尝试将Foundation 3幻灯片Orbit实现到我的Foundation移动响应式设计中.当我尝试在幻灯片上放置标题时,没有显示标题栏.这是基于包含的主页模板,因此滑块组件的CSS没有从提供的内容中更改,但包含了覆盖CSS文件,但不应影响任何内容.(style.css)我试过两种方法,都不行.你可以在这里看到问题.感谢您给我的任何帮助,我是响应式设计的新手.

      <div id="slider">

<img data-caption="#slide1" src="http://placehold.it/1000x400&text=[img 1]" />
<img data-caption="#slide2" src="http://placehold.it/1000x400&text=[img 2]" />
<img data-caption="#slide3" src="http://placehold.it/1000x400&text=[img 3]" />

      </div>

<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>

    </div>

我也尝试过:

      <div id="slider">

<div data-caption="#slide1"> <img src="http://placehold.it/1000x400&text=[img 1]" /></div>
<div data-caption="#slide2"><img src="http://placehold.it/1000x400&text=[img 2]" /></div>
<div data-caption="#slide3"><img src="http://placehold.it/1000x400&text=[img 3]" /></div>

      </div>

<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption …

我已经看了使用javascript插入HTML的多种方法,使用jQuery .prepend和.innerHTML,无论我做什么,我都会得到相同的输出:

'); }

我试图插入HTML如果屏幕分辨率,如果有一定的宽度.这些是我尝试过的两个脚本:

<script type="text/javascript" charset="utf-8" >

if (screen.width >= 500)
{
$('#stemanimation_hype_container').prepend('<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608></script>');

}
</script>

<div id="stemanimation_hype_container" style="position:relative;overflow:hidden;width:900px;height:300px;">
</div>

另一个:

<script type="text/javascript" charset="utf-8" >

if (screen.width >= 500)
{
document.getElementById("stemanimation_hype_container").innerHTML='<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608'></script>";

}

</script>
<div id="stemanimation_hype_container" style="position:relative;overflow:hidden;width:900px;height:300px;">
</div>

知道可能会发生什么吗？我在一个只有jquery的页面上测试它,没有其他脚本来确保没有冲突.谢谢你能给我的任何帮助!