I'm switching from using JQM and Phonegap to using Topcaot and a few smaller libraries to take care of transitions and such. One thing I haven't found a micro-library for is the navigation.
While many site I've seen say to create the UI and content dynamically through javascript, it does seem like a daunting task do to the amount of pages I would need to create. Similar to JQM, I want to be able to separate my different pages as different html files that ajax load them into the DOM, but in an optimized way that is fast and doesn't cary the weight of JQM.
TO anyones knowledge does such a library exist or would this be a library I would have to write? It doesn't seem like it would be an overly complicated task, especially if I would use jquery. Any ideas of help is appreciated.
try angularjs. Here there's an example with topcoat: http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/
Angularjs is very different from JQM but you should give it a try.
Otherwise, if you don't like angularjs you can find a more traditional approach at this page: http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
Hope this helps
Here you are - new plugin based on coenraets css transitional solution: https://github.com/linslin/pagingSlider
Features:
Paging with pagingSlider
default pageSlider actions
Pagebrowser
Totaly plugable like pageSlider
if you want, pagemenu to switch directly to a page
touch events
Consider looking at Topcoat Touch (Github Project), it is basically a micro library for transitions and events (5k minified and gzipped) -- full disclosure, I am the author of Topcoat Touch.
It is a very simple framework that uses Topcoat to create the UI, inspired by jQT and to a lesser extent jQuery Mobile. It can be either a single html document with multiple pages contained within the same document, or using a collection of controllers and templates. It uses a collection of optional libraries to provide most of the functionality for a mobile framework and has a generator for Yeoman to get the scaffolding up quickly.
I haven't used it, but Kendo UI Mobile is similar to JQM and may fit your needs: http://www.kendoui.com/mobile.aspx
Related
What is the difference between jQuery and jQuery UI? Are they both different frameworks? Is jQuery library needed to work jquery UI or both works standalone? what is difference between any jQuery tab plugin and jQuery UI Tab? which is better to use?
jQuery is the core library. jQueryUI is built on top of it. If you use jQueryUI, you must also include jQuery.
jQuery Tabs preceded jQueryUI library. jQueryUI Tabs is based on jQuery Tabs. The current version of jQuery Tabs is Tabs 3. If I recall correctly (I vaguely remember looking through the source code about a year ago), Tabs 3 is very similar to what's in jQueryUI. The jQueryUI version, of course, respects the Themeroller themes.
I used jQueryUI in one project. It has some nice features, but there are few widgets and it seems to be advancing at a glacial pace (seems like the same six widgets have been there for over a year). Maybe it'll get a second wind. If I recall, one of the things that bothered me is that in many of the widgets, there was no visible difference between the hover state and the click state.
So I would not recommend jQueryUI at this time for its widgets. You may want it for the effects and the draggable/dropable interactions handling.
The widgets in Google's Closure library and the widgets in ExtJS seem more useful, in my opinion.
Just browse to the jQuery UI site and read:
jQuery UI provides abstractions for
low-level interaction and animation,
advanced effects and high-level,
themeable widgets, built on top of the jQuery JavaScript Library, that you
can use to build highly interactive
web applications.
jQuery UI is built on top of jQuery. It offers cool user interface enhancements.
#2nd question > Use what you like, end-user- and developer-interface-wise.
You'll also discover that you can't live without jQuery. It's a crucial piece to almost any web application. And since it's footprint is so small you can get away with including on most if not all pages.
jQuery UI however is heavier with css and images. It can also be difficult to get the style to work with existing applications. I find myself using jQuery UI components some of the time and jQuery nearly all the time.
Let me start by saying I have read plenty of questions and blog posts relating to the use of combinations of backbone/jQuery mobile and comparisons of backbone/Sencha, and have actually had my head in this space for some time but still haven't found quite what I'm looking for.
I'm very familiar with Sencha and have used it for wrapped (phonegap etc.) apps in the past, and I really like it. However for a smaller code base for web projects and more control over browser compatibility and various other reasons it's not quite appropriate for certain tasks.
When I start trying to engineer mobile (but also desktop and tablet) backbone webapps from scratch I find I miss three key things
General mobile 'init', filling the screen etc. (although this is the easiest to replicate)
Tabbed, iOS-style, navigation (of course I can roll my own, but it seems silly)
Scrolling - both scrolling a piece of content, but especially the carousel and how the carousel is linked to the tabbed interface
I'm not massively bothered about mimicking each device's native OS style throughout the app, and in fact would prefer to (whilst following some sensible conventions) make them look a bit different.
Ember has flame and I've used that before, that's kind of the thing I'm looking for.
I know I can build up a toolkit of jQuery mobile, custom script, jQ plugins/iSroll, CSS libraries, backbone UI etc. and do like the idea of compiling my own 'stack' but for some reason it just doesn't feel right.
So, to bring this back around to more of an actual question. I guess I'm looking for ideally a single project that isn't specifically linked to a library - and in theory could run on it's own on a statically coded page if needs be (even though that wouldn't be the case for me now). Or perhaps some words from others who have been on a similar journey and perhaps ended up on the mix of libraries I mentioned earlier with why they decided this was the best solution.
I'm not looking to do anything too crazy, say something a bit like the old sencha oreilly example but using some carousels, and I'd cover the multiple devices and browsers with a mix of Responsive CSS and a bit of JS.
I'm going to continue looking at this myself too and report back if I find anything interesting
Cheers
EDIT
While looking into this, I realised its only really the carousel and scrolling that I really wanted from Sencha. I noticed that Cubiq has a nice slideview component that handles the carousel very neatly and with a small footprint. I found a stackoverflow answer about using this with the original iscroll for vertical scrolling. See my answer below for successfully using the two together
How to use iScroll4 with SwipeView?
This would need some tweaking to work appropriately on desktop. and I'd like to control it from a tabbed UI too. Anyway, I'm not near answering my own question but given this has had a couple of upvotes I'd post some of my thinking.
Quick edit
You can attach events for tabs to the slideview https://dl.dropbox.com/u/81328343/scroll/1.html but at the moment, it only animates for next/prev and not direct page (tab) access
Webix
Very big library of components.
I've used Twitter Boostrap with Backbone...
http://twitter.github.com/bootstrap/
I am working on creating a jQuery plugin and I have some questions regarding how to structure things:
1.How much HTML should the plugin have written and how much should it create through jQuery ?
Is it good to have written all of the HTML so that the entirety of the markup structure is visible when looking over the code ?
Or is it better to have written only the minimum amount of HTML so that it is very easy for the user to add/modify content and create all of the rest, bulky HTML through jQuery ?
Is there a recommended practice ? How are things done in professional plugins ?
Why should things be done in a certain way and what are the reasons behind it ?
2.How to balance the plugin options with the CSS ?
Should the plugin offer options that would affect the presentation of the plugin (options that would modify the stylesheet) or is it a better practice to have the user directly modify the stylesheet for presentational modifications and in the plugin only have options relating to the functionality ?
What are some guides regarding what options to offer in the plugin as to not step over CSS ?
Regarding my experiences, I have seen all of these in different places and plugins and that is why I am asking for opinions from experienced users and what are good practices and why.
1. How much HTML should the plugin have written and how much should it create through jQuery ?
According to the paradigms of progressive enhancement, there should be no markup which would be useless in case of no JS enabled. In other words - if your plugins needs some special markup and additional tags it should create them by itself.
The reasons for that is semantics. Additional plugin markup is useless for users (and bots) when there's no JS enabled and thus it should not be present at all.
Also keep in mind that developing a good JS plugin means that content will still be available when the plugin fails or JS is disabled. Moreover, you have to take additional care about making sure that your plugin is accessible. More on the topic of progressive enhancement covering also more advanced issues can be found for example in a book by The Filament Group.
2. How to balance the plugin options with the CSS ?
Do it as follows:
Content: HTML
Logic: JS
Presentation: CSS
Despite the fact it's changing now a bit (think CSS3 animations), options of the plugin may influence the way it works rather than the way it looks. That means your users should be able to config timings, delays, speed, number of element or whatever your plugin is doing through JS. But leave the presentational aspects in the CSS stylesheet. Use JS to change classes of elements rather than inline styles and let your users write whatever CSS they want. Obviously, don't forget to provide some default styling :)
I always recommend reading more on the topic in A List Apart. It's quite a theoretical article but absolutely a must-read for any front-end dev.
Tutsplus has a jQuery course with usefull videos.
http://tutsplus.com/lesson/head-first-into-plugin-development/
This is one of the videos that explaines how te make a plugin.
There are a lot of ways to create a plugin, but this is a good one.
Do you know of a tab widget that has built-in drag+drop reordering? I'm building an editor-like interface and want to allow the user to reorder their tabs.
So far I've been using ExtJS with a community plugin, but it's buggy and usually needs updating with every new ExtJS release.
Is something like this what you're looking for?
I'd definitely use jQuery and jQuery UI as a base if I was trying to do what you are. The solid support structure and wealth of tutorials around jQuery is unbeatable!
Of course this is if you don't mind the weight of another javascript framework or having to recode some of your interface.
On a slight tangent, if you want your interface to remember a user's preferences you'll need a server-side language. Alternatively, use the jQuery cookie plugin to store preferences between page loads.
There's a draggable tab widget based on YUI lib just for that.
If you're not concerned about adding another javascript lib to your application, I think it's an interesting alternative. You can even drag and drop tabs from other containers (I didn't see this feature on your ExtJS plugin by the way).
There are attempts to make jquery tabs drag and drop able. While it is not drag and dropable out of the box you could make them yourself in jquery-ui.
Here are some resources that tried it:
Resource 1
Resource 2
What is the difference between jQuery and jQuery UI? Are they both different frameworks? Is jQuery library needed to work jquery UI or both works standalone? what is difference between any jQuery tab plugin and jQuery UI Tab? which is better to use?
jQuery is the core library. jQueryUI is built on top of it. If you use jQueryUI, you must also include jQuery.
jQuery Tabs preceded jQueryUI library. jQueryUI Tabs is based on jQuery Tabs. The current version of jQuery Tabs is Tabs 3. If I recall correctly (I vaguely remember looking through the source code about a year ago), Tabs 3 is very similar to what's in jQueryUI. The jQueryUI version, of course, respects the Themeroller themes.
I used jQueryUI in one project. It has some nice features, but there are few widgets and it seems to be advancing at a glacial pace (seems like the same six widgets have been there for over a year). Maybe it'll get a second wind. If I recall, one of the things that bothered me is that in many of the widgets, there was no visible difference between the hover state and the click state.
So I would not recommend jQueryUI at this time for its widgets. You may want it for the effects and the draggable/dropable interactions handling.
The widgets in Google's Closure library and the widgets in ExtJS seem more useful, in my opinion.
Just browse to the jQuery UI site and read:
jQuery UI provides abstractions for
low-level interaction and animation,
advanced effects and high-level,
themeable widgets, built on top of the jQuery JavaScript Library, that you
can use to build highly interactive
web applications.
jQuery UI is built on top of jQuery. It offers cool user interface enhancements.
#2nd question > Use what you like, end-user- and developer-interface-wise.
You'll also discover that you can't live without jQuery. It's a crucial piece to almost any web application. And since it's footprint is so small you can get away with including on most if not all pages.
jQuery UI however is heavier with css and images. It can also be difficult to get the style to work with existing applications. I find myself using jQuery UI components some of the time and jQuery nearly all the time.