How do I define styles for JQuery buttons?
I am working on a jquery mobile page and has several buttons on it that have unique styles like:
As part of the client-side "jquery driven wizard" there is ...
<button data-function="back" class="back">Back</button>
<button data-function="next" class="next">Next</button>
<button data-function="submit" class="submit">Submit</button>
... depending on where you are in the wizard, these buttons are shown / hidden.
Not a problem ... until I get the styles. JQuery makes a commitment to "wrap my button and hide it", so I end up with something similar ...
<div class="ui-btn ...">
<span class="ui-btn-inner ...">Back</span>
<button class="back">Back</button>
</div>
As stated above, it hides my button and my custom styling for the back button is then effectively lost. I don't want to style all the buttons just my own.
I thought about using some JQuery to move my custom style to the parent "div" element as a doc ready script, but that just seems silly for every button and the logic can get quite complicated or if I have to do this every time I a different type of button is needed.
Is there a standard way of saying "JQuery, I want this class to apply to the button element (s) you are generating ..." or is this a bug?
I've noticed that others avoid using this approach altogether, for example ... http://m.nationalrail.co.uk/pj/home
Visiting the official jQuery mobile page on buttons seems to have the same behavior: http://jquerymobile.com/demos//1.2.0/docs/buttons/buttons-types.html
(remember to change browser agent to mobile before visiting)
Any ideas? Ideally, I want to avoid hacking the styles on the desired element with some jQuery to avoid slowing down the page and injecting more code that I only have to maintain because I need a blue and orange button next to each other.
The problem is that this is for our main landing page, so style is considered very important.
Edit for @Gajotres:
Adding another theme might solve the problem, but my goal for this page is to make it run as quickly as possible, and loading a page with multiple themes would mean longer load times.
I was considering something like this as a possible solution, but I think JQuery should already be doing this, so I thought that maybe I was doing something wrong ...
<script type="text/javascript">
var allButtons = $(button);
allButtons.each(function() {
var css = $(this).className;
$(this).prev().addClass(css);
});
</script>
This will cause me to apply any classes on the button to the span tag that jquery generated and now shows the location in it. Then I need to add some additional functionality so that I can selectively copy certain classes (just dumb imo).
Taking JQuery aproach I could add something like ...
data-customStyle="myClass"
... for every button I want to style, use something like ...
<script type="text/javascript">
var customButtons = $("data-customStyle");
customButtons.each(function() {
$(this).prev().addClass($(this).data("customStyle"));
});
</script>
... add styling to the "jquery tag that represents the button".
My thought on this ... WTF?!?!
JQuery is all about making life easier, not more confident? I didn't have to "add hacks" to do what I actually did already on the server, and JQuery broke.
Is this a bug in JQuery?
source to share
The answer at the end fell into the scope of the first c in css.
If you put your stylesheets on the page in the correct order, you can use a cascade to override it correctly.
JQuery is aggressive because all hell with its "default styles" and some persistence usually pays off, although that could mean overriding a lot of things.
source to share
Find the jQuery related css file and try editing it with a link to the divs you need to style and the ones you don't. Else for those buttons that you don't need, just change the class or id to some other name that doesn't exist in the css file.
Sometimes, even if you change the class (in the css class name after the example with the dot ".class") or id (in the css id name after the "#id" hash), if not all, sometimes small changes such as background color may remain unchanged. For this check, the css file corresponding to the main type attribute or or (in the css attribute name is placed between the example square brackets "[title]"). For reference, you can check http://www.w3schools.com/css/
source to share