What is the difference between jquery and jquery UI? - javascript

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.

Related

Simple To Do or Notes List in JQuery - why is button and code not working? Unable to spot the error [duplicate]

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.

Topcoat/Phonegap Navigation

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

Easiest javascript library for making custom tabs?

I am interested in making a tabbed display on a web page I am working on. I need to apply my own styles, so I would like to find a javascript library that provides very little styling out of the box and makes customization as easy as possible.
Features I would like:
Specify the Image used for the tab.
Tabs can re-size to fix the text inside of them.
Relatively easy to apply my own styles.
I looked at jQuery UI Tabs but it does not seem like it would be too easy to apply my own styles if I don't use their tools to do it.
I also looked at jQuery Tools, which seemed a little easier to customize, but appears to require that you use fixed length images for the tabs.
Can anyone recommend a good js library for creating customized tabbed navigation? Am I just making customization of the two libraries mentioned above harder than it needs to be?
This is a super easy walk-through to create custom tabs using jQuery, I followed it once and haven't used any other tabs since:
Custom jQuery Tabs | Soh Tanaka
I know it can be tempting to often use libraries for something like this, but it is very straightforward and you'll know all about how they work, which will allow you customize them far easier than nearly other plug-ins.
With jQuery-UI you can easily change the styles with css, you do not need any fancy tools ^_^

Javascript tabs widget with drag and drop reordering

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

Creating a Draggable Widget System

I'm looking to create a widget system, somewhat like what WordPress has.
Please suggest what script would be the best for this. I've planned to use jQuery UI for this, but would like to listen to other suggestions as well.
Go with Jquery. We've implemented an entire pageflakes-esque drag/droppable widget system on our customizable homepage Faxo Search. We couldn't be more pleased with jquery and jquery UI. We looked at other libraries and decided jquery had the largest potential. It's extremely expressive and the code is tight and efficient. We actually migrated from Prototype.
Scriptaculous has a decent drag and drop implementation. It's based on Prototype which has a pretty good community.
jQuery's does seem to be a bit larger and a more active as of late so you may want to stick with its draggable library.

Categories

Resources