Twitter BootStrap 3 中的数据消除和隐藏 (API) 有什么区别?



Twitter BootStrap 3 中的数据消除和隐藏 (API( 有什么区别吗?

我们使用data-dismiss="modal"来关闭模态。

我们还调用 API$("#modalId").modal("hide")来关闭模态。

它们都可以触发hide.bs.modal事件。但是有什么区别呢?

从功能上讲,它们都将达到相同的结果:关闭对话框。

使用data-dismiss属性的优点是,您不需要任何JavaScript 代码来让用户关闭对话框;您可以在标记中执行所有操作。 如果您的页面上没有运行任何其他JS代码,那么无需添加JS依赖项即可进行交互的能力非常棒。

直接调用 API 的优点是它为您提供了更大的灵活性:您可以(如 @amyogiji 所述(在完成其他操作(如 AJAX 调用(后调用它;您可以根据某些验证规则阻止用户关闭对话框;您可以使与对话框无关的内容关闭对话框,而无需用户交互。

与软件中的大多数决策一样,两者都有用例! 通常,我建议使用最简单的解决方案(即data-dismiss(,直到您需要额外的灵活性。

因此有两种方法可以消除或隐藏模态。

案例 1data-dismiss="modal"

如果我们想在不做任何活动的情况下关闭模态,或者它是文本模态,我们使用data-dismiss="modal",用户已经阅读了它,现在他想关闭它。

案例2$(#"modalId").modal("hide")

我们使用 JavaScript 调用 $(#"modalId"(.modal("hide"( 这可能是模态要求用户输入某种数据并且数据是否成功模态应该关闭的情况。 例如,对于 ajax 调用

$.ajax({
type: "POST",
url: "posturl",
data: data,
success: function()
{
$(#"modalId").modal("hide")
}

在上面的例子中,假设你有一个 mod with form 调用 ajax 调用。 然后在成功时,您希望关闭该表单。

这就是我迄今为止的使用方式。

当在一个页面上使用多个模型时,同时打开彼此顶部,使用 data-dismiss="modal" 关闭最上面的模型将隐藏所有活动模型。您可以纯粹通过标记 API 使用所有 Bootstrap 插件,而无需编写任何 JavaScript 行。这是 Bootstrap 的第一类 API,应该是您在使用插件时的首要考虑因素。

最新更新