I'd like to place an icon inside a list-divider, but it seems that jQuery Mobile lets me apply data-icons to normal list items only and not to list items with data-role='list-divider' assigned.
Simply enough, I want the list-divider to display an info button for providing the user with more information about this category, which should look like so:
The point is, I'd like to place the info icon (with data-icon='info' or class='ui-icon-info') within the list-divider, while maintaining consistency in the overall style, i.e.:
The category is headed by a list-divider, and not by a list-item that is just styled to look like the list divider.
The icon is displayed on the right side, like the arrows in the list items below. The icon has to have the same style of appearance like the arrows, which means that it should not look like a button or have an extra frame around it.
The list-divider, or at least the icon, should be clickable, so the user is able to get the information about this category.
I'd preferably like to achieve this without any CSS customizations or JavaScript fiddling, using data-attributes only.
This is what I got (using jQuery Mobile 1.3.2):
List-item with data-icon:
<li data-theme='a' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Correct appearance of info-icon
Wrong appearance of category, because a normal list-item is used instead of a list-divider
Using a list-item with data-role='list-divider' assigned:
<li data-role='list-divider' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
No icon at all
Wrong title appearance and only text is hyperlinked instead of the whole list-item
List-divider with info-button inside:
<li data-role='list-divider'>Category: A<a href='#' data-role='button' data-icon='info' data-mini='true' data-iconpos='notext' data-inline='true' data-theme='a' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Info button has wrong appearance
The button has a border which I like to remove for consistency, so the icon is shown in its usual disc appearance. Removing data-role='button' doesn't help, because the button wouldn't be rendered at all and would therefore not show the icon.
The icon's position is not on the right side. I know it would be possible using data-iconpos='right', but I used this attribute for the icon-only (notext) layout already.
Category appearance is not pleasing, as the button increased its height. Even data-mini='true' didn't help.
I know there are a dozen of easy ways doing it the normal, less jQuery Mobile fixated way, but after 3 approaches, I'm eager to find out how this could be done with jQM.
This works, including the click, i just test it
<li data-role="list-divider">Test<div onclick='alert("Some info...");' class="ui-icon ui-icon-info" style="color:white;float:right"><div></li>
if the icon doesnt align with the rest of the icons add the below to the style
margin-right: -5px;
and change the pixels size to match the other icons
Related
Im using horizontal radio buttons in jQuery mobile:
http://jquerymobile.com/test/docs/forms/radiobuttons/
When you make the fieldset horizontal the style changes and the round 'selected' bit goes away. Can this behavioral be disabled so it users the normal jQuery mobile styling?
Yes, but not in a easy way. This much I can remember. I don't have an example with myself, also don't want to rewrite it again.
First, what you need is a firebug plugin (or something similar) for Firefox or Chrome.
I. Horizontal radiobuttons have a disabled span used for round selection img. Enable it by giving it a display: block-inline (in that case give other div the same property, this will allow them to be in line, in other case they will overlap) or give both of them display: block; a float them to the left (don forget position: relative) .
I am talking about this:
<span class="ui-btn-text">List</span>
<span class="ui-icon ui-icon-radio-off ui-icon-shadow"> </span>
Top one is a text span and bottom one is an icon holder. Bottom one is disabled (display: none;) in case of horizontal group.
II. Second thing, on click/select prevent background color change. This will leave you with horizontal version of vertical radiobutton control group.
Hope this helps.
I am trying to add a horizontal toolbar at he top of my application (uses android webview and jquery mobile) that contains a bunch of buttons (too many to fit across the screen in a single line).
The problem that I am facing is that instead of hiding the extra buttons, they wrap around to the next line. What I would like is for them to hide and be accessible by scrolling them horizontally just like a native ListView would allow me to do.
I have tried to use a ListView to put the buttons in, and pass the button presses to the javascript code by doing loadUrl(), but this causes other issues and is not usable in my case (it automatically hides the soft keyboard).
I have tried the following code (along with this code wrapped in a jquery mobile toolbar):
<ul data-role="controlgroup" data-type="horizontal">
<li>B</li>
<li>I</li>
<li>U</li>
<li>S</li>
<li>ol</li>
<li>ul</li>
<li>in</li>
<li>out</li>
<li>sub</li>
<li>sup</li></ul>
But this just wraps around to the next line.
Try putting the ul in a div, and set the div's width property to a large value, enough to accomodate all the buttons. Then set the overflow property to auto, and you should be good to go.
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.
On my jQuery Mobile page, i'm using a horizontal control group for some buttons.
But in some languages the text within these buttons is too long.
Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.
this is the base code:
<div data-role="controlgroup" data-type="horizontal">
short button
really really really insanely long button is really really insanely long. No really, who makes buttons this big?
</div>
and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis
.ui-btn-inner{
white-space: normal !important;
}
On the third page of this fiddle the problem is demonstrated
http://jsfiddle.net/koesper/R8Kwe/
Anyone have any ideas how I might tackle this?
Thanks in advance,
Casper
ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button
You could set widths for the links in your control-group:
.ui-page .ui-content .ui-controlgroup a {
width : 49%;
}
This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/
Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).
Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.
I'm pretty new to jQuery-UI, but I love what I see so far.I am using the 'blitzer' theme (as I needed red progress bars) and I have 4 progress bars side-by-side on one page. Now my PM wants one of them to be green, and bigger than the rest. I looked around the provided theme CSS but couldn't find the right tag to tinker with. Can anyone post a short code of 2 progress bars with different sizes/colors side by side?
Bonus question: I was asked to print the PB's percentage in the PB itself - no biggie - I just added a label inside the div. The problem is the text in the label is colored white, so if the PB is empty or half-empty, the text becomes invisible. Is there any way to control the background color of the PB, or is it a given inside a theme?
Thanks a lot!
Guy
This is how the bars are set up, so modify the classes inside them.
<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
<div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>
(Its at the bottom of the badge)
Modify ui-progressbar and ui-progressbar-value.
Traveling Tech Guy:
If you look in the css folder of your jQueryUI download, you will find a theme folder; mine is called ui-lightness, yours is probably called ui-blitzer. Go into that folder, and then into the images folder. There, you will find some image files that start with the letters ui-bg_diagonals and ui-bg_gloss. These are the images that drive the progress bars. You should be able to add some images from another theme that are the colors you want, which will drive your other status bars.
In addition, there is a css entry called .ui-widget-overlay that references the image ui-bg_diagonals-thick_20_666666_40x40.png, which I think is the image that actually drives the progress bar. You will have to hack the css so that you can add a new class that references your new image in the other progress bar; I haven't figured out how to do that yet.