简介
jquery.dirtyforms.dialogs.bootstrap 是一个基于 jQuery 和 Bootstrap 的 npm 包,用于创建对话框来提示用户在离开当前页面之前保存未提交的表单数据。该包是 jquery.dirtyforms 的一个插件,旨在为 Web 应用程序提供更好的用户体验。
安装
可以使用 npm 安装 jquery.dirtyforms.dialogs.bootstrap:
--- ------- -----------------------------------
此外,您还需要在项目中引入以下文件:
---- ------ --- ------- ----------------------------------------------------------- ---- --------- --- ----- ---------------- ------------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------------------- ---- ----------------- --- ----- ---------------- ------------------------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------------------------- ---- ----------------------------------- --- ------- ----------------------------------------------------------------------------------------------------------------
使用
基本用法
使用 jquery.dirtyforms.dialogs.bootstrap 最简单的方法是将其作为 jquery.dirtyforms 的插件进行初始化。例如:
---------------------- ------- - ------------ ------ ------ -------- - - ----- ------- ------ ------------- -- - ----- ---------- ------ --------------- - - - ---
以上代码会将所有的表单元素绑定上 jquery.dirtyforms 和 jquery.dirtyforms.dialogs.bootstrap,并在用户离开页面之前显示一个基于 Bootstrap 模态框的对话框提示用户保存或放弃未提交的数据。
高级用法
如果您需要更多的控制权和自定义性,可以使用下面的选项:
dialogClass
设置对话框的 CSS 类。默认值为 "modal fade"。
------------ ---------------------
title
设置对话框的标题。默认值为 "Are you sure?"。
------ --------------
message
设置对话框的消息文本。默认值为 "You have unsaved changes on this page. If you leave this page, you will lose your unsaved changes."。
-------- --------------------
focusButton
设置对话框中默认聚焦的按钮。默认值为 0(第一个按钮)。
------------ -
buttons
设置对话框中的按钮。默认值为 [ { text: 'Stay', class: 'btn-primary' }, { text: 'Leave', class: 'btn-secondary' } ]。
-------- - - ----- -------- ------ ------------- -- - ----- ----------- ------ ------------ -- - ----- ------- ------ --------------- - -
dirtyFormsOptions
设置 jquery.dirtyforms 的选项。默认值为 {}(空对象)。
------------------ - --------------- ------------ -
示例代码
下面是一个完整的示例,演示了如何使用 jquery.dirtyforms.dialogs.bootstrap 提示用户保存未提交的表单数据:
--------- ----- ----- ---------- ------ ----- ---------------- ------------------------------------------ ---------- ---- ------ --- ------- ----------------------------------------------------------- ---- --------- --- ----- ---------------- ------------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------------------- ---- ------------ ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------