1. Sticky

A jQuery plugin that gives you the ability to make any element on your page always stay visible.

Source + Demo

2. stickyMojo

A contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+.

Source

3. Sticky Sidebar jQuery plugin

Allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll.

SourceDemo

4. lockfixed jQuery plugin

A jQuery plugin which allows for DOM elements to be positioned anywhere on the page, and lock within the user’s viewport when scrolling.

SourceDemo

5. stickyfloat

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs.

SourceDemo

6. Sticky Footer

This Sticky Footer can contain any kind of content and is ready to be used in your website. You can build your own menu and use from 1 to 12 columns to display your content.

SourceDemo

7. Sticklr

Sticky Side Panel CSS3 + jQuery Plugin

SourceDemo

8. fixedposition

A powerful CSS attribute, that allows you to fix a HTML element to a position on the page, irrespective of user interaction. Put simply, if the user scrolls, it stays put.

Source + Demo

9. jQuery Sticky Sidebar

Sticky sidebar for your content.

Source + Demo

10. jquery.fixer.js

Fix element like any other plugins it do.

Source + Demo

11. StickyScroll

A jQuery plugin for creating elements that ‘stick’ to the top of the window when scrolling down the page.

SourceDemo

12. Sticky-Element

jQuery plugin to make an element scroll with the page inside the boundaries of a specified container or the window.

SourceDemo

http://knockoutjs.com/

Knockout.js를 활용한 싱글 페이지 애플리케이션 개발

- 샘플 소스 : https://github.com/RayKwon/spa-maso-sample

- 데모 사이트 : http://masospa.azurewebsites.net

샘플 소스를 개발한 환경은 다음과 같다.

- 비주얼 스튜디오 2012 업데이트 1

- ASP.NET and Web Tools 2012.2

- Nuget v2.1.0 이상

- Node.js(v0.8.14) with NPM(v1.1.65)

http://jqueryui.com/slider/#side-scroll

jQuery UI

Mobile Programming Models

Web
Web applications on mobile devices developed using the web model are accessed using a mobile browser.

A primary advantage of the web model is its multiple platform support, allowing your app to reach the broadest audience of mobile users. The code written using standard web application development languages can deliver a similar end user experience across multiple devices and operating systems. The web model approach also permits your development team to be more agile in addressing and fixing problems. Updates to the mobile application can be made easily over the web as opposed to having to release an update through the App Store for iOS apps and Google’s Market Place for Android apps.

Despite the potential of web technology in the mobile arena, there are limitations. One challenge facing developers is emulating the user interface and experience of a native application within the browser and providing cross browser compatibility. It is worth noting, however, there is a growing ecosystem of third party tools and frameworks such as Dojo Mobile, jQuery Mobile, Zurb Foundation, Less Framework 4, and ResponsiveJS providing developers with solutions to common interface problems. Web apps cannot access all of the device’s hardware and software, such as the address book or the notifications in non-webkit supported browsers. Creating a hybrid application, discussed in the next section, can circumvent these disadvantages.

A web approach is ideal if you are trying to reach the largest audience and not isolate a subset of your user base. The web model is also optimal if development and maintenance costs are paramount. Web development skills are more common than native development skill sets. Many organizations already possess in-house developers with experience in web application development.

Hybrid
Hybrid applications are programmed using the same web technologies as the web model, but are packaged and distributed as native applications. A hybrid application is essentially a web application wrapped in a native shell. Hybrid applications can leverage a Web Developer’s existing skillset and tap into a limited subset of the device’s native hardware. Several popular mobile web application frameworks are PhoneGap, Sencha Touch, and Appcelerator Titanium.

There is a caveat, hybrid applications must still be compiled and deployed through the target platform’s method of distribution. For instance, to distribute your app through the Apple App Store, you would need to build and compile your application using XCode and adhere to Apple’s guidelines and clandestine approval process. To target Android devices, you would further need to compile and distribute your application using Eclipse and the Android SDK then distribute your application in Google’s Market Place. It is worth noting, Adobe’s PhoneGap Build system enables developers to upload their assets (HTML5, CSS, JavaScript) to Adobe’s Cloud service and have their apps compiled using the latest PhoneGap SDK.

A hybrid approach is recommended if your application requires access to native functionality such as the device’s address book, or file system and it is essential for your application to target multiple platforms in addition to long-term maintenance and feature enhancements.

Esri’s ArcGIS API for JavaScript can be used to build hybrid applications. The same workflow for building your application using the web model can be applied to the hybrid model. You would import the compact build of the Esri JS API and any additional libraries (Dojo, jQuery, etc). Cascading style sheets can still be used to apply styles to your application’s user interface. Testing your hybrid application would require running it in a simulator or a device.

Native
Native applications are binary executable programs installed on the device. There is a different SDK for each mobile operating system. Native application development must use a language specific to the platform in which the application is deployed.

Although the native model excels in performance and low-level device hardware access, a critical disadvantage of native development is portability. Code written for one mobile operating system cannot be reused for another mobile operating system. A team would need to learn multiple programming languages, software development kits (Esri offers the iOS, Android, and Windows SDK) and manage several codebases. This makes development and maintenance potentially costly and time consuming.

The native model may be the best approach for your organization if the user interface requirements are strict and the native functionality essential.

