javascript - Bootstrap Alert 的干净示例

Question

我有这样的警报 div:

<div class ="alert-container">
    <div class="alert alert-failure alert-fixed" id="failure-alert">
    <strong><span id="failure-message"></span></strong>
    </div>
    <div class="alert alert-success alert-fixed" id="success-alert">
        <strong><span id="success-message"></span></strong>
    </div>
</div>

我是这样称呼他们的

 <div id="lightsButtons" class="btn-group btn-toggle" data-toggle="buttons-radio">
      <button type="button" class="btn btn-lg btn-default lights-button" id=lights_on value="ON">ON
      </button>
      <button type="button" class="btn btn-lg btn-default lights-button" id=lights_off value="OFF">OFF
      </button>
 </div>

JQuery:

$("#lights_on").click(function () {
    $.getJSON("/lights_on", function (data) {
        if (data.success == true) {
            $("#lightsState").text(data.lights_state);
            $("#success-alert").show();
            $("#lghts_on").addClass('active');
            $("#lights_off").removeClass('active');
            $("#success-message").text(data.success + data.state)
            $("#success-alert").fadeTo(2000, 500).slideUp(1000, function () {
                $("#success-alert").slideUp(1000);
            });
       } else {
            $("#failure-alert").show();
            $("#failure-message").text(data.success + data.state)
            $("#failure-alert").fadeTo(2000, 500).slideUp(1000, function () {
                $("#failure-alert").slideUp(1000);
            });
        }
    });
});

但所有这一切只是 google 代码的蹩脚大杂烩，我真的只是想看到一种干净的方法来执行以下操作:

我想要 2 个按钮。当按下其中一个按钮时，它会执行 .getJSON(/example) 并获得结果。

例如，让我们使用一个 bool 值和一个字符串。对于这种情况，结果并不重要。如果为 True，它会生成一个已在 html 文件中定义但没有任何内容的警报。

警报将包含结果和以下行为:

• 水平居中
• 略微偏离页面顶部 (20px)
• float 在内容上方并在页面滚动时跟随页面
• 淡入，并在短时间后淡出。
• 有一个不能被多次触发的关闭按钮等待结果

Answer 1

我做了一个快速的代码笔:https://codepen.io/MarkRabey/pen/KqKpWx

我没有严格遵循你的风格建议，但它可能会给你一个想法。我只是使用一个随机数来伪造 ajax 调用，并获得成功或错误以显示不同的警报。

注意 这不会使用任何 Bootstraps 内置功能来发出警报。我根本没看那些。

JS:

// When called sets the buttons disabled depending if the lights are on or off
const toggleButtonState = function() {
    onButton.attr('disabled', lightsOn);
    offButton.attr('disabled', !lightsOn);
}

// show the alert by passing in type (success || error) and  message
const showAlert = function (type, msg) {
  alert.hide();
  alert.removeClass('alert--error alert--success');
  alert.addClass(`alert--${ type }`);
  alert.text(msg);
  alert.fadeIn(300, function() {
    $(this).delay(1200).fadeOut(300);
  });
}

// call ajax, toggle lightsOn on success
const toggleLights = function() {
  let toggleSuccess = false;

  // dummy for 'success'
  const random = Math.floor(Math.random() * 6) + 1;
  if (random % 2) { // success
    lightsOn = !lightsOn;
    toggleSuccess = true;
    showAlert('success', `The lights are ${ lightsOn ? 'on' : 'off'}`);
  }

  toggleButtonState();
  showAlert(toggleSuccess ? 'success' : 'error', `The lights are ${ lightsOn ? 'on' : 'off' }`);
}

const alert = $('#alert');
const onButton = $("#lights_on");
const offButton = $("#lights_off");
let lightsOn = false;
toggleButtonState();

alert.hide();
onButton.click(toggleLights);
offButton.click(toggleLights);