I am using this jQueryUI tooltip.
The jQueryUI file is quite large as it contains all the other elements.
Do I need all that code to let the tooltip behave properly or could I remove some of the code?
No, you don't.
Here's your jQuery UI build with only tooltip selected: http://jqueryui.com/download/#!version=1.10.3&components=1101000000000000000100000000000000
Feel free to customize this selection if you want.
Related
I need to be able to dynamically replace the radio buttons in a controlgroup. I've come up with a solution, but I'm wanting to make sure I'm going about it the right way. Here's a jsFiddle.
Should I be manually modifying the classes after calling .checkboxradio() on each of the newly-created radio buttons, or is there a method in jQuery Mobile somewhere that will help me accomplish this?
Please note that the jsFiddle here works as I need it to. I'm asking if there's an easier (or more idiomatic) way to update the dynamically-created radio buttons' visual styles to conform to the controlgroup style.
Content should be added to the DOM before jquery mobile enhancement, for instance by binding to the page beforecreate event instead of the page pagebeforeshow. This way your content will be properly enhanced.
As for dynamic content, you can enhance it as soon as it has been inserted in the DOM. See this modified fiddle.
try this:
$('#creneauListPage #fieldcontain input').checkboxradio();
$('#creneauListPage #fieldcontain .ui-btn').removeClass('ui-btn-corner-all');
$('#creneauListPage #fieldcontain .ui-btn:first').addClass('ui-corner-top');
$('#creneauListPage #fieldcontain .ui-btn:last').addClass('ui-corner-bottom ui-controlgroup-last');
All the form examples in the docs for jQuery mobile show each form element on its own line. I would like to have a standard button (which will link to another page), to the right of a search input field. Is that possible with jQuery Mobile?
Thanks
Not natively as an inline unit. However, form elements can be used together with the layout grid system reasonably effectively:
http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html
jQM's UI grids force columns of equal width. In my case, i wanted the submit button to be just the icon to allow the search box more room. i saw <table> mentioned in a couple posts, but discovered that other inputs (notably selectmenu) don't work correctly when they're children of unexpected elements. [1]
So to avoid breakage of the widgets, i managed this:
.ui-grid-a.my-grid-a .ui-block-a.my-block-8515-a {
width: 84.95%;
}
.ui-grid-a.my-grid-a .ui-block-b.my-block-8515-b {
width: 14.95%;
}
It's not bullet-proof, but it can be expanded to additional grid definitions. It uses specificity to get all the grid rules of the existing UI, but then redefine the column widths. No inline styles, no additional tags, and the widgets don't break. And because of specificity, it can be loaded before or after jQM's structure stylesheet.
[1]: https://github.com/jquery/jquery-mobile/issues/6077 jQM Github bug report
With new version you can:
http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
The old style solution still works:overwriting the ui-input-search
div.ui-input-search{
width: 55%;
display: inline-block;
}
don't forget to add ui-btn-inline in the class of the a href (if you use the Button markup syntax)
I need to format multiple containers (div) in a web page to look like a jquery-ui dialog.
The divs should automatically change if I change the theme.
So far I'm applying a jquery-ui tab to the div, but this don't have the same title bar and I need to add a lot of html for each div
Thanks In Advance
Just use the same css as jQuery UI and apply it to your divs.
Examples:
http://jsfiddle.net/Fyj7L/
http://jsfiddle.net/Fyj7L/1/
http://jsfiddle.net/Fyj7L/2/
The site http://jqueryui.com/demos/ describes how to set styles for buttons, radios, and checkboxes.
It can be achieved by
$(".saveButton").button(
{
icons: {
primary: "ui-icon-disk"
}
});
So why not TextBoxes and DropDownLists? Can I apply the button like style to text boxes and drop down lists.
I suppose a logical answer for your question is that, the widget is called "button", not "form element". There is, however, a combobox demo for the autocomplete widget, that you might find useful. Here's another demo page with the combobox without autocomplete: http://jonathan.tang.name/files/jquery_combobox/demo.html.
You may also find the jQuery UI MultiSelect Widget useful; it's a jQuery UI plugin.
As for text boxes, you can simply reuse some classes in the jQuery UI CSS framework.
See a couple of examples here: http://jsfiddle.net/william/gJh2d/1/.
Also, dropdown lists are not like links or divs or other simpler html elements (form or otherwise) they tend to have default "lower level" implementations in the browser involved with their rendering. So its much harder to change the way they look. That's why a drop down list doesn't break down to simpler elements i.e. its not a textbox with a button next to it, its a complete "thing" / "control" in itself.
However, you can reclaim control (but I'd generally say usually better to work with what you get from browser here as you can see its not simple to fully control the style such elements.
More info see resources such as e.g. enter link description here
I have an Asp.NET website being written in C#. There is a DataGrid () that has three columns of buttons (). I an using jQuery UI to redesign site and I wanted to style the buttons in this grid. After finding no way to do it with HTML/ASP markup, I decided to use a jQuery selector to set the style. This works to style the buttons, but in IE 8, when I hover over a button, the rest of the buttons disappear and they don't come back until I refresh the page. My javascript looks like this:
$('input[type~="submit"]').button ();
$('input[type~="submit"]').css ('font-size', '10px');
Any help would be greatly appreciated.
The issue was my lack of a DOCTYPE declaration. Making it strict fixed the issue.