Is there an HTML DOM equivalent to JqueryUI selectable? - jquery-ui

Since there are HTML DOM attributes to make an element draggable, droppable and resizable, is there something like it for selectable?
I want to remove JQueryUI dependency (and not replace it with another library) since we don't use the widgets anymore, just the convenience methods for widget handling. When I keep selectable, widgets don't respond to the HMTL attribute settings (Jquery UI takes over drag/drop/resize).

Related

Disabling jQuery for specific element?

I'm using jQuery mobile and need it to not apply jQuery to a specific form element. I can see in the jQuery it does target this specific element. It applies an effect I don't want applied.
Is there some way to do this? I have tried using style= inside the element but the jQuery seems to override this.
Add the attribute data-role="none" to the dom element you don't want enhanced.

Angular dart click event on <a> href that is wrapped in shadow dom is retargeted to wrapper

In Angular dart tutorial Chapter_06, the default router is based on hash. After change it to Html 5 push state, the route on edit button which is inside of view_recipe_component does not work.
After check a while, it turns out it is because, the link of edit button is inside of shadow dom, so the click event is retargeted to <view-recipe> element (the wrapper of shadow dom). Then the DefaultWindowClickHandler can't get desired element, therefore it does not fall into router's control.
So what should I do to handle this event retargeting in shadow dom in router of angular dart? or is there any existing solution in angular dart?

Dynamic replacement of radio buttons in a controlgroup

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');

can we change the css styles of jquery widgets and plugins internally with in our page?

Can any1 tell me how to change the css style properties internally without changing custom.css file in jquery..so that the internal properties can effect the webpage..like changing properties of widgets and jquery-ui(ex:buttons,datepickers etc)...
You can just override the styles defined in the jquery style sheets in your own stylesheets. CSS stands for Cascading Style Sheets. The Cascading part means that one style can override another. You just have to place it further down the evaluation chain (or make it more specific, or any number of other ways).
You just create your own style sheet. Make sure it comes after the jquery-ui stylesheet in your page, and redefine the styles.

jQuery mobile listview refresh doesn't apply top/bottom corner classes

I am using jQuery Mobile with jQuery Mobile Router, to dynamically change content of listviews.
In the change handler I'm dynamically adding content to an inset listview, then calling listview('refresh') to re-apply all the styling to the new elements. It mostly works, however whilst it applies the ui-corner-all to the UL the ui-corner-top and ui-corner-bottom classes are not applied to the correct LIs so they don't get rounded corners applied.
I have prepared a live example that demonstrates the issue.
The first page is static, the second page is generated in the rounter handler which is trigger by the jqm beforepageshow event
Thanks for your help.
You just needed to force the refresh:
http://jsfiddle.net/j5q75/4/
JS
listview.listview('refresh',true);

Resources