具有最少 JS 和 CSS 的独立 jQuery Mobile 小部件

【问题标题】：Stand-Alone jQuery Mobile Widgets with Minimal JS and CSS具有最少 JS 和 CSS 的独立 jQuery Mobile 小部件
【发布时间】：2016-09-16 07:44:46
【问题描述】：

我想在我的非 JQM 响应式网站中使用 JQM 的一些组件，而不破坏任何现有样式，并且只下载我需要的最少 JS/CSS。

我读过Any way to use jQuery mobile widgets independently? 和Where can i get the standalone parts of jQuery Mobile?。我见过很多 Fiddles，但它们都包含完整的 jquery mobile js 和 css。（我不想要整个 CSS，因为它破坏了我现有的网站 CSS，而且我更喜欢下载最少的 JavaScript 以提高性能 - 在移动设备上很重要）。

使用http://jquerymobile.com/download-builder/ 并获得我的下载后，不清楚如何调用JQM，或者需要放置什么命令脚本才能使小部件工作。我需要将它与常规 jQuery 结合使用吗？

有没有人有任何说明如何让一个小部件在没有整个框架的情况下工作？

【问题讨论】：

标签： jquery html css jquery-mobile mobile

【解决方案1】：

我找到了https://stackoverflow.com/a/31844001/1620112，由（大师级的）Omar 回答，但这个问题似乎不太受欢迎——可能是因为它太具体了——所以我将自己概括并回答。

是的。你需要 jQuery。先加载那个。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

接下来，加载您从下载生成器下载的 1 个 JS 和 2 个 CSS 文件。

<script src="jquery.mobile.custom.js"></script>
<link rel="stylesheet" href="jquery.mobile.custom.structure.css" />
<link rel="stylesheet" href="jquery.mobile.custom.theme.css" />

最后，按照 Omar 的建议调用小部件 https://stackoverflow.com/a/31844001/1620112

<script type="text/javascript">
$(function() {
  $(".ui-collapsible-set").collapsibleset();
});
</script>

在 jquery.mobile.custom.theme.css 中自定义您的外观。你有小部件！

【讨论】：