Question

我一直在研究jquery移动页面，它上面有几个具有独特风格的按钮，例如：

作为某种客户端“jquery驱动向导”的一部分......

<button data-function="back" class="back">Back</button>
<button data-function="next" class="next">Next</button>
<button data-function="submit" class="submit">Submit</button>

...根据您在向导中的位置，这些按钮会显示/隐藏。

没问题......直到我找到样式。 JQuery将它自己“包裹我的按钮并隐藏它”，所以我最终得到的东西看起来像......

<div class="ui-btn ...">    
   <span class="ui-btn-inner ...">Back</span>
   <button class="back">Back</button> 
</div>

如上所述，它隐藏了我的按钮，然后我的后退按钮的自定义样式有效丢失。我不想将所有按钮设置为自定义按钮。

我考虑使用一些JQuery将我的自定义样式移动到父“div”元素作为doc ready脚本的一部分，但这对于每个按钮来说似乎都很愚蠢，逻辑可能变得相当复杂或者长时间缠绕如果每次我想要一个不同的按钮类型，我必须这样做。

是否有一种标准的方式来说“JQuery，我希望这个类应用于你生成的按钮元素......”或者这是一个错误吗？

我注意到其他人完全避免使用这种方法，例如...... http://m.nationalrail.co.uk/pj/home

访问按钮上的官方JQuery移动页面似乎表现出相同的行为： http://jquerymobile.com/demos//1.2.0/docs/buttons/buttons-types.html

（记得在访问之前将浏览器代理更改为移动设备）

有什么想法吗？理想情况下，我想避免使用我自己的一些JQuery将样式“破解”到正确的元素，以避免减慢页面速度并引入更多代码然后我必须维护，因为我想要一个蓝色和橙色按钮彼此相邻。

麻烦在于我们的公司主要登陆页面，所以这种风格非常重要。

编辑@ Gajotres：

添加另一个主题可能会解决问题，但我对这个页面的职责是让它尽快执行，加载具有多个主题的页面意味着更多的加载时间。

我认为这是一个可能的解决方案，但我认为JQuery应该已经这样做了，所以我的想法可能是我做错了...

<script type="text/javascript">
   var allButtons = $(button);
   allButtons.each(function() { 
      var css = $(this).className;
      $(this).prev().addClass(css);
   });
</script>

这将导致我将按钮上的任何类应用于jquery生成的span标记，并且现在显示在它的位置。然后我需要附加一些进一步的功能，以确保我有选择地复制某些类（只是愚蠢的imo）。

在这里采用JQuery方法我可以添加类似......

data-customStyle="myClass"

...对于我想要样式的每个按钮，然后使用类似......

的东西

<script type="text/javascript">
   var customButtons = $("data-customStyle");
   customButtons.each(function() { 
      $(this).prev().addClass($(this).data("customStyle"));
   });
</script>

...将样式附加到“代表按钮的jquery标记”。

我对此的想法...... WTF？！？！

JQuery的目的是让生活变得更轻松而不是更难？我不应该“发布hack add in”的东西去做我在服务器上基本已经做过的事情而且JQuery破了。

这是JQuery中的错误吗？

Answer 1

找到与jQuery相关联的css文件，并尝试编辑它，参考你需要样式的div和那些你不需要样式的div。对于那些你不想要样式化的按钮，只需将类或id更改为css文件中不存在的其他名称。

有时候即使你改变了类（在css类名中是一个点示例“.class”）或id（在css id名称后面是一个哈希“#id”），如果不是全部，有时会像背景那样变小颜色可能保持不变。对于此检查，对应于主要属性的css文件，如or或（在css属性名称中，放在方括号示例“[title]”之间）。作为参考，您可以查看http://www.w3schools.com/css/

Answer 2

最终的答案落入了css中第一个c的领域。

如果您按照正确的顺序将样式表放在页面上，则可以利用级联来正确覆盖事物。

JQuery充满侵略性，因为它的“默认样式”和一些持久性通常会得到回报，尽管它可能意味着压倒很多东西。

我如何定义Jquery按钮样式？

2 个答案: