改变我的jquery移动主题改变我的CSS样式 [英] changing my jquery mobile theme changes my css styling
问题描述
我有一个折叠集，我在我的网站上创建，看起来类似于：
I have a collapsible set that I create on my website which looks similar to this:
<div data-role="collapsible-set" id="result" style="margin: auto; padding-top: 50px; padding-bottom: 20px;">
<div>
<h2>
<span style="font-size: 16px; font-weight: bold; white-space: pre-wrap;" id="title' + num + '">abc</span><br>
<span style="font-size: 14px; font-weight: normal;" id="author' + num + '"></span>
<div style="font-weight: normal;">
<span style="font-style:italic; font-size: 13px;" id="journal' + num + '"></span>
</div>
</h2>
<div style="font-size: 14px;">
more info
</div>
</div>
</div>
但是，在我为添加到可折叠集合的每个元素应用主题后，我的样式被更改我不知道为什么。在我在可折叠集合中添加div之前，我添加了以下属性：
However, after I apply a theme to each element I add to the collapsible set, my styling is changed and I can't figure out why. Before I append a div inside my collapsible set I'm adding the following attribute:
div.setAttribute("data-theme", "c");
这是我的列表项在样式之前的样子：
This is what my list item looks like before styling:
这是我添加主题后的样子：
And here is what it looks like after I add a theme:
，你可以看到，每行之间的间距现在相当大。我试图改变CSS使用填充，但没有改变任何东西。
as you can see, the spacing between each line is now pretty large. I've tried to change the css using padding but that didn't change anything. Could anyone point me in the right direction?
这是一个之前和之后的小提琴：
Here is a before and after fiddle:
推荐答案
您需要使用 jQuery Mobile ThemeRoller 升级 theme-classic.css 。
- 前往下载网页并向下卷动到旧版本
- 在版本1.3.2以下 - CSS打开未压缩与默认主题：jquery.mobile-1.3.2.css ，复制其内容。
- 前往 jQuery Mobile ThemeRoller ，从顶部工具栏中，点击导入或升级。一个新窗口将打开
- 在该窗口上，粘贴1.3.2 CSS样式。从选择菜单中，选择升级到版本1.4.5 ，然后点击导入按钮
- 如果你想。完成后，点击顶部工具栏中的下载，为您的主题提供自定义名称并下载升级版经典主题。
-
放置新主题和其他依赖项按照以下顺序
- Go to download page and scroll down to "Legacy versions"
- Under version 1.3.2 - CSS open Uncompressed with Default theme: jquery.mobile-1.3.2.css, copy its' content.
- Go to jQuery Mobile ThemeRoller, from top toolbar, click "Import or upgrade". A new window will open
- On that window, paste 1.3.2 CSS styles. From selectmenu, select "Upgrade to version 1.4.5" and then click "Import" button
- Review copied themes, do changes if you want. Once done, click "Download" from top toolbar, give your theme a custom name and download upgraded classic themes.
Place new theme and other dependencies in the following order
<head>
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
Demo
这篇关于改变我的jquery移动主题改变我的CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
