Response title
This is preview!
Move this topic
jQuery mobile and jQuery UI
in jQuery Mobile
•
2 years ago
Hey,
i browse through the code of jquery mobile, and i see small mobile widgets implemented from scratch there, some of which have equivalents in jQuery UI. such as - button, listView, dialog, etc. They extend $.mobile.widget.
So I'm wondering - won't jQuery UI be compatible with jquery mobile ? Or will jQuery mobile implement all the UI from scratch? I mean , imagine the following scenario - i am developing or extending a jQuery UI widget and i want this widget to be supported in a mobile environment. Do I have to write a second widget from scratch, that's based on jquery mobile ?
I assumed that the idea of jquerymobile was to bridge the gap between desktop & mobile, so that all existing UI widgets can automatically adapt to the mobile environment, without having to rewrite them from scratch.
Thank you all,
Angel
12
Replies(7)
Re: jQuery mobile and jQuery UI
2 years ago
I have spent a couple weeks trying to integrate jquery UI with jquery mobile. It's been a nightmare. I'm using jquery mobile alpha 2. For example, radio buttons work fine using jquery UI[ .buttonset() ], but jquery mobile breaks it. You also can't choose to ignore jquery mobile and just use UI's implementation, or the other way around.
Leave a comment on netwire88's reply
Re: jQuery mobile and jQuery UI
2 years ago
Hi all
I'm having similar fun bringing jqm to an application already using jquery-ui and so far i've been disabling all the jquery-ui dependant features otherwise weird stuff like dialogs opening by themselves keeps happening.
I'm guessing that for 1.0 jqm will not be compatible with jqui?
jonny B
Leave a comment on jonnybradley's reply
Re: jQuery mobile and jQuery UI
2 years ago
I think the short answer is: no, it is not easy at all.
Mostly because for some reason the jquery mobile classes (sliders, thumbs, buttons, icons etc.) have the same names as jquery ui classes but are completely unrelated. Needless to say, they step on each other's toes quite badly (reminds me of prom)
The problem *could* be solved by namespacing the the jqm classes with a prefix for example instead of
ui-icon
call the jqm class
jqm-ui-icon
But thats not the road taken so far. I also wanted to use some JQ UI controls (specifically a datetimepicker -- not just the datepicker)
Because jqm changes much more often than jq ui, i actually went the other way and prefixed the classes in the jq ui css and js code: jqui-ui-icon etc.
Still, quite an editing bloodbath. 
It's too bad really because it would be quite powerful to leverage all the various jq ui controls and derivatives floating around in jqm apps.
For reference also:
Leave a comment on toad99's reply
Re: jQuery mobile and jQuery UI
6 months ago
Jquery UI is really clashing jqm. am trying do some animation in a mobile app am developing which is powered by jqu ery ui. but am using jqm for the structure and presentation. but then I noticed that jqm is crashing the animation and many other stuffs in my code 
.... I wonder if jqm has a way of animation without crashing with jquery UI.
.... I wonder if jqm has a way of animation without crashing with jquery UI.
Leave a comment on daajust's reply
Re: jquery mobile animation problem with jquery
6 months ago
Jquery UI is really clashing jqm. am trying do some animation in a mobile app am developing which is powered by jqu ery ui. but am using jqm for the structure and presentation. but then I noticed that jqm is crashing the animation and many other stuffs in my code 
.... I wonder if jqm has a way of animation without crashing with jquery UI.
.... I wonder if jqm has a way of animation without crashing with jquery UI.
Leave a comment on daajust's reply
Re: jQuery mobile and jQuery UI
6 months ago
jQuery Mobile was not designed to be compatible with jQuery UI. There is absolutely no relationship between the two, other than that they both are projects of the jQuery Foundation, and that jQuery UI was some of the "inspiration" behind JQM.
If you try to use the two together, you are on your own to find solutions, and then fix your solutions every time you want to use a new JQM release.
Not a real good idea.
It is unfortunate that this wasn't done more intelligently. There is absolutely no excuse for the clashing CSS classes. But it's water under the bridge, and nothing can be done about it now. It's a ****-poor design, you have to live with it the way it is.
The CSS classes, though, are only one way in which the two libraries are incompatible, and with each new release they become more incompatible.
Maybe the designers had hoped to make the two impossible to use together (in order to avoid the temptation, since they are NOT designed to be compatible - I think the designers wanted to be free of some constraints in JQUI.) but didn't quite succeed as well as they'd like.
They're still working on that. ;)
It's confusing for developers, because the docs and marketing material do not make it as clear as they should that the only relationship between the two is a common sponsoring organization and a common prerequisite library (jQuery).
If you try to use the two together, you are on your own to find solutions, and then fix your solutions every time you want to use a new JQM release.
Not a real good idea.
It is unfortunate that this wasn't done more intelligently. There is absolutely no excuse for the clashing CSS classes. But it's water under the bridge, and nothing can be done about it now. It's a ****-poor design, you have to live with it the way it is.
The CSS classes, though, are only one way in which the two libraries are incompatible, and with each new release they become more incompatible.
Maybe the designers had hoped to make the two impossible to use together (in order to avoid the temptation, since they are NOT designed to be compatible - I think the designers wanted to be free of some constraints in JQUI.) but didn't quite succeed as well as they'd like.
They're still working on that. ;)
It's confusing for developers, because the docs and marketing material do not make it as clear as they should that the only relationship between the two is a common sponsoring organization and a common prerequisite library (jQuery).
Leave a comment on watusiware's reply
Re: jQuery mobile and jQuery UI
6 months ago
I have successfully added the sortable functionality from jQuery UI into my jQuery Mobile application by using the Download builder for jQuery UI and only selecting Core, Widget, Mouse, Position, and Sortable. Then, I had to use the jQuery UI Touch Punch plugin to map the touch events to mouse events. The drawback, of course, is that I have to lump two other libraries into my main concatenated and minified JavaScript file, which causes it to be 20-30kb larger. But, the sortable functionality is nice, so I don't mind the extra kilobytes. There is definitely some room to streamline the implementation by creating a new "sortable" widget for JQM that only uses the jQuery Mobile touch events. I will probably work on that someday. But, I have one other widget in mind for JQM, so the "sortable" one will have to wait.
If anyone cares to check out a live demo, you can log in to the demo of MPDTunes.
The sortable functionality is for rearranging the current queue and the tracks of a playlist. So, if you're interested, check out the Queue page, or click Playlists and then select a particular playlist and you will be able to rearrange the tracks by dragging and dropping them with the split-button on the right (I know, I know...split button listview isn't the prettiest, but I had trouble with auto-scrolling when adding the sortable functionality to elements of a non-split-button listview).
Leave a comment on dcarrith's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to attodorov's question
Statistics
- 7 Replies
- 9137 Views
- 11 Followers
