JQuery 手机破坏了我的布局：如何禁用自动样式？

Question

我正在开发一个网站，我根据 bootstrap 进行了所有设计和样式设置，并且运行良好。然后我想为移动菜单添加一个面板。

面板是这个例子右边的：jQuery Mobile panels, click on the plus sign

我点击了加号后出现的面板，然后努力将其添加到我的网站（使用我的菜单而不是面板内的表单）。它工作正常，但是添加 jQuery Mobile JS 完全破坏了我的布局，在我的代码和附加的样式周围添加了很多 ui-* 类。

我试过那些东西：

禁用整个 css（但面板不再工作）
有选择地仅重命名类会造成更多混乱，但确实如此太多的工作，只是为了修复一个复选框，我不得不重命名几个 ui 类.
摆弄 js（面板停止工作）

我只需要面板。我不需要表格上所有令人毛骨悚然的样式或其他不需要的东西。

现在我不知道该怎么办了。还有另一种方法可以让这个面板与我们所有的混乱一起工作吗？为什么他们做这个 js 如此具有侵入性？

Answer 1

您可以使用：

data-role="none"

如果您还想在 mobileinit 活动中禁用移动设备：

$.mobile.autoInitializePage = false;

如果您有多个元素，请在开始加载页面上使用一个函数：

$(document).on('pagebeforecreate', function( event ) {
      // add the data-role="none" to desired elements...
      $( "input, select", event.target ).attr( "data-role", "none" );
});

JQuery 手机破坏了我的布局：如何禁用自动样式？

JQuery Mobile destroyed my layout: how to disable autostyling?

javascript

css

jquery-mobile