用jQuery Mobile自定义元素的最佳方法是什么 [英] What is the best way to customize elements with jquery mobile

问题描述

与jQuery Mobile .css一起使用jQuery Mobile .js时，自定义默认样式(例如链接按钮)的最佳方法是什么?

When using jQuery Mobile .js along with jQuery Mobile .css, what is the best way to customize the default styling such as a link button?

使用jQM，可以使用以下代码将简单链接变成按钮:

Using jQM, a simple link can be turned into a button by using the following code:

<a href="index.html" data-role="button">Link button</a>

data-role ="button"允许jQM向该链接添加类，以便可以将其样式化为移动按钮触摸，如下所示:

data-role="button" allows jQM to add classes to the link so it can be styled into mobile button touch abled like so:

<a href="index.html" data-role="button" data-corners="true" data-shadow="true" 
data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn 
ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner 
ui-btn-corner-all"><span class="ui-btn-text">Link button</span></span></a>

可以实际编辑jQM css文件，例如ui-btn-up-c类吗?还是更好地以某种方式覆盖样式(也许在外部样式表中)?

Is it OK to actually edit the jQM css file for example the ui-btn-up-c class? Or is it better to override the styles somehow, perhaps in an external stylesheet?

我有两个问题.我想知道是否可以通过直接编辑jQM.css来破坏某些功能，因为jQM似乎大量使用了样式表.

I have a couple of concerns. I am wondering if it's possible to break some of the functionality by directly editing jQM.css as jQM seems to use the stylesheet heavily.

在更新时也会有问题吗?当新版本发布时，jQM会发布新的样式表吗?它将覆盖我对主要jQM样式表所做的编辑?

Also will it be a problem on updating? Do jQM release a new stylesheet when a new version comes out which would override my edits to the main jQM stylesheet?

基本上我要问的是如何编辑内置主题的jQuery Mobile?

Basically what I am asking is how do I edit the jQuery Mobile built in theme?

谢谢，期待您的回答:)

Thanks and look forward to your answers :)

推荐答案

简介

如果您想更改经典的jQuery Mobile CSS ，则一切都取决于您要做什么.

Intro

If you want to change classic jQuery Mobile CSS everything depends on what do you want to do.

经典方法是创建一组全新的主题或将其添加到现有主题中.它是通过jQuery Mobile 主题滚轮 完成的.当您打开它时，它将自动创建3个主题，然后您可以根据需要进行修改.或者，您可以导入当前主题 CSS 并添加更多主题(如果要更改完整外观，这可能是最好的解决方案).

Classic way would be to create a completely new set of theme's or add them to existing ones. It is done through jQuery Mobile theme roller. When you open it it will automatically create 3 themes you can then modify as you wish. Or you can Import your current theme CSS and add several more themes (this is probably best solution if you want to change complete look).

此解决方案需要一些技巧.首先，除非可能，请从不更改原始的 CSS ，除非您100％确信自己在做什么.例如，如果您更改默认按钮类，它也会影响其他使用按钮类的窗口小部件，

This solution requires a little bit of finesse. First if possible NEVER change original CSS unless you are 100% sure what you are doing. For example if you change default button classes it will also affect other widgets that use button classes and there are a lot of them.

正确的方法是使用自定义 CSS 文件更改单个/多个元素.这样，原始的 CSS 文件是完整的，并且可以随时更改/删除新的文件. 为此，您将需要使用Chrome网站管理员工具或名为Firebug的其他插件(适用于Chrome和FireFox).还有其他几种解决方案，但最常用的是这两种.

Correct way would be to change single/multiple elements with custom CSS file. This way original CSS files is intact and new one can be changed / removed at any time. To do this you will need to use Chrome Webmaster tools or additional plugin called Firebug (for Chrome and FireFox). There are several more solutions but this two are most commonly used.

在此解决方案中，并非一切都很好.例如，经典的标记按钮可以轻松修改，因为相同的标记将保留为将来样式化的jQuery Button的父代.但是，如果您的按钮是根据输入标签创建的，则如下所示:

Not all is well in this solution. For example, classic a tag button can be easily modified cause that same a tag will stay as a parent of a future styled jQuery Button. But, if your button is created from input tag, like this:

<input type="text" value="Some value" id="change-me"/>

您不能使用#change-me id来更正其 CSS .主要是因为此输入不是将来按钮的父标记，因此当jQuery Mobile设置其样式时，它将成为按钮的内部部分.看起来像这样:

you cant use #change-me id to correct its CSS. Mainly because this input is not a parent tag for a future button, it will be a inner part of a button when jQuery Mobile styles it. It will look like this:

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
    <input type="text" id="change-me" value="Some value" class="ui-input-text ui-body-c"/>
</div>

要解决此问题，请使用另一个div元素包装该输入.将id从输入移到div元素，然后使用它来更改内部的 CSS 样式.

To fix this wrap that input with another div element. Move id from input to div element and then use it to change inner CSS styles.

这是此StackOverflow组中最常见的问题之一.更改预定义的 CSS 规则时，必须使用 !important 关键字.没有它，更改通常是行不通的.例如，如果您想更改输入按钮样式的背景(在上一个示例中，包裹在div中)，您可以这样做:

This is one of a most common questions in this StackOverflow group. When changing predefined CSS rules you must use !important keyword. Changes will usually not work without it. For example if you want to change input button style background (from a previous example, wrapped in a div) you would do it like this:

#change-me .ui-input-text {
    background-color: red !important;
}

如果其他方法无效，请更改原始CSS文件

jQuery Mobile可以具有1个或2个 CSS 文件.使用一个文件时，将同时包含主题和结构，也可以将它们分为两个文件.如果您想直接更改 CSS ，这将很有用.主题 CSS 可以轻松导入和导出到主题滚轴中，而不会影响结构 CSS 文件.

If nothing else works change original CSS file(s)

jQuery Mobile can have 1 or 2 CSS files. When using one file both theme and structure is included, or they can be separated into two files. This is useful if you want to change CSS directly. Theme CSS can be easily imported and exported into theme roller without affecting structure CSS file.

最后一件事，某些事情只能通过修改原始结构 CSS 文件来更改.例如，jQuery Mobile使用可怕的蓝色发光效果来显示何时按下某些元素.只能直接从结构 CSS 文件中将其删除.

One last thing, some things can only be changed by modifying original structure CSS file. For example jQuery Mobile uses a horrible blue glow effect to show when some element has been pressed. It can be removed only directly from structure CSS file.

这篇关于用jQuery Mobile自定义元素的最佳方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！