Working on making a very standard dropdown menu with the new jquery ui 1.9 menu widget, but having some problems due to the newness of the widget and the presence of only a single extremely basic example at jqueryui.com
Specifically, can anyone here help me to:
Initialize a widget with no icons for submenus? (Default is a right-facing carat and I can't get rid of it)
Make a menu where user has to click on the top menu item (as opposed to just hovering) to make the submenu appear? Any deeper submenus should then expand when the user's pointer hovers over them. This is typical dropdown behavior, e.g., user clicks "edit" to make options appear like "select" or "undo", but any further choices under (for example) "select" would apper just by hovering over "select". I hope that's clear.
Thanks
I don't know how to do the second part of your question but I can answer the first question.
You can change the default icon by setting the icon option of the menu option.
First add a class to your CSS file like this.
.no-icon { display:none;}
Then set the icon option when you create the menu.
$( "#menu" ).menu(
{ icons: { submenu: "no-icon" } }
);
You won't have any icons.
Here is a fiddle
Related
For the most part, Select2 does I want it to. It provides me with a searchable dropdown list; however one glaring issue is that I need to click on the widget, then click in again to get to the search bar. This is different from other searchable dropdowns like semantic-ui, where you can click on the widget and immediately start typing. Does anyone know if this result can be achieved with Select2? It's a great library otherwise and I'd hate to have to refactor it out.
The linked image shows how my select2 widget is implemented. What I want is for the search bar to appear at the top, where the dashes are.
I am using Select2 and I am adding a custom button to the start of it using the following code:
$("#select2-ddlCustomer-container").off().on('click',
function() {
$("#ddlCustomer-add").remove();
$("#select2-ddlCustomer-results")
.before("<div id='ddlCustomer-add'><i class='fas fa-user-plus'></i> Create new customer</div> ")
.promise().done(function() {
$("#ddlCustomer-add").off().on('click',
function() {
alert('test');
});
});
});
However as soon as the select box opens it automatically highlights the first option even though I have not hovered over it, this means that when I hover over my "Create new customer" button the first option in the list is also highlighted which looks confusing to the end user.
Does anyone know how I can stop it highlighting an option by default and only highlight an option if the mouse is actually hovered over it?
I have got around this issue by adding the following code to remove the highlight class from all the options when I hover over my "Create new" button, this doesn't technically unselect the option and it doesn't resolve the issue with the first option in the list being highlighted when the dropdown is opened even though I haven't hovered over it but it is a workable solution for now:
$("#ddlCustomer-add").hover(function () {
// Un-highlight all options
$('.select2-results__option').removeClass('select2-results__option--highlighted');
});
I am trying to use the ShowHide effect that comes with Kevin Moore's widget package here:
http://dart-lang.github.io/widget.dart/#showhide
Not sure how to use this. Anyone got an example I can look at ?
Basically all I want is for a dropdown to show with one of those effects if a certain event happens.
Your tips appreciated.
Thanks.
You need to add a listener for an event to an element in the DOM, and then use ShowHide.toggle(element, effect) to trigger an effect. Here is an example which listens for a click on a button, and toggles FadeEffect on an image each time it is pressed:
var button = query("#fadeButton")
..onClick.listen((event) {
ShowHide.toggle(query("#fadeImage"), effect: new FadeEffect());
});
If you wanted to fade in/out a dropdown when you click on a menu bar, then substitute "fadeButton" for the menu which listens for clicks, and "fadeImage" with the dropdown element.
Also, any other effect can be substituted for FadeEffect, such as DoorEffect, ScaleEffect, ShrinkEffect, etc.
In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.
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