Another scenario would be a case where organizations intend to only release their app to a subset of the target audience, and therefore target only a single mobile OS. For example, consider a private internal application only available to employees issued a specific mobile device (i.e. iPhone). This would be an instance where it may not make sense to develop for multiple platforms.

The following table summarizes some of the benefits and limitations of each of the three models and also serves as a decision matrix in helping you chose the most appropriate model for you application.

http://meteor.com/

Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you're an expert developer or just getting started.

특징

Pure Javascript

Live Page updates

clean, powerful data synchronization

Latency compensation

Hot code Pushes

Sensitive code runs in privileged environment

Fully self-contained application bundles

Interoperability

Smart packages

Examples : http://meteor.com/examples/leaderboard

• Watch the Screencast

   

• Try the Examples

   

• Read the Documentation

   

• Follow @meteorjs

   

Collection of jQuery Drag and Drop Plugins

http://smashinghub.com/collection-of-jquery-drag-and-drop-plugins.htm

You May Like This Responsive jQuery Slider Plugins, jQuery Carousel Plugins, jQuery Parallax and Scrolling Effect Plugins, Zoom Effects with jQuery Plugins, jQuery Visual Effects Tutorials, Awesome jQuery Plugins and jQuery Tools/Tricks

Collection of jQuery Drag and Drop Plugins

jquery.event.drag

jquery.event.drag is an awesome jQuery special event plugin which lets you add sophisticated drag interactions to any of the elements! Great, right?

How to mimic the iGoogle Interface

Everyone loves iGoogle interface and wants to imitate it. This one is a great tutorial in which you will be taught creating customizable iGoogle like interface with widgets. It is a really easy to follow tutorial and anyone can learn from it.

PPDRAG

This one is a great plugin which imitates the interface of jQuery UI’s Draggable. Presently small subsets of its options are supported.

Resizable

Resizable is a handy plugin which has the ability of resizing rectangles with content with ease.

Jquery Iviewer

It is a jquery UI widget which represents photo component which is used for loading and viewing photos. It allows zooming in a photo and dragging it to the container using your mouse.

Drag’n Drop With jQuery And PHP

Applying drag and drop was once very tough, but now thanks to JavaScript frameworks it is not that tough. Here it is given how you can do it using jQuery & jQuery UI.

MapBox

This jQuery plugin lets you create small scale, zoomable, draggable maps with multiple layers of content. Applying the Framework to games, development plans, or any other layout is possible.

Table Drag and Drop JQuery plugin

Making the rows within a table drag and drop is not an easy task and cannot be achieved through the usual drag and drop tools for many reason, such as the need to move the complete row and not only the cell which gets the mouse events. You are also required to have a certain code for re-parenting a row. Unfortunately the effects such as fade In/fade Out are not very compatible with table rows on all browsers, thus we are required to choose simpler effects.

Dragscrollable

This fabulous plugin allows mimicking the effect as in Google maps i.e., dragging the contents of a div acting as a viewport. Simple, yet amazing!

Interface plugin for jQuery

This plugin boasts a collection of amazing interface components that uses the JavaScript library jQuery. Using this plugin you can create web apps and interface with ease.

Draggable

This one is a simple plugin which simply does what its name says: it allows making chosen elements draggable by mouse.

jQuery: Customizable layout using drag and drop [Examples]

This one shows how and where the things would be positioned after being dropped..

NestedSortable

This one lets you sort vertically and nest elements simultaneously by utilizing drag and drop. You can set it up like a regular Sortable. It allows using most of its options.

animaDrag

animaDrag is a fabulous plugin which is quite small. This drag and drop plugin is not dependent on the jQuery UI framework. Using this plugin you can ease the draggable by jQuery animation.

Ajax Upload; A file upload script with progress-bar, drag-and-drop

This is a really nice plugin which utilizes XHR in order to upload multiple files with progress-bar

jqDnR

jqDnR is a really tiny jQuery plugin which allows dragging, dropping, and resizing elements easily.

(mb)ImgNavigator

This one offers a photo gallery which lets you view large photos by utilizing a navigator map and drag. Dragging the large photo in the display by the navigator or the photo itself is also possible.

Sortable Lists

This one is a really nice script which lets you rearrange a list by dragging and dropping.

Drag-and-Drop with jQuery: Your Essential Guide

If you want to learn using jQuery, jQuery UI Draggable and Droppable plugins, then you should definitely check this one out. It also teaches creating drag-and-drop interfaces for your web pages. It also boasts a drag and drop card game example!

Ultra small code to drag everything in HTML pages

This one is a really simple and and quick script which you can use and customize.

$.event.special.drag

As the name suggests, this one is a jQuery special event implementation of a drag event model. Developers who don’t want a complex script with a lot of different options will find this one really useful. It makes managing drag events easy as it takes care of the DOM events after you have bound a “drag” event handler, and it triggers other handlers at the right time.

jQuery mb.containerPlus

This one is an amazing plugin which allows creating full featured containers. You can set the container to be draggable, resizable, collapsable and minimizable.

CropZoom

As the name suggests, this plugin allows cropping a selected part of a photo. Zooming in or zooming out, dragging or rotating a photo is possible too.

jQuery TextAreaResizer plugin

As the name suggests, this plugin lets you extend the text area where ever you want!

jQuery List DragSort

This one is a handy little plugin that allows sorting lists by dragging and dropping.