bootstrap 小tip

bootstrap使用主意事项：
一、$ is not defined 问题
   1、首先按照https://github.com/seyhunak/twitter-bootstrap-rails步骤将bootstrap集成到自己的rails项目中，然后跑起本地程序，发现页面已经好看了许多，所以就按照bootstrap官方教程http://twitter.github.com/bootstrap/一步一步实践，这时候一个偶然的事件引起了我的注意：以前习惯将跟某个特定页面相关的js代码放到对应的html中，所以我这次也一样将$(document).ready(.....)写到了某个特定的页面，然后刷新页面，但是js效果没有显示，查看，发现js报错：$ is not defined 是说找不到$这个的定义，难道是jquery没有加载进来么？仔细查看源代码发现一切正常，到底是哪里出的错误呢，仔细对比了下在用生成器生成application.html.erb前后，该文件的 差异，发现在bootstrap在生成的application.html.erb的时候将

<%= javascript_include_tag 'application'%>

放到了页面的结尾处:

<!-- Javascripts ========================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <%= javascript_include_tag "application" %>
  </body>

    原因就在这里了，这里将jquery以及所有的js文件的加载都放到了文件的最后去加载，所以，html文件中写的那些$(document).ready(.....)会优先于jquery加载，而导致js解析器不识别这些变量符号，所以会报$ is not defined的错误，解决办法只有将以前在html中写的代码统统放到js文件中，然后再把这些js文件在jquery之后加载才能解决问题，具体可以看下这篇文章http://selfcontroller.iteye.com/admin/blogs/1786610
    或者可以这样：
1、在application_helper.rb 中

  def stylesheet(*args)
    content_for(:head) { stylesheet_link_tag(*args) }
  end 

  def javascript(*args)
    content_for(:head) { javascript_include_tag(*args) }
  end

2、在application.html.erb中调用这个方法（<% yield :head %>要放在application 之后加载）：

    <%= javascript_include_tag "application" %>
    <%= yield :head %>

3、然后在具体的某个页面，如果你想调用特殊的js文件的话，你可以这样：

<% javascript "backbone_bundle", "highcharts", "custom_highchart" %>

通过以上方法可以实现在特定的页面动态的引入不同的js文件，这样就能避免不必要的冲突

二、在javascript组件中有个button组件，其中有个例子：

<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>

但是我在本地怎么试都不可以，很无奈，于是，我在想是不是这个是必须介乎js的，结果我在我在官方网站的application.js中发现了问题：

    $('#fat-btn')
      .click(function () {
        var btn = $(this)
        btn.button('loading')
        setTimeout(function () {
          btn.button('reset')//将按钮状态初始化到最初
        }, 3000)
      })

或者你也可以这样：

  $('.btn').on('click', function () {
    $(this).button('loading')
  })  	

果然，这个效果是要结合bootstrap-botton.js来实现的，这里有几个注意点：
    1、btn.button('loading')，这个字符串loading是固定的，你不能自定义其他字符串，这是默认的情况下，当点击了该button后，按钮处于disabled状态，并显示loading...这样的字符串
    2、如果你想在该button处于disabled状态的时候，显示你自定义的字样的话，那么你要在html代码中添加一个特殊的属性：data-loading-text,如下：

<button type="button" class="btn btn-primary" data-loading-text="正在提交...">Loading state</button>

关于$('.btn').button('toggle')
这个是通过javascript实现的来标识该button处于激活状态：

  $('.btn').on('click', function () {
    $(this).button('toggle')
  })  	

或者可以使用最简单的方式：

<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>

关于$('.btn').button('complete'),与loading类似：
属性data-complete-text用来自定义字符串

  <button type="button" class="btn" data-complete-text="finished!" >...</button>

以下代码中complete也不能是其他字符，如果在上面的html中没有定义data-complete-text，将不会有任何效果

  $('.btn').on('click', function () {
    $(this).button('complete')
  })  	

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换，或是相关内容的页面导航：

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>
 
<script>
  $(function () {
    $('#myTab a:last').tab('show');//初始化显示哪个tab

    $('#myTab a').click(function (e) {
      e.preventDefault();//阻止a链接的跳转行为
      $(this).tab('show');//显示当前选中的链接及关联的content
    })
  })
</script>

此外，你还可以有更多灵活的方式来激活某个特定的tab：

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

以上代码需要注意的一点是，每个li中的a标签都要有个href=#id,这个id指向的正是该链接对应的content的id，如果使用javascript实现这种导航内容的切换，a标签中无须再添加data-toggle='tab'，当然，如果每个a链接都使用了此属性，那完全没有必要在用js来实现了：

<ul id="myTab" class="nav nav-tabs">
  <li class=""><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
  <li class="dropdown active">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Dropdown 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li class="">
        <a href="#dropdown1" data-toggle="tab">@fat</a>
      </li>
      <li class="active">
        <a href="#dropdown2" data-toggle="tab">@mdo</a>
      </li>
    </ul>
  </li>
</ul>

<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade" id="home">
    <p>.....content_1</p>
  </div>
  <div class="tab-pane fade" id="profile">
    <p>.....content_2</p>
  </div>
  <div class="tab-pane fade" id="dropdown1">
    <p>.....content_3</p>
  </div>
  <div class="tab-pane fade active in" id="dropdown2">
    <p>.....content_4</p>
  </div>
</div>

$().tab()还有两个事件：
    show：该事件在标签开始展示时（尚未渲染完之前）触发。 event.target 指向要激活的标签， event.relatedTarget 指向之前已激活的标签（如果有的话）。
    shown:该事件在标签已经呈现后（已渲染完成）触发。 event.target 指向要激活的标签， event.relatedTarget 指向之前已激活的标签（如果有的话）。


关于bootstrap-collapse.js
如果你的页面想实现手风琴的折叠效果的话，利用bootstrap-collapse.js是一个不错的选择：

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle">
        国土问题
      </a>
    </div>
    <div id="collapse0" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">
        前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle">
        门票问题
      </a>
    </div>
    <div id="collapse1" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">
        目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle">
        超生罚款
      </a>
    </div>
    <div id="collapse2" class="accordion-body in" style="height: auto;">
      <div class="accordion-inner">
        学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。
      </div>
    </div>
  </div>
</div>

通过以下js代码来控制：

$(function () {
  $.each($('.accordion a.accordion-toggle'), function(i, link){
    $('#collapse' + i).collapse({
      toggle : true,
      parent : '#accordion2'
    });
    
    $(link).on('click', function(){
        $('#collapse' + i).collapse('toggle');
      }
    );
  }); 

})

或者你也可以使用更简单的方式（只要在元素上添加 data-toggle="collapse" 和 data-target 就能自动变成可折叠的。 data-target 属性接受一个css选择器，以选取元素添加折叠。 一定要在折叠元素上添加 .collapse 。如果要默认某折叠元素是打开的，只要添加 .in ）这样就不需要javascript即可实现一样的效果：

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        国土问题
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">
        前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        门票问题
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">
        目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
        超生罚款
      </a>
    </div>
    <div id="collapseThree" class="accordion-body in" style="height: auto;">
      <div class="accordion-inner">
        学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。
      </div>
    </div>
  </div>
</div>

关于通知（alert）

<div class="alert alert-block alert-error fade in">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="alert-heading">微博控们注意了！</h4>
  <p>
    出游微博晒幸福时，最好不要泄露出游时间、人数，别泄露住址，谨慎晒出游照片，以免让贼判断出你家是否有人。因为小偷说不定会盯上你的微博，“随着微博的发展，贼也很时尚啊！”
  </p>
  <p>
    <a class="btn btn-danger" href="#">接受建议</a>
    <a class="btn" href="#">不当回事</a>
  </p>
</div>

如果想实现一个简单的提示框的话（灵活的控制这个提示框的隐藏还是显示），这个例子是不适用的，因为属性：data-dismiss="alert"，所以在点击这个关闭按钮的时候，实际上市将整个.alert的div从dom中给去除了，所以如果这个时候你再想让它显示的话是做不到的，实际上为了实现上述效果你完全可以通过js来实现：

<!--默认为隐藏状态-->
<div class="alert alert-block alert-error fade in" style="display:none;">
  <a class="close"  href="#">×</a>
  <h4 class="alert-heading">微博控们注意了！</h4>
  <p>
    出游微博晒幸福时，最好不要泄露出游时间、人数，别泄露住址，谨慎晒出游照片，以免让贼判断出你家是否有人。因为小偷说不定会盯上你的微博，“随着微博的发展，贼也很时尚啊！”
  </p>
  <p>
    <a class="btn btn-danger" href="#">接受建议</a>
    <a class="btn" href="#">不当回事</a>
  </p>
</div>

然后通过事件来实现该div是现实还是隐藏：

$(function(){
  $("#post_title").blur(function(){
    $(".alert").show();
  })

  $(".close").click(function(){
    $(this).parent().hide();
  })

})

以上代码，实际上是避免了该提示的div从dom中被删除，而是通过js代码将该div隐藏了而已，这样的话，你就可以灵活的实现是现实还是隐藏了。

关于对话框(modal)
有两种方式实现，第一种，使用html以及相关属性(data-toggle="modal",data-target="#myModal"或者是href="#myModal")实现：

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">
  Launch demo modal
</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display:none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
      ×
    </button>
  </div>
  <div class="modal-body">
    <h4>Text in a modal</h4>
    <p>Duis mollis, est non commodo lacinia odio sem.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

或者，您还可以使用javascript实现：

$(function () {
  $('.btn').click(function(){
    $('#myModal').modal({
        keyboard: false,//true：按esc键，弹出框消失。false：esc键不起作用
        backdrop: false,//true:会有个背景颜色，点击背景颜色，弹出框消逝。false:没有背景颜色，点击弹出框以外区域，弹出框不消失
        show:     true,//true：点击激活按钮后显示弹出框。false：点击激活按钮后，该弹出框不显示
        remote:   '/posts'//通过jquery的load函数加载另外一个url的页面
    });
  })
})

通过以上js代码结合下面的html代码即可实现：

<a  class="btn btn-primary btn-large">
  Launch demo modal
</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display:none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
      ×
    </button>
  </div>
  <div class="modal-body">
    <h4>Text in a modal</h4>
    <p>Duis mollis, est non commodo lacinia odio sem.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

关于tooltip（鼠标经过下面链接时显示工具提示：）

<div class="tooltip-demo well">
  <p class="muted" style="margin-bottom: 0;">
    “这是我的第一次英文访问,很抱歉它不够严谨,但是我不得不这么做,不只因为采访时间限制，更因为我面对的是卡梅隆，这个人喜爱挑战、从无畏惧，他也希望别人如此，他可以原谅不完美，但他无法接受一个人不去努力接近自己的极限。”
    ——
    <a href="#" rel="tooltip" data-original-title="柴静始终站在离新闻最近的地方，她以她的犀利和敏锐、坚定与坚持，最终历练成为一名优秀的新闻工作者。 ">
      柴静
    </a>《看见》专访
    <a href="#" rel="tooltip" data-original-title="1954年8月16日生于加拿大的著名电影导演，擅长拍摄动作片以及科幻电影。">
      卡梅隆
    </a>
  </p>
</div>

通过以上html代码配合以下javascript来实现：

$(function () {
  $('.tooltip-demo.well').tooltip({
    selector: "a[rel=tooltip]"
  })
})

此外，tooltip还有很多其他参数：

$(function () {
  $('.tooltip-demo.well').tooltip({
    selector: "a[rel=tooltip]",//选择器，指定哪些元素有提示功能
    animation: true,//是否有过度效果
    placement: 'top',//提示工具出现的位置，可选值（top | bottom | left | right）
    title: 'test tooltip',//如果html代码中没有提示的内容，那么将使用此内容
    trigger: 'hover' //触发提示工具的事件(默认为hover)
    delay: { show: 500, hide: 100 }//效果的过度时间
  })
})

在上述js代码中，trigger默认的事件是hover，这里您可以制定其他事件，比如说click，但是在给一个a标签添加click事件的时候，让这个a在被点击显示提示的时候不进行跳转（a的默认行为），这个时候我们可以这样用：

$(function () {
  $('.tooltip-demo.well').tooltip({
    selector: "a[rel=tooltip]",//选择器，指定哪些元素有提示功能
    animation: true,//是否有过度效果
    placement: 'top',//提示工具出现的位置，可选值（top | bottom | left | right）
    title: 'test tooltip',//如果html代码中没有提示的内容，那么将使用此内容
    //trigger: 'hover' 这里去掉了trigger（此时默认是hover）
    delay: { show: 500, hide: 100 }//效果的过度时间
  }).click(function(e){//这里使用了chain的方式调用click函数来达到连用的效果
    e.preventDefault()//阻止默认行为的发生
  })
})

弹出提示（popover）

<div class="well">
  <a href="#" class="btn btn-danger" rel="popover" data-content="他来自山东，是一名残疾人，因思想独立、指谪政弊而被政府pohai。地方政府和当权政要派专人看管他，调拨专款作为对他的看管费用，他每天都活在别人的监视和囚禁中，其遭遇只能用令人发指来形容。历尽万难，他终于成功逃离了当地，在外国使节的帮助和护送下去到了国外。他，就是孙膑。" data-original-title="他是谁">
    鼠标经过弹出提示
  </a>
</div>

以上代码配合一下js代码实现鼠标经过时显示提示内容：

$(function () {
  $('.well').popover({
    selector:"a[rel=popover]",//表示.class内的所有rel=popover的元素均有该效果
    trigger:'hover',//效果生效的触发时间，默认是click
    animation： true,//为弹出框添加一个淡入淡出效果，默认为true
    placement：'right',//弹出框出现的位置，默认为right，其他值（top | bottom | left | right）
    title: '',//如果元素没有指定'title'属性，就使用该值做为默认的标题
    content:'',//如果元素没有指定'data-content'属性，就使用该值做为默认的内容
    delay:0  //默认值是0，如果是这个格式delay: { show: 500, hide: 100 }也可以
  })
})

评论

1 楼 houxm 2013-08-07  

你也可以使用更简单的方式（只要在元素上添加 data-toggle="collapse" 和 data-target 就能自动变成可折叠的。 data-target 属性接受一个css选择器，以选取元素添加折叠。 一定要在折叠元素上添加 .collapse 。如果要默认某折叠元素是打开的，只要添加 .in ）这样就不需要javascript即可实现一样的效果
这块该怎么实现啊，我在页面中引用了bootstrap.min.css、jquery.js、bootstrap.min.js三个文件，然后又加上了上边那句话下边的html代码，但是怎么没有效果？求指点