I'm using backbone.js with jquery-ui tabs and my browser's back button is working fine. However, I would like to dynamically add and remove tabs and reverse those actions via back button. For example if the following happens:
#tab-1
#tab-2
open tab-3
#tab-3
When I click in the back button, the following should happen:
close tab-3 and go to #tab-2
#tab-1
What is the best solution for this?
Thanks
I had the exact same issue as you a few months back. I originally used jQuery-UI tabs on a project, https://www.implantlink.com/ but as the app grew, the friction between tabs and backbone proved too annoying and limiting. After all the hardship of trying to get jQuery-UI tabs and Backbone to play nice, I can tell you it's just not worth it.
You may be better off abandoning jQuery-UI tabs and sticking entirely with backbone.js if your project is complicated enough. Copy all the necessary CSS & HTML you need to create your own tabs, then setup each tab as a route and callback function to switch out your HTML.
Example Tabs
<ul class="tabs">
<li>Tab 1
<li>Tab 2
<li>Tab 3
</ul>
Example JS
$('#content').html('tab 2 HTML and content stuff');
Related
I'm using jQuery mobile to build a simple web app and I want to add a navigation bar common to all pages.
I've found this great example, which led me to this question: do I really need the attribute data-role="navbar"?
Because it adds unnecessary html and css to my code, obligating me to override all these unnecessary styles.
Thank you
I haven't seen the need for data-role="navbar". This page here might help: jQuery Mobile Data Attributes.
It looks like it might only be needed for styling.
Im starting a project from scratch in Worklight. Im using Jquery Mobile and I need to know how Im suppose to do the transition between pages. When I drag and drop a new list view, the following code is generated using Hyperlinks:
<ul data-role="listview" id="listview" data-inset="true">
<li data-role="list-divider" id="divider">Divider</li>
<li id="listitem">Item</li>
<li id="listitem0">Item</li>
<li id="listitem1">Item</li>
</ul>
But if I take into consideration the "building multiple page application" guide, I should not use hyperlinks...How should I do this?
As you rightly so mention, Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.
In order to implement multipage navigation, then, you can use either jQuery Mobile's changePage or jQuery's load functions (or the equivalents in other frameworks...), depending how you'd like your application to behave.
jQuery.mobile.changePage()
http://api.jquerymobile.com/jQuery.mobile.changePage/
.load()
http://api.jquery.com/load/
Here are a couple of Worklight 6.1 projects demonstrating page navigation:
JQM_multipage_load_changePage.zip - uses either .load or .changePage
JQM_multipage_changePage_pageshow.zip - uses .changePage and .pageShow
In both approaches you have 1 HTML file (Worklight's index.html) and multiple other HTML files; you take the contents of these HTML files and replace with it a specific subset of the index.html. This way Worklight's index.html remains intact (the references to the framework's JS, etc), but the app contents is changed.
Taking the above to your particular case, you can add an onclick to your href and use jQuery Mobile "to transition" and display the contents of "another" page.
I want to use just the slide transitions / AJAX navigation component of jQuery Mobile. On jQuery Mobile's website they have a "Custom Builder Tool" which lets you select just the "AJAX Navigation System" (and it auto-selects associated stuff like transitions).
http://jquerymobile.com/download-builder/
This yields some custom JavaScript and CSS files. For the life of me, I can't get this to work on a webpage. If I include these custom files, then add data-transition="slide" to an anchor element, nothing happens. If I include the full jQuery Mobile library it works perfectly (but screws up the styling of my mobile site). How can I make this work? Maybe one needs to initialize the custom jQuery Mobile manually? I can't find anything in the docs about this. Help!
Here's how I got this to work:
I included the latest jQuery Mobile js but used the stripped down css from my custom JQM build (using the Custom Builder tool).
data-role="page" was added to page content containers. Some scripts called in needed to be moved to now load from within the content containers. Now transitions work as expected.
I hope this helps somebody.
I'm not very great at javascript and i am having trouble mixing iscroll and jquery mobile. I am testing it on IOS
This is what I have;
http://m.filmrev.me
Both pages are scrolling but not in the correct way.
Would anybody be able to help with this.
Thanks
check this link
http://cubiq.org/dropbox/iscroll4/examples/simple/
And
yours example there are 2 same id for div and 'ul' .
try it change these ids.
ex..
in page, <div id='scroller '>
in page 2 ,
<div id='scroller''>
Have you tried the jQuery Mobile iscroll implementation - see here. This was done specifically for JQM.
However, the JQM devs have started their own scroller, called Overthrow. This is supposed to be more cross-platfrom compared to iscroll. I've used iscroll, scrollview (previous JQM scroller) and am now using Overthrow. Works ok and I found it fairly easy to implement.
Does anyone use jQueryUI (such as the CSS framework part) without the jQuery component? If you were catering for users who don't have javascript or who have it disabled etc
A particular scenario would be the dialogs which are so brilliant and simple...without javascript its just a div though...would a potential solution be to have the dialog div with a class that positions it absolutely and above other elements and then to remove that class when jQueryUI sets up the dialog...so that if javascript cannot run the dialog still has the class?
or would you use the css framework to create the dialog manually perhaps...
I have used jQuery UI's classes to style things 'consistently' when JavaScript is turned off. You just use the classes that jQuery UI applies to elements, and include the jQuery UI stylesheet and resources.
For example, if you had
This is a button
And you ran the jQuery UI JavaScript:
$("#abutton").button();
It would alter the markup to:
<a href="#" id="abutton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
<span class="ui-button-text">This is a button</span>
</a>
Giving you a nice jQuery UI button. But only once the JavaScript has run will this be applied. If a user doesn't have/allow JavaScript, then you'll get an ugly link being used. Instead, you should use the jQuery UI classes at the start:
This is a button
It will have the basic jQuery UI styling before the JavaScript runs (the structure is different though - the span isn't there, and if you had the span initially it adds another one anyway, which IMHO is a bug). The thing is that you want the JavaScript to run still, because it adds other things, such as mouseover effects (and the span mentioned earler), so that users that DO have JavaScript get the full experience, but you also want to use jQuery UI classes by default because you want some consistent theme (even if it's not 100% perfect).
For more info about their CSS framework, check out http://jqueryui.com/docs/Theming/API.
If you want to have it to NOT use JavaScript, you'd have to have:
Initial page, does a post back
Server decides a popup needs to be done, renders the view with a dialog containing all the relevant dialog classes set.
User clicks button on popup, performing another post back.
Server renders view without the popup.
It is ugly, but you can't do dynamic HTML without scripting, right...
I use the CSS all the time outside of jQueryUI; I find it provides a much more consistent look-and-feel.
As for the rest of the question...whatt?!
and then to remove that class when jQueryUI sets up the dialog
How do you plan on having jQueryUI run ("set up the dialog") without JavaScript being enabled? If you put the dialog up without JavaScript, it won't be able to move or close; you'll be stuck with a giant div in the middle of the screen.