I have the jQuery UI "smoothness" theme and I would like to use the "look" to style divs on my page. E.g. apply the gray, shaded, rounded-corner effect to a regular div that ISN'T an accordion, button, etc.
I thought it would be easy! Perhaps it is?!
Thanks!
Have a look at jQuery UI themeroller. You can select an existing theme or customize one, then using Chrome or Firefox/Firebug, for example, Right-click → Inspect element and copy the class names.
ui-widget, ui-widget-content and ui-corner-all are the most likely class names you will be looking for.
Here is what I came up with need some CSS tweaking, but should work.
<div id="login" align="center" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="login_header" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
Header
</ul>
<div id="login_form" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
content
</div>
Related
I have a <button> in jQuery Mobile 1.4.2 that's being shown with an extra <div> container appearing around it. I did not have this problem with jQM 1.3.2.
This is the code I'm using (note that the problem doesn't appear in jsFiddle):
<div data-theme="a" data-role="page">
<div role="main" class="ui-content">
<button id="test1" data-inline="true" data-mini="true" title="test1">Test 1</button>
</div>
</div>
And this is the fiddle that shows the extra div inserted by jQM: Demo With Extra Div
How do I get rid of the extra div?
As of jQuery Mobile 1.4, use .button() only for input with type button, submit or reset.
input is converted into a div that holds all styles.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" value="Submit">
</div>
If you call .button() on <a> or <button> tags, they will be wrapped in a div.
I have a <button> in jQuery Mobile 1.4.2 that's being shown with an extra <div> container appearing around it. I did not have this problem with jQM 1.3.2.
This is the code I'm using (note that the problem doesn't appear in jsFiddle):
<div data-theme="a" data-role="page">
<div role="main" class="ui-content">
<button id="test1" data-inline="true" data-mini="true" title="test1">Test 1</button>
</div>
</div>
And this is the fiddle that shows the extra div inserted by jQM: Demo With Extra Div
How do I get rid of the extra div?
As of jQuery Mobile 1.4, use .button() only for input with type button, submit or reset.
input is converted into a div that holds all styles.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" value="Submit">
</div>
If you call .button() on <a> or <button> tags, they will be wrapped in a div.
I try to bring some effects to my tabs navigation on my jquery-mobile page but it looks like that the data-transitions argument does not work combined with a tabs navigation.
My code looks like this:
<div data-role="header" data-theme="a" id="header">
<h1>Mainpage</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="tabs" id="tabs" >
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a id="lblTab1" href="#location" data-ajax="false" class="ui-btn-active" data-icon="search" data-transition="pop">search</a></li>
<li><a id="lblTab2" href="#product" data-ajax="false" data-icon="location" data-transition="pop">product</a></li>
</ul>
</div>
<div id="location" class="ui-body-d ui-content" > content </div>
<div id="product" class="ui-body-d ui-content" > content2 </div>
</div>
</div>
</div>
so how is it possible to bring some effects to the navigation bar?
I use jquery-mobile 1.4.0
Page transitions don't work on tabs as transition classes are activated when hiding/showing pages. You can create your own transitions, use third party CSS transitions or use jQM default ones.
First, you need to listen to tabbeforeactivate event. This event omits a ui object containing data of previous (ui.oldPanel) and next panel (ui.newPanel). All you need is to add animation classes to ui-newPanel and remove them once animation ends by binding Animation End one time only using .one().
$("#tabs").on("tabbeforeactivate", function (e, ui) {
$(ui.newPanel)
.addClass("animation")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass("animation");
});
});
Demo - Custom animation by Daneden
Demo - jQM default transitions
I'm trying to apply this SlickGrid example:
http://mleibman.github.com/SlickGrid/examples/example4-model.html
to my own web project.
When I drop my grid in to the top of my page, it renders correctly. However, when I drop it into a jQuery UI Tabs tab on the same page, the CSS Sprite that renders the search image is incorrectly offset.
The icon is rendered with
<span title="Toggle search panel" class="ui-icon ui-icon-search ui-state-default ui-corner-all" style="float: right;" onclick="toggleFilterRow11()"/>
It looks like jQuery UI Tabs also uses the same CSS classes, and of course a conflict arises.
Looking at the effective styles in IE9, the control outside of jQuery UI Tabs that renders correctly has the following:
The control that renders incorrectly looks like this:
Bottom Line
Placing the SlickGrid in a jQueryUI Tab causes the ui-icon-search class to be lost and therefore the wrong background-position-x/y to be set.
Why is that class being lost and how can I fix the issue?
The problem
When jQueryUI creates tabs from the HTML it adds the jQueryUI CSS classes. From the jQueryUI examples:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
</div>
becomes
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Nunc tincidunt</li>
<li class="ui-state-default ui-corner-top">Proin dolor</li>
<li class="ui-state-default ui-corner-top">Aenean lacinia</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>
The problem is happening because the SlickGrid content now exits as a child of an element with the class ui-widget-content. Actually, there are 2 ancestors of the grid header that have that class - in the above code see <div id="tabs"> and <div id="tabs-1"> both have that class applied when tabs are created.
The jQueryUI CSS rules that are supposed to apply to get the correct search icon are:
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-icon-search {
background-position: -160px -112px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}
The markup for the icon is:
<span style="float:right" class="ui-icon ui-icon-search ui-state-default ui-corner-all" title="Toggle search panel" onclick="toggleFilterRow()"></span>
so therefore the CSS rules .ui-icon, .ui-icon-search and the first match of the 3rd rule .ui-state-default are applied.
However when the same markup exists as a descendent of a element with the class .ui-widget-content, the 2nd part of the 3rd rule above (.ui-widget-content .ui-state-default) also matches which is more specific. See http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg for a Star Wars themed explaination of CSS specificity. Essentially the background property of the 3rd rule that includes background-position:50% 50% is more specific than the single selector .ui-icon-search rule therefore overriding the correct background-position:-160px -112px.
The solution
Need to make the .ui-icon-search rule the same or more specific than the .ui-widget-content .ui-state-default rule which can be done by either:
Adding !important to the rule
Adding more selectors to the rule
For example
.ui-icon-search {
background-position: -160px -112px !important;
}
or
.ui-icon-search, .ui-widget-content .ui-icon-search {
background-position: -160px -112px;
}
I cannot think of a way that doesn't involve changing the jQueryUI CSS (or duplicating the .ui-icon-search rule in your own CSS with one of the two solutions above). I would actually be interested to see if there is another way myself!
The default way of using the jQuery UI Tabs widget is to have each tab's content in a div on the same html page. Is it possible for each tab to be a link to a different page?
Why would you use jQuery tabs instead of normal HTML <a> in that scenario?
I guess you could add a tab change hadler that navigates to a new address using window.location, like this:
$('#myTabs').tabs();
$('#myTabs').bind('tabsselect', function(event, ui) {
// you can access clicked tab index as ui.index
window.location = "foo.html";
});
EDIT, if you want to do this just for styling, you can simply add right classes to your elements:
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Active tab</li>
<li class="ui-state-default ui-corner-top">Inactive tab</li>
</ul>
</div>
This will work even if user has disabled all javascript in the browser.