HTML5/JS equivalent of a UINavigationController - javascript

I'm working on an HTML5-based app with an iPad view and wanted to have a list in a sidebar that has navigation nested so that I user could drill down a couple of levels before tapping the desired item in the main view to the right. I don't have a ton of web experience and I'm hoping someone could point me in the direction of a js-based library that would offer such functionality. The closet thing that I could imagine would be something similar to the UINavigationController in iOS that would allow me to easily push and pop lists of items.
I've explored JQuery Mobile and the closest thing that I could find was the 'nested listview' functionality, which as of version 1.3 is deprecated.

jQuery Mobile has this functionality built in. I would suggest reading through all the documentation. It will give you a better understanding of jQuery mobile and what you can and cant do.
Or if you just want information about the Navigation Model you can read about it here.
Finally you can find a demo of it in action here.

If you are not going to built it yourself then jQuery Mobile is probably the way to go.
Description from their website:
A unified, HTML5-based user interface system for all popular mobile
device platforms, built on the rock-solid jQuery and jQuery UI
foundation. Its lightweight code is built with progressive
enhancement, and has a flexible, easily themeable design.

Related

How to get UI designer window for AJAX

I want to start AJAX coding but also want to be able to design user interface in a designer window (like in MS Visual Studio) by dragging widgets onto the work area. Is there any tool that would let me do that easily?
Right now I'm using Aptana 3. I've installed jQuery but got lost trying to get jQuery UI. Is there any other way to get what I need?
There are no ajax/widget/js libraries out there that will have their own component designer, and you can stop searching for free ones, there are none.
There is one that most people know about, and it's called Sencha Architect, for the super awesome Sencha ExtJS library. Beautiful widgets, outstanding designer app, brilliant documentation. And such things of course come with a price tag.
If you are willing to make an investment:
Sencha ExtJS: http://www.sencha.com/products/extjs/
Store for ExtJS: http://www.sencha.com/store/architect/
Sencha Architect: http://www.sencha.com/products/architect/
Store for Architect: http://www.sencha.com/store/architect/
Other than this one, I've not seen any component/UI designer application for any js/ajax library.

Is there a lightweight framework for mobile apps that will also leave my existing site mostly alone

I'm looking for a javascript framework to help me with mobile website front-end programming.
The perfect solution would be a js file that, when included in my project, will give me basic mobile helper functions/event handling such as drag and drop, tap-hold, swipe WITHOUT forcing me to create a mobile specific version of my existing website.
I looked at jQuery Mobile and jQtouch but both forces me to create a mobile specific version of my website.
Is there any framework that could help me?
I think a better way to say it might be: "Is there a lightweight framework for mobile apps that will also leave my existing site mostly alone." Does that state it well, or, did I misunderstand?
You should be able to get pretty far with jQuery and jQuery UI.
I would also recommend something like Knockout.js to handle data binding.
Of course, you could always pull out the functions you want from jQuery/JQM. As I understand it, JQM is fairly separable, the widgets, that is.
Zepto is a jQuery compatible Micro-Framework for mobile devices that should fit your needs
You should check out Sencha to the list of frameworks you're considering. I've been playing around wit

Jquery Mobile data-role="content" without using Jquery Mobile?

I basically want to create the effect of parts of the DOM - divs etc - acting like single pages, like the data-role = content or page - but without using jquery or jqmobile as I find those frameworks too big and much too complicated for the simple tasks I require. They also come heavily designed, that I dont want to use.
I saw these posts, but they are looking for similar transitions, not the basic functionality
JQuery mobile page transition without jQuery mobile
jQuery Mobile CSS3 Page Transitions without jQuery Mobile Library
But these posts lead me to believe there is a simple and light answer out there to mimic the functionality. Can anyone suggest some Javascript, HTML5, or even a light framework that does this?
Thanks
How about just having a look at the JQM source code? That's the nice thing about open-source projects... ;-)
Sourcecode is pretty small, I am sure you'll be able to manually extract whatever fits your needs.

jQuery: Plain HTML/CSS with core jQuery or jQuery UI for a blog?

I'm about to implement a blog, and I'm pretty sure I want to go with jQuery, because I really like it.
However, when I last did jQuery, I just did plain HTML/CSS and then improved the user experience with what jQuery has to offer. Meanwhile, jQuery UI has been released, and it looks like a full-fledged user interface framework like Ext JS.
Can I benefit from jQuery UI with a rather simple website like this, or is it more geared towards web applications like GMail?
jQuery UI is quite large and seems to have lots and lots of CSS in their skins. I'm a bit worried that I would have to write/adjust tons of CSS to make the blog look like I want it to. If I did plain HTML/CSS, I would have fine-grained control over the appereance.
Edit: I'll stress again that I'm specifically wondering whether jQuery UI is intended for and useful for a simple website like a blog. It is no doubt useful for more sophisticated web applications.
Edit 2: Thanks for all your answers, too bad I couldn't accept more than one. By now I realised that jQuery UI is not like I expected a full-fledged web application framework, but rather a bunch of useful utilities on top of jQuery. I think I'll use it, if only for Draggable, Droppable and Selectable.
You don't necessarily need to write loads of CSS if you don't like the supplied styles.
The jQuery UI ThemeRoller is a very good web-based GUI for customising the look of the widgets. It then allows you to download your own customised (and minified) .css and .js files containing just the widgets you need.
I suggest that you should have a play with that first and see if you can make the demo widgets look how you'd like them before making any decision.
You can have both... I have! Where I am using widgets (datepicker) etc, I use jquery ui, besides visit : http://jqueryui.com/themeroller/ and you can customize the colours quite easily. The UI themes are recommended strongly if you use the widgets as the widgets rely on the css defined therein to move things around, for display and selection, handling rezise of widgets.
You can always build your site using html + css then add the ui theme later, as you said it will increase the user experience greatly... besides we always end up using 1 or 2 features then extend or find other suitable plugins.
As always, the answer is 'it depends'.
More specifically though, it depends on what kind of a UI you're planning on. If you find yourself coding functionality that's already there in jq UI go ahead and use it. They've got a handy theme roller plugin which will allow you to customize the skin to perfectly match the look of your site, so that is a non issue.
You might also want to include it all through a CDN (offered by google or MS) so that your site doesn't get slow downloading the (relatively) heavy initial payload.

Display tabs like FireFox's on my website

I want to implement with jQuery a tabbed interface for my website (like the firefox ones). They should also be able to be moved like the ones FireFox has.
If anyone knows of an already written library, please give me a link.
If you're already using jQuery, the jQuery UI Tabs has a sortable option for this.
Checkout the other demos for all the widgets there as well...in most cases it's not worth it to include the jQuery UI library for any 1 widget or effect...but if you can make use of a few of them, it's a nice library to work with. Of course there are alternatives out there, just throwing this as the simple/configurable option.
As a side note, it is jQuery UI....style it like you want.
ExtJS is more suitable for such interfaces. In the process of trying it out you will find many more amazing possibilities that it opens up. Also, it is very well written and a pleasure to work with.

Categories