无法使用Rails中的数据关闭按钮关闭Twitter Bootstrap Alert

时间:2013-05-06 09:44:17

标签: ruby-on-rails ruby-on-rails-3

我在devise中有以下div =>会话

<div class="widgettitle">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <%= "<div class=\"flash_error\">#{h alert}</div>".html_safe unless alert.blank? %>
    <%= "<div class=\"flash_notice\">#{h notice}</div>".html_safe unless notice.blank? %>
  </div>

但关闭按钮不起作用..任何人都可以请帮助......?

1 个答案:

答案 0 :(得分:2)

嗨,你有合适的js吗?

假设您正在尝试使用twitter bootstrap的警报功能?

!function ($) {

  "use strict"; // jshint ;_;


 /* ALERT CLASS DEFINITION
  * ====================== */

  var dismiss = '[data-dismiss="alert"]'
    , Alert = function (el) {
        $(el).on('click', dismiss, this.close)
      }

  Alert.prototype.close = function (e) {
    var $this = $(this)
      , selector = $this.attr('data-target')
      , $parent

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

    $parent = $(selector)

    e && e.preventDefault()

    $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())

    $parent.trigger(e = $.Event('close'))

    if (e.isDefaultPrevented()) return

    $parent.removeClass('in')

    function removeElement() {
      $parent
        .trigger('closed')
        .remove()
    }

    $.support.transition && $parent.hasClass('fade') ?
      $parent.on($.support.transition.end, removeElement) :
      removeElement()
  }


 /* ALERT PLUGIN DEFINITION
  * ======================= */

  var old = $.fn.alert

  $.fn.alert = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('alert')
      if (!data) $this.data('alert', (data = new Alert(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  $.fn.alert.Constructor = Alert


 /* ALERT NO CONFLICT
  * ================= */

  $.fn.alert.noConflict = function () {
    $.fn.alert = old
    return this
  }


 /* ALERT DATA-API
  * ============== */

  $(document).on('click.alert.data-api', dismiss, Alert.prototype.close)

}(window.jQuery);

你是如何在你的应用程序中使用twitter bootstrap的?

您是否已将//= require bootstrap包含在application.js文件中?我需要使用gem bootstrap-sass(依赖于gem sass-rails)