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

Question

我想在我的非 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 结合使用吗？

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

Answer 1

我找到了 https://stackoverflow.com/a/31844001/1620112 ，由(高超的)奥马尔回答，但这个问题似乎不太受欢迎——也许是因为它太具体了——所以我要概括一下并自己回答。

是的。你需要 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 中自定义您的外观。你有小部件!