在前端开发中，我们经常需要使用跨浏览器（cross-browser）的 JavaScript GUI 库，以确保 Web 应用程序在不同浏览器中的兼容性。本文将介绍一些常见的跨浏览器 JavaScript GUI 库，包括 jQuery UI、Bootstrap 和 Material Design Lite，并提供相应的示例代码。
jQuery UI
jQuery UI 是 jQuery 的一个插件集合，提供了很多常见的界面组件，如按钮、对话框、菜单等。它的主要优点是易于学习和使用，并且有大量的文档和社区支持。
下面是一个简单的 jQuery UI 对话框示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -- ------ ---------------
----- ---------------- -------------------------------------------------------------------
------- -----------------------------------------------------
------- ------------------------------------------------------------
-------
------
------- ---------------- ---------------
---- ----------- ------------- -------
------- -- - -----------
------
--------
-- --------- ----------
--------- -----
---
-- --------- ----- -------- ---------- -
-- --------- --------- ------ --
---
---------
-------
-------上面的代码中，我们引入了 jQuery 和 jQuery UI 的库文件，并创建了一个按钮和一个对话框。通过 $( "#dialog" ).dialog() 函数可以将元素转换为对话框，autoOpen 参数设置为 false 表示一开始不显示对话框。点击按钮后，调用 $( "#dialog" ).dialog( "open" ) 方法打开对话框。
Bootstrap
Bootstrap 是 Twitter 推出的一个基于 HTML、CSS、JavaScript 的前端框架，其中包含了很多常用的组件和样式，如排版、表单、按钮等。Bootstrap 的主要优点是易于使用和定制，并且有大量的社区支持和文档。
下面是一个简单的 Bootstrap 模态框示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----- ---------------
----- ---------------- -----------------------------------------------------------------------
------- -----------------------------------------------------
------- -----------------------------------------------------------------------------
-------
------
------- ------------- ---------- ------------ ------------------- --------------------------- --------------
---- ------------ ------------ ----- --------------
---- ---------------------
---- ----------------------
---- ---------------------
------- ------------- ------------- -------------------------------------
--- ------------------------- ----------
------
---- -------------------
------- -- - ----------
------
---- ---------------------
------- ------------- ---------- ------------ -----------------------------------
------
------
------
------
-------
-------上面的代码中，我们引入了 jQuery 和 Bootstrap 的库文件，并创建了一个按钮和一个模态框。通过 data-toggle 和 data-target 属性可以将按钮与模态框关联，点击按钮后会弹出模态框。
Material Design Lite
Material Design Lite 是 Google 推出的一个基于 Material Design 的前端框架，其中包含了很多常用的组件和样式，如排版、表单、卡片等。Material Design
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24449