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
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.
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
Background
I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics:
- Dashboard is comprised of draggable widgets arranged in a grid layout
- Widgets have a drag handle which can be clicked by the user to start dragging
- Widgets can be re-ordered by dragging and dropping the widget
Question
Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.
Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)
EDIT This one looks even better and more maintained! GRID by UberVU
Next one on the list is gridster.js
PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.
You can easily implement this.
You will get required info from
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
and
http://james.padolsey.com/javascript/inettuts-with-cookies/
First what comes to head is jQuery UI.
Use HTML 5
http://html5doctor.com/native-drag-and-drop/
You can find a lot of info here:
http://jqueryui.com/demos/draggable/
Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1
I am pretty sure this one is going to make you happy!
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
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.
I was looking at what YUI had, http://developer.yahoo.com/yui/examples/button/btn_example07.html
Can anyone recommend a library/plugin they used to progressively enhance native select element dropdowns at the request of a client? I know it's impossible to style a dropdown in IE, so it's either this or Flash which I don't want to get into.
I'll still leave the regular dropdown in the source for non-JS users and serve the dropdown replica built out of non-form control elements.
Assuming you mean a different library than YUI, I like dojo's dijit.form.FilteringSelect.
Turns out it wasn't all that difficult, pretty much the same logic as a dropdown menu except with a little extra for the toggling bit.