일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

'JQUERY'에 해당되는 글 21건

2012.03.15 ExtJS 간단정리
2011.12.20 jQuery UI로 달력과 날짜입력기(DatePicker)를 붙여보기.
2011.12.13 XML Parsing with jQuery3
2011.08.08 Awesome Techniques and Examples of Animation with jQuery
2010.12.29 Popular jQuery Plugins
2010.12.29 40 Useful jQuery Techniques and Plugins
2010.10.21 jQuery 추천 플러그인 50선
2010.09.08 jQuery를 활용한 동적레이어 이동 및 정렬샘플
2010.09.03 jQuery iPod-style Drilldown Menu1
2010.09.03 10 Best jQuery Menu Plugins3

2012. 3. 15. 09:10 JQUERY

ExtJS 간단정리

1206052?print=1

ExtJs란

ExtJs는 웹애플리케이션을 만들기위한 client-side-JavaScript framework이다. JackSolocum이 Yahoo! User Interface (YUI) library의 확장으로 만들기 시작했으며 Yui-ext란 Project명으로 빠르게 성장했다.

라이센스

ExtJS는 개발목적의 오픈소스로 제공되는 LGPL 라이센스와 로얄티프리 커머셜 라이센스로 구분된다.( licensing page )
상업용 라이센스는 SVN 접속이 허락되며 전화/팩스 및 이메일로 지원을 받을수 있는것이 고작(?)이다.

호환되는 서버 플랫폼

PHP,Ruby on Rails (Embeded로 지원), .NET, Java 등 여러가지 서버 플랫폼을 지원한다. 사이트( server-side frameworks) 를 참조하기 바란다.

ExtJS를 사용하기 위해 요구되는 라이브러리

1.0.1a 버전에서는 YUI, jQuery or Prototype/Script.aculo.us. 가 반드시 필요했으나 1.1에서는 Ext adapter를 채택하여 더이상 다른 외부 라이브러리 없이 구동할수 있다. 또한 외부 라이브러리를 사용하고 싶다면 해당 라이브러리 어답터가 별도로 구비되어 있으며 Extension Mode로 제공되는 기타 다른 라이브러리를 참조할수가 있다.

Base Library	Include Order	Get Library
Ext Standalone	ext-base.js ext-all.js (or your choice of files)	http://www.extjs.com/download
Yahoo! UI (.12+)	yui-utilities.js (or your choice of YUI base files) ext-yui-adapter.js ext-all.js (or your choice of files)	http://developer.yahoo.com/yui/
jQuery (1.1+)	jquery.js jquery-plugins.js // required jQuery plugins ext-jquery-adapter.js ext-all.js (or your choice of files)	http://jquery.com/ http://docs.jquery.com/Plugins
Prototype (1.5+) / Scriptaculous (1.7+)	prototype.js scriptaculous.js?load=effects (or whatever you want to load) ext-prototype-adapter.js ext-all.js (or your choice of files)	http://www.prototypejs.org/ http://script.aculo.us/

3-party adapters와의 호환시 이슈사항

jQuery에서의 애니메이션기능(하이라이팅기능과 같은) 은 다음 사이트를 참조하라. References: 1, 2
DatePicker와 같은 jQuery버그를 해결하는 방안 References: 1, 2

에러상황에 따른 대처

최대한 사용하는 버전의 API documentation. 를 이용한다.
최신의 버전으로 유지하고 해당 사이트를 항상 방문해서 release나 bugpatch상황을 주시한다.
브레이스 ( { )나 null을 리턴하는 경우 캐리지 리턴값을 주의한다. 아래와 같이 return 뒤에 한줄을 띈 ( { )는 에러를 발생시킨다. (헉~ 자바스크립트 포매터가 위험하겠군...)

var myExample = function()
{
    return {
        foo: 'bar',
        boo: 'far'
   }
};

위의 코드는 아래와 같이 작성해야 한다.

var myExample = function()
{
   return {
        foo: 'bar',
        boo: 'far'
   }
};

만일 여의치 않다면 다음과 같이 대처한다.

개발시에는 ext-all-debug.js 를 사용하여 해당 소스 추적이 쉽게 한다. 단 운영시에는 ext-all.js로 obfuscated된 버전으로 사용한다.
되도록이면 스크립트 디버거를 사용하도록 한다.
Firefox Firebug : 사용법( How-to: using Firebug to debug your script )
IE Companion JS
http://blog.naver.com/techbug 사이트에서 확인가능 ^^;

다른 URL혹은 domain이 틀린 사이트에서 데이타를 가지고 오고 싶을때

아래와 같이 HttpProxy보다는 ScriptTagProxy를 사용한다.

var proxy = new Ext.data.HttpProxy({
        url: '/DoSearch.php'
});


//  Add the HTTP parameter searchTerm to the request
proxy.on('beforeload', function(p, params){
        params.searchTerm = searchValue;
});

Hidden Field 표시하는법

See http://extjs.com/forum/showthread.php?t=11698#2 or http://extjs.com/forum/showthread.php?t=6710#2

그리드의 셀에 클릭이벤트 핸들러 사용하는법(가장 많이 헷갈리고 많이 사용하는 것)

function(grid, rowIndex, columnIndex, e){
   var record = grid.getStore().getAt(rowIndex);  // 레코드의 Row를 가져온다.
   var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // 컬럼의 필드명을 가져온다.
   var data = record.get(fieldName);
}

Ajax로 불러온 마크업중의 스크립트가 실행되지 않을때

Ext.Updater.defaults.loadScripts나 Updater.update 메쏘드나 Element.update 메쏘드 사용

그리드의 Row를 각각 틀리게 표현하고 싶을때 (getRowClass를 사용한 expander사용)

http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridView&member=getRowClass

load()로 빈 데이타스토어(getCount()==0)를 불러올때

HttpProxy나 ScriptTagProxy와 같이 remote data 를 사용할때 Store.load() 는 비동기로 호출되며 서버블로킹없이 즉시 요청한다. "load" 와 "loadexception"이벤트로 쉽게 작업을 할수 있다. 이후 Grid Data Load에서 설명 ^^

Ext.get으로 컴포넌트 불러올때

Ext.get 는 단지 HTML Element의 객체를 가져온다. 즉, document.getElementById와 같다.
판넬이나 폼판넬등 컴포넌트를 불러올때는 Ext.getCmp를 사용해야 한다.

tree Node에서 아이콘 표시하는법

myNode.appendChild(new AsyncTreeNode({
        text: "A folder",
        iconCls: "folder"
});

CSS의 class seletor를 이용한다. (CSS 표준을 항상 염두해 둘것....)

.x-tree-node img.folder, .x-tree-node-collapsed img.folder{
   background: url("../images/default/tree/folder.gif");
}


.x-tree-node-expanded img.folder{
   background: url("../images/default/tree/folder-open.gif");
}

"XX has no properties"라는 에러가 떨어질때

해당 엘리먼트 id값을 찾을수 없다는 얘기다. 아래에서는 id='save-button'를 가진 객체를 찾을수 없다는 얘기다.

// constructors:
var tb = new Ext.Toolbar('toolbar');


// creating Element references:
var saveBtn = Ext.get('save-button');

<div id="toolbar"></div>
<input id="save-button" type="button" value="Save" />

extjs.com/s.gif를 계속 찾고 있다면 아래와 같이 한다.

1x1pixel짜리 투명이미지를 절케 표시하고 있다. 잘 해두도록...

Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/aero/s.gif';  // 1.1
Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/default/s.gif';  // 2.0

설명서를 잘 읽어보도록...반드시....

익칠이(IE)에서는 안돌아가는데 불여우(FF)에서 잘 돌아갈때

쉼표를 잘 찾아보도록....

testFunc = function(){
   return{
        titlebar: true,                            
        collapsible: true,  // <--- BOOM goes the comma! :D
   }
}

JSLint를 이용하면 쉽게 찾을수 있다.

가끔씩 깨진 화면들이 나올때

반드시 해당 컴포넌트(판넬,폼판넬, 콤보박스, 그리드 판넬)의 ID값을 반드시 입력해 준다. 또한 같은화면에 같은 ID값을 가진 객체가 있는지 반드시 확인한다.

저작자표시

posted by Sunny's

2011. 12. 20. 09:10 JQUERY

jQuery UI로 달력과 날짜입력기(DatePicker)를 붙여보기.

자바스크립트 라이브러리인 jQuery UI 위젯(Widgets)을 이용해서 달력(Calendar)과 날짜입력기(DatePicker)를 내 블로그나 홈페이지에 붙여 활용해보세요. 쓸만한 달력을 직접 만들려면 상당한 공을 드려야 하지만 jQuery UI 위젯을 활용하면 손쉽게 달력을 이용할 수 있을 뿐만 아니라 다양한 설정도 할 수 있으며 스킨도 비교적 손쉽게 교체할 수 있습니다. 하단 예제 소스 코드와 실행 화면을 참고하시면 사용법을 대략 짐작하실 수 있을 것입니다.
참고로 자바스크립트 프레임워크 라이브러리에는 Prototype, Script.aculo.us, jQuery, YUI, Dojo Toolkit, Ext JS, Google Web Toolkit, MooTools 등이 있습니다. 그리고 달력을 직접 제작해보려면 이전에 소개한 "PHP 또는 자바스크립트로 달력 만들기 소스 코드" 게시물을 참고하세요.

[jQuery UI 홈페이지]
http://ui.jquery.com/
http://ui.jquery.com/demos/datepicker

[jQuery UI DatePicker 실행 화면]
http://www.hompydesign.com/javascript/calendar/

[jQuery UI DatePicker 예제 소스 코드]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Datepicker</title>
<link type="text/css" href="/ui/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/ui/ui.core.js"></script>
<script type="text/javascript" src="/ui/effects.core.js"></script>
<script type="text/javascript" src="/ui/effects.blind.js"></script>
<script type="text/javascript" src="/ui/effects.drop.js"></script>
<script type="text/javascript" src="/ui/effects.explode.js"></script>
<script type="text/javascript" src="/ui/ui.datepicker.js"></script>
<style>
body {font-size: 62.5%; font-family:"Dotum", "Tahoma";}
.body {width:440px; height:280px; border:1px solid #CCCCCC; padding:10px; background-color:#FAFDE2}
.demo {width:330px; border:1px solid #CCCCCC; padding:10px; background-color:#FFFFFF}
.text {font-size:12px; margin-right:4px; width:80px; line-height:20px;}
.datepicker_input1 {border:1px solid #999999; margin-right:4px; width:70px;}
.datepicker_input2 {border:1px solid #999999; margin-right:4px; width:70px;}
.datepicker1_div {margin-right:10px; float:left;}
</style>
<script type="text/javascript">
$.datepicker.setDefaults({
//monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
//dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
//showMonthAfterYear:true,
dateFormat: 'yy-mm-dd',
buttonImageOnly: true,
buttonText: "달력",
buttonImage: "/ui/images/calendar.gif"
});
$(document).ready(function(){
$("#datepicker2").val($.datepicker.formatDate($.datepicker.ATOM, new Date(2009, 1 - 1, 18)));
$("#datepicker1").datepicker({
inline: true,
defaultDate: new Date(2009, 1 - 1, 18),
onSelect: function(date) { $("#datepicker2").val(date); }
})
$("#datepicker2").datepicker({
defaultDate: new Date(2009, 1 - 1, 27),
showOn: "both", // focus, button, both
showAnim: "blind", // blind, clip, drop, explode, fold, puff, slide, scale, size, pulsate, bounce, highlight, shake, transfer
showOptions: {direction: 'horizontal'},
duration: 200
})
$("#datepicker3").datepicker({
defaultDate: new Date(2009, 1 - 1, 28),
showOn: "both", // focus, button, both
showAnim: "drop", // blind, clip, drop, explode, fold, puff, slide, scale, size, pulsate, bounce, highlight, shake, transfer
showOptions: {direction: 'horizontal'},
duration: 200
})
$("#datepicker4").datepicker({
defaultDate: new Date(2009, 1 - 1, 29),
showOn: "button", // focus, button, both
showAnim: "explode",
showOptions: {pieces: 4},
duration: 500
})
$(".datepicker_input2").datepicker({
defaultDate: new Date(2009, 1 - 1, 30),
showOn: "both", // focus, button, both
showAnim: "show", // show, fadeIn, slideDown
duration: 200
})
});
</script>
</head>
<body>
<div class="body">
<div class="demo">
<div id="datepicker1" class="datepicker1_div" /></div>
<span class="text">날짜</span> <input type="text" id="datepicker2" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" id="datepicker3" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" id="datepicker4" class="datepicker_input1"><br />
<span class="text">날짜</span> <input type="text" class="datepicker_input2"><br />
</div>
<br />
<span class="text">
jQuery UI Datepicker<br />
jQuery UI 날짜 입력기<br />
jQuery UI Calendar, 달력<br />
</span>
</div>
</body>
</html>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/566

저작자표시

posted by Sunny's

2011. 12. 13. 11:33 JQUERY

XML Parsing with jQuery

XML is an important part of AJAX. Heck, it's right in the name, "Asynchronous JavaScript and XML", so knowing how to parse XML is equally important. This tutorial will demonstrate how to parse XML using jQuery that should cover almost all cases you'd typically run into.

Using jQuery to parse XML is vaguely reminiscent of LINQ in the recent .NET frameworks. That's a good thing, since LINQ made parsing XML in .NET vastly easier than previous techniques. With jQuery, when you receive XML from a callback, you're not actually getting raw text, you're actually getting a DOM (document object model) that jQuery can traverse very quickly and efficiently to give you the data you need.

Let's start by looking at the example XML document we'll be parsing today. I made a file that contains most things you'd see in a typical XML document - attributes, nested tags, and collections.

<?xml version="1.0" encoding="utf-8" ?>

<RecentTutorials>

<Tutorial author="The Reddest">

<Title>Silverlight and the Netflix API</Title>

<Categories>

<Category>Tutorials</Category>

<Category>Silverlight 2.0</Category>

<Category>Silverlight</Category>

<Category>C#</Category>

<Category>XAML</Category>

</Categories>

<Date>1/13/2009</Date>

</Tutorial>

<Tutorial author="The Hairiest">

<Title>Cake PHP 4 - Saving and Validating Data</Title>

<Categories>

<Category>Tutorials</Category>

<Category>CakePHP</Category>

<Category>PHP</Category>

</Categories>

<Date>1/12/2009</Date>

</Tutorial>

<Tutorial author="The Tallest">

<Title>Silverlight 2 - Using initParams</Title>

<Categories>

<Category>Tutorials</Category>

<Category>Silverlight 2.0</Category>

<Category>Silverlight</Category>

<Category>C#</Category>

<Category>HTML</Category>

</Categories>

<Date>1/6/2009</Date>

</Tutorial>

<Tutorial author="The Fattest">

<Title>Controlling iTunes with AutoHotkey</Title>

<Categories>

<Category>Tutorials</Category>

<Category>AutoHotkey</Category>

</Categories>

<Date>12/12/2008</Date>

</Tutorial>

</RecentTutorials>

The first thing you're going to have to do is write some jQuery to request the XML document. This is a very simple AJAX request for the file.

$(document).ready(function()

{

$.ajax({

type: "GET",

url: "jquery_xml.xml",

dataType: "xml",

success: parseXml

});

});

Now that that's out of the way, we can start parsing the XML. As you can see, when the request succeeds, the function parseXML is called. That's where I'm going to put my code. Let's start by finding the author of each tutorial, which are stored as attributes on the Tutorial tag.

function parseXml(xml)

{

//find every Tutorial and print the author

$(xml).find("Tutorial").each(function()

{

$("#output").append($(this).attr("author") + "<br />");

});

// Output:

// The Reddest

// The Hairiest

// The Tallest

// The Fattest

}

The quickest way to parse an XML document is to make use of jQuery's powerful selector system, so the first thing I do is call find to get a collection of every Tutorial element. Then I call each, which executes the supplied function on every element. Inside the function body, this now points to a Tutorial element. To get an attribute's value, I simply call attr and pass it the name of what attribute I want. In this example, I have a simple HTML span object with an id of "output". I call append on this element to populate it with data. You would probably do something a little more exciting, but I just wanted a simple way to display the results.

See how easy that is? Let's now look at a slightly more complicated one. Here I want to print the publish date of each tutorial followed by the title.

//print the date followed by the title of each tutorial

$(xml).find("Tutorial").each(function()

{

$("#output").append($(this).find("Date").text());

$("#output").append(": " + $(this).find("Title").text() + "<br />");

});

// Output:

// 1/13/2009: Silverlight and the Netflix API

// 1/12/2009: Cake PHP 4 - Saving and Validating Data

// 1/6/2009: Silverlight 2 - Using initParams

// 12/12/2008: Controlling iTunes with AutoHotkey

This is very similar to the previous example, except now the values are stored inside element text instead of attributes. Again, I want to go through every Tutorial tag, so I first use find and each. Once I'm inside a Tutorial, I need to find the Date, so I use find again. To get the text inside an XML element, simply call text. I repeat the same process again for the Title, and that's it.

We've now parsed every piece of information except the categories that each tutorial belongs to. Here's the code to do that.

//print each tutorial title followed by their categories

$(xml).find("Tutorial").each(function()

{

$("#output").append($(this).find("Title").text() + "<br />");

$(this).find("Category").each(function()

{

$("#output").append($(this).text() + "<br />");

});

$("#output").append("<br />");

});

// Output:

// Silverlight and the Netflix API

// Tutorials

// Silverlight 2.0

// Silverlight

// C#

// XAML

// Cake PHP 4 - Saving and Validating Data

// Tutorials

// CakePHP

// PHP

// Silverlight 2 - Using initParams

// Tutorials

// Silverlight 2.0

// Silverlight

// C#

// HTML

// Controlling iTunes with AutoHotkey

// Tutorials

// AutoHotkey

Once again, I get every Tutorial by using find and each. I then get the Title in the same was as the previous example. Since a tutorial can belong to several categories, I call find and each to iterate over each Category element inside a tutorial. Once I'm inside a Category element, I simple print out its contents using the text function.

Being able to parse elements, attributes, and collections should cover almost every form of XML you'd ever see, and making use of jQuery selectors to get the job done makes parsing XML in JavaScript a breeze. That does it for this tutorial. Hopefully we all learned something about jQuery and XML.

출처 : http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery

저작자표시

posted by Sunny's

2011. 8. 8. 12:55 JQUERY

Awesome Techniques and Examples of Animation with jQuery

10 Awesome Techniques and Examples of Animation with jQuery

jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API.

In this article, we share with you some innovative uses of jQuery in animating web design elements. You’ll read about some interesting techniques, tutorials, and examples that will show you how to create similar effects on your own websites and web apps.

1. Puffing Smoke Effect in jQuery

This example by Dutch web developer Gaya Kessler features an impressive animation effect of cartoonish smoke emanating from factory smoke stacks. Kessler thoughtfully supplies a configurable jQuery plugin with instructions based on his site’s header, so that you may create a similar animation effect for your website.

Live Demo: Smoke Effect

2. Crafting an Animated Postcard

Sam Dunn of the web development duo, Build Internet, wrote a tutorial on how to create an animated landscape using transparent PNG images. The tutorial takes advantage of the popular jQuery Easing plugin to help with the animation and the setTimeout() JavaScript function to time the events accordingly.

Live Demo: Animated Postcard

3. Create a Realistic Hover Effect

In this tutorial, you will learn how to animate image elements in a smooth and fluid manner. The tutorial features objects that, when hovered on, rises upwards. In the live demo of the effect, notice how the reflections and shadows at the bottom also changes when the object lifts up; hence "realistic" in the name of the technique.

Live Demo: Realistic Hover Effect

4. Scrolling Background Effect

The creators of the site youlove.us shares their code (and explanation) for making a seamless vertical scrolling CSS background; featured on the site’s header. The script is also dependent on the user’s system time; the animation starts at a different position depending on whether you visit the site at night or in the morning, a nice touch.

Live Demo: youlove.us (web page header)

5. Multiple Animations with Glimmer

Glimmer, a JavaScript animation creation tool that leverages the jQuery library, has several live demonstrations for some of the things you can do with the app. For instance, with Glimmer, you can create cool animation sequences or make a spiffy and impressive rotating banner for your website.

Live Demos: Freestyle Sample, Image Sequence Sample, Fade Text Sample

6. jQuery Blend

jQuery Blend is a plugin for animating CSS background images. The project emphasizes on web development best practices such as progressive enhancement so that users with JavaScript disabled are still able to interact with your interface, albeit without the animation effects, making for a truly universal design.

Live Demo: website navigation with different options

7. Parallax Scrolling Background

In this jQuery tutorial, you will learn how to construct a Parallax Scrolling background – first popularized in web interfaces with the use of Flash. The technique involves div elements with CSS background images. The Parallax Scrolling technique requires the scrollTo plugin by Argentinean Web Developer and Game Programmer, Ariel Flesler.

Live Demo: Scrolling Clouds

8. Stunning Sliding Door Effect

Designer and Developer Kevin Liew shows other website builders how to create a striking animation effect where a top image splits up into four pieces, moving smoothly to the corners, and revealing another image beneath it. It’s an animation effect suited for interactive thumbnails of images.

Live Demo: Sliding Door Effect

9. Make Your Header Responses to Mouse Movements

In this jQuery animation technique, you will learn how to animate a set of images that reacts to the user’s mouse movements. When the user hovers over a set of images, the set begins to follow the mouse cursor. This technique can be adapted to many user interface related functions, or you can just use it to impart a memorable experience to your users.

Live Demo: parallax

10. Animated Header Using jQuery

This animated tutorial goes over a similar concept to the youlove.us example of vertically moving a large CSS background image. Illustrations on how the technique works will help readers grok the concept more fully. Devirtuoso, the author of the tutorial, goes through due diligence by offering an IE6 hack for backwards compatibility.

Live Demo: Animated Header

Can jQuery replace Flash? Do you know of other impressive uses of jQuery to animate page elements? Why don’t we talk about it in the comments? *Co-written by Jacob Gube

출처 : http://sixrevisions.com/javascript/10-awesome-techniques-and-examples-of-animation-with-jquery/

저작자표시

posted by Sunny's

2010. 12. 29. 13:08 JQUERY

Popular jQuery Plugins

Form

JQuery Key Filter(★★★★★)

View Demo » Download Plugin »
Description: This plugin filters keyboard input by specified regular expression.

JQuery Mask Input(★★★★)

View Demo » Download Plugin »
Description: This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

PassRoids(★★★)

View Demo » Download Plugin »
Description: The PassRoids (love the name) jQuery plugin was designed to allow simple integration of password strength measurement and verification and display it in a simple method to the end user. Installation requires minimal js and css code and can be setup in a matter of minutes.

JQuery AutoComplete(★★★)

View Demo » Download Plugin »
Description: It has many options and is quite easy to setup in your page.
You can pass advanced options as a JavaScript object, hashes etc.
It's easily to edit the style of the dropdown result box, there are a couple of css classes.

AutoComplete(★★)

View Demo » Download Plugin »
Description: Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

mcDropdown(★★★★)

View Demo » Download Plugin »
Description: A unique UI control that would allow users to select from a complex hierarchical tree of options. We wanted this control to be intuitive and it had to allow for both quick mouse and keyboard entry

Tooltips

vTip(★★★★★)

View Demo » Download Plugin »
Description: vTip is designed to quickly provide lightweight (706b js, 272b CSS, 270b image) tooltips, using jQuery any element with a class of "vtip" will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

Photos/Images/Galleries

AD Gallery (★★★★★)

View Demo »Download Plugin »
Description: AD gallery is similiar in functionality to Thickbox and Lightbox, but much better. It is a smooth and feature rich image gallery plugin, its two main features are the various transition effects and the auto scaling of images.

Create Featured Content Slider(★★★★★)

View Demo » Download Plugin »
Description: Here you will learn how to create an intuitive auto-playing content slider.

jQuery Infinite Carousel(★★★★)

View Tutorial » Download Plugin »
Description: This tutorial will walk through the fundamentals of the effect and how to recreate the scrolling carousel that works in the same way as the carousel that is on the Apple Mac ads page.

Create a Slick and Accessible Slideshow(★★★★)

View Demo » Download Plugin »
In this in-depth tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery).

MopSlider(★★)

View Demo » Download Plugin »
Description: The very cool looking MopSlider plugin is feature content slider that supports images, flash, html…almost anything.

Facebox(★★★★★)

View Demo » Download Plugin »
Description: Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

ThickBox (★★★★)

View Demo » Download Plugin »
Description: ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

ColorBox(★★★★)

View Demo » Download Plugin »
Description:ColorBox is a light-weight (9kb), easily customizable lightbox plugin for jQuery 1.3. It supports photos, photo groups, slideshow, ajax, inline, and iframed content.

Menus & Navigations

Smooth Navigational Menu(★★★★★)

View Demo » Download Plugin »
Description: Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

jQuery File Tree(★★★★★)

View Demo » Download Plugin »
Description: jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.
Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

jQuery Context Menu Plugin(★★★★)

View Demo » Download Plugin »
Description: a context menu plugin for jQuery. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.

jSlickmenu(★★★)

View Demo »Download Plugin »
Description:Its these amazing effects like these that will end up making Flash obsolete, all developed with jQuery and HTML5. The only downside to this plugin is that it can only only work on Safari, Google Chrome and Firefox 3.5 (only), as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. I suppose this plugin is glimpse into the near future of web development.

Charts&Presentation

Visualize(★★★★★)

View Demo » Download Plugin »
Description:Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users. With the development of the Visualize plugin you can now have a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Editor

Small Rich Text Editor(★★★)

View Demo » Download Plugin »
Description: Small footprint, Cross-browser, Ajax Image upload, HTML Cleanup with PHP back-end rich text editor with all basic Rich Text functionality included.

Others

jQuery Progress Bar(★★★★)

View Demo » Download Plugin »
Description: jQuery progressBar was once upon a time an animated progress bar for jQuery. Its was based on the mootools progressBar by webappers. Now, it is, by popular demand, some funky multi-colored progress bar that starts with a THX intro and launches jQuery fireworks when it hits 100%. No not really. Check it out though!

jQuery BlockUI Plugin (v2)(★★★)

View Demo » Download Plugin »
Description: The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

Clipboard plugin(★★★)

View Demo » Download Plugin »
Description: Clipboard is a simple jQuery plugin that allows you to copy text in cross-browser fashion, using Internet Explorer's native method, and a Flash helper in other browsers. Compatible with jQuery 1.2.x and 1.3.x, requires Flash 8+ in non-IE browsers..

JQuery Corner(★★★)

View Demo » Download Plugin »
Description: Corner adorners are all the rage in web design these days. Designers say that plain old right-angle corners are so Web 1.0 now. However, some of the techniques to take the edge off corners use extra markup that is only there to support the decoration, which violates the separation of content and presentation. Now that's really Web 1.0 so we don't want to go there. Others use single-purpose rounded corner images or bulky Javascript code; that seems like a high price to pay for beauty

저작자표시

posted by Sunny's

2010. 12. 29. 11:06 JQUERY

40 Useful jQuery Techniques and Plugins

Over the last year, Smashing Magazine has evolved. We’ve been publishing fewer lists and more in-depth articles about design and Web development. We have invited professionals and high-profile developers to write for us. We’ve been investing more resources in the quality and relevance of our articles. We’ve also explored new formats; and on weekends we’ve been publishing more inspirational pieces, leaving the in-depth articles to weekdays.

We’ve tried our best to fuel the growing appetite of our readers for more advanced articles, but recently we’ve been receiving more requests for carefully selected, useful round-ups. We are not big fans of lists either, but the format is useful and — if the resources are relevant — can be extremely helpful. Therefore, we’ve decided to add a couple of round-ups per month as a bonus to our regular articles. Instead of replacing the main articles, we will add round-ups on top of our regular schedule. If you don’t like round-ups or find them inappropriate, please feel free to skip them. How does this work for you?

In this post, we present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. We look forward to your ideas and suggestions in the comments to this post.

Tips, Hints, Navigation

TipTip jQuery Plugin¹
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

Contextual Slideout Tips With jQuery & CSS3²
A set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours.

jQuery Slider plugin (Safari style) ³
jQuery Slider is easy to use and multifunctional jQuery plugin.

jSquares⁴
jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com⁵. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

⁴

Nav-o-Matic⁶
Single sprite navigation is great, but we all know it can get a little bit tedious. All that measuring of pixel perfect photoshop slices, careful coding of your CSS and subsequent calculator bashing is enough to drive anyone to start microwaving fluffy kittens. Wouldn’t it be great to have a fancy online tool to take care of all the boring stuff for you in a few simple clicks? Well wish no more…

⁶

Jquery Two Sided Multi Selector ⁷
This Plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.

⁷

jQuery MegaMenu Plugin⁸

⁸

jQuery Keyboard Navigation Plugin⁹
The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.

⁹

FullCalendar – Full-sized Calendar jQuery Plugin¹⁰
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

¹⁰

Forms

iPhone Style Radio and Checkbox Switches using JQuery and CSS¹¹
A simple technique for creating radio button and checkbox switches with jQuery.

¹¹

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element ¹²
Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

¹²

A Better jQuery In-Field Label Plugin¹³
This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

¹³

Sliding Labels¹⁴
Tim Wright came up with a jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. The small jQuery snippet works in all major browsers and can be used for input and textarea elements.

¹⁴

Login or Signup with jQuery¹⁵
Some users doesn’t like to filling the registration form. So that I had implemented login and singup fields in same block just controlling with jquery and PHP. It’s is very simple javascript and basic PHP code.

¹⁵

Uniform – Sexy forms with jQuery¹⁶
Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

¹⁶

Slideshows and Galleries

jQuery Quicksand plugin¹⁷
Reorder and filter items with a nice shuffling animation.

¹⁷

Nivo Slider: Slideshow jQuery Script¹⁸
Nivo Slider is a simple and powerful jQuery image slider plug-in that fits the bill. The tool has nine unique transition effects built in, as well as plenty of options to fiddle with: for instance, you can define functions to be applied before and after the image has changed, set the animation speed and activate pause on hover.

¹⁸

#grid¹⁹
#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views. #grid comes set up with a 980 pixel-wide container, with 20-pixel gutters, and assumes one lead of 20 pixels. You can download the source code (JavaScript and CSS) and use classes for multiple grids.

¹⁹

Improving The Content

Dynamic Footnotes With CSS and jQuery²⁰
Lukas Mathis has come up with an elegant solution to improve user experience with footnotes: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it – i.e. when they move the cursor over the footnote symbol.

²⁰

jQuery Captify Plugin v1.1.3²¹
Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment).

²¹

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery²²
With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

²²

Layouts

Columnizer jQuery Plugin ²³
This jQuery plugin will help you create a multi-column layout without complex CSS hacks. Works across all major browsers.

²³

jQuery Grid Plugin ²⁴

²⁴

Charts and Graphs

Dygraphs: Create interactive graphs from open source Javascript library ²⁵
Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

²⁵

gMap – Google Maps Plugin For jQuery ²⁶
gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

²⁶

10 jQuery Plugins for Easier Google Map Installation ²⁷
The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.

²⁷

Images and Visual Effects

jQuery imageless buttons a la Google²⁸
This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. I don’t know how Google did it, but my buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.

²⁸

jQuery Presentation Plugin²⁹
jQuery Presentation Plugin: Say NO to Keynote!

²⁹

jQuery pageSlide³⁰
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

³⁰

jqFancyTransitions: jQuery Image Rotator Plugin³¹
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

³¹

A demo of AD Gallery³²
A highly customizable gallery/showcase plugin for jQuery.

³²

Pines Notify jQuery Plugin³³
Pines Notify’s features include: timed hiding with visual effects, sticky (no automatic hiding) notices, optional hide button, supports dynamically updating text, title, icon, type, stacks allow notice sets to stack independently, control stack direction and push to top or bottom.

³³

Animate Panning Slideshow with jQuery³⁴
In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

³⁴

Sponsor Flip Wall With jQuery & CSS ³⁵
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

³⁵

Last Click

CofeeScript³⁶
CoffeeScript is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.

³⁶

Brosho ‘Design in the Browser’ jQuery Plugin³⁷
With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.

³⁷

gameQuery – a javascript game engine with jQuery³⁸
gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

³⁸

Mind-blowing JavaScript Experiments³⁹
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

출처 : http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/

저작자표시

posted by Sunny's

2010. 10. 21. 09:53 JQUERY

jQuery 추천 플러그인 50선

Many of us have been using a good deal of jQuery plugins lately. Below I have provided a list of the 50 favorite plugins many developers use. Some of these you may have already seen, others might be new to you. This is just the first series , the second version will be coming soon, stay tuned and Enjoy!

Tabs

5) jQuery UI Tabs / Tabs 3 – Simple jQuery based tab-navigation

6) TabContainer Theme – JQuery style fade animation that runs as the user navigates between selected tabs.

Accordion

7 ) jQuery Accordion

Demo

8) Simple JQuery Accordion menu

SlideShows

9) jQZoom- allows you to realize a small magnifier window close to the image or images on your web page easily.

J14 in 50+ Amazing Jquery Examples- Part1

10) Image/Photo Gallery Viewer- allows you to take a grouping of images and turn it into an flash-like image/photo gallery. It allows you to style it how ever you want and add as many images at you want.

J25 in 50+ Amazing Jquery Examples- Part1

Transition Effects

11) InnerFade – It’s designed to fade you any element inside a container in and out.

12) Easing Plugin- A jQuery plugin from GSGD to give advanced easing options. Uses Robert Penners easing equations for the transitions

13) Highlight Fade

14) jQuery Cycle Plugin- have very intersting transition effects like image cross-fading and cycling.

jQuery Carousel

15) Riding carousels with jQuery – is a jQuery plugin for controlling a list of items in horizontal or vertical order.

Demo :

Color Picker

16) Farbtastic – is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript.

Demo :

17) jQuery Color Picker

LightBox

18) jQuery ThickBox – is a webpage user interface dialog widget written in JavaScript.

Demo :

19) SimpleModal Demos – its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.

Demo :

20) jQuery lightBox Plugin – simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

Demo :

iframe

21) JQuery iFrame Plugin – If javascript is turned off, it will just show a link to the content. Here is the code in action…

Form Validation

22) Validation – A fairly comprehensive set of form validation rules. The plugin also dynamically creates IDs and ties them to labels when they are missing.

Demo :

23) Ajax Form Validation – Client side validation in a form using jQuery. The username will check with the server whether the chosen name is a) valid and b) available.

Demo :

24) jQuery AlphaNumeric – Allows you to prevent your users from entering certain characters inside the form fields.

Form Elements

J15 in 50+ Amazing Jquery Examples- Part1

25) jquery.Combobox – is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

26) jQuery Checkbox – Provides for the styling of checkboxes that degrades nicely when javascript is dsiabled.

27) File Style Plugin for jQuery -File Style plugin enables you to use image as browse button. You can also style filename field as normal textfield using css.

Star Rating

J39 in 50+ Amazing Jquery Examples- Part1

28) Simple Star Rating System

29)Half-Star Rating Plugin

ToolTips

30) Tooltip Plugin Examples – A fancy tooltip with some custom positioning, a tooltip with an extra class for nice shadows, and some extra content. You can find a demo here.

31) The jQuery Tooltip

Tables Plugins

32) Zebra Tables Demo -using jQuery to do zebra striping and row hovering, very NICE!!

Demo :

33) Table Sorter Plugin - for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. It can successfully parse and sort many types of data including linked data in a cell.

34) AutoScroll for jQuery -allows for hotspot scrolling of web pages

35) Scrollable HTML table plugin- used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary.

Demo :

Draggable Droppables And Selectables

36) Sortables - You won’t believe how easy this code to make it easy to sort several lists, mix and match the lists, and send the information to a database.

37) Draggables and droppables- A good example of using jQuery plugin iDrop to drag and drop tree view nodes.

Style Switcher

38) Switch stylesheets with jQuery- allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet. A Demo is here.

Rounded Corners

39) jQuery Corner Demo

40) JQuery Curvy Corners- A plugin for rounded corners with smooth, anti-aliased corners.

Must See jQuery Examples

41) jQuery Air – A passenger management interface for charter flights. A great Tutorial that you will enjoy.

Demo :

42) HeatColor -allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, it can find the min and max values of the desired elements, or you can pass them in manually.

Demo :

43) Simple jQuery Examples -This page contains a growing set of Query powered script examples in "pagemod" format. The code that is displayed when clicking "Source" is exactly the same Javascript code that powers each example. Feel free to save a copy of this page and use the example.

44) Date Picker -A flexible unobtrusive calendar component for jQuery.

Demo :

45) ScrollTo -A plugin for jQuery to scroll to a certain object in the page

46) 3-Column Splitter Layout -this is a 3-column layout using nested splitters. The left and right columns are a semi-fixed width; the center column grows or shrinks. Page scroll bars have been removed since all the content is inside the splitter, and the splitter is anchored to the bottom of the window using an onresize event handler.

47) Pager jQuery -Neat little jQuery plugin for a a paginated effect.

48) Select box manipulation

49) Cookie Plugin for jQuery

50) JQuery BlockUI Plugin -lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

저작자표시

posted by Sunny's

2010. 9. 8. 21:47 JQUERY

jQuery를 활용한 동적레이어 이동 및 정렬샘플

igoogle_(2).zip

위 샘플 이미지에서처럼, 각 레이어를 동적으로 이동시키고 정렬할 수 있는 jQuery 코드이다.
이를 활용하여 좀 더 멋진 기능을 구현할 수 있을거라 기대한다.

출처:jQuery를 활용한 동적레이어 이동 및 정렬샘플

저작자표시

posted by Sunny's

2010. 9. 3. 17:29 JQUERY

jQuery iPod-style Drilldown Menu

We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It's especially helpful when organizing large data structures that don't translate well into traditional dropdown or fly-out menus.

This drilldown menu provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, breadcrumb links appear above the menu options to both deliver feedback and allow quick access back to nodes higher up in the hierarchy. A lateral iPod-style slide transition reinforces the notion that you're moving forward into more granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.

Working Demos:

The simplest version works like the iPod menu or standard fly-out menu, where the primary goal is to select an end (leaf) node. When you select a category (indicated with an arrow), the menu drills you down into the next level of hierarchy:

View in a new window

It's also possible to configure the menu so that users can select either a category or a leaf node. This is useful for global navigation where users may want to select a higher level category page (Finance) or a detailed page (Mortgage). In this case, the menu options are separated into two parts: a selectable category name (text on the left) and, if applicable, a sub-menu drilldown navigation link (arrow on the right):

View in a new window

Development Notes

We built this demo using the principles of Progressive Enhancement. Markup consists of an ordinary HTML link to the menu data, so that when a device can't handle advanced scripting or has javascript disabled the link is still perfectly usable. As the page loads we run a quick test using our testUserDevice.js script to determine if the user's device is capable of rendering an enhanced experience. If the device passes our test, we fetch the data from the HREF attribute via Ajax and use it to transform the link into the interactive widget shown above. For more information on testUserDevice.js and Progressive Enhancement, check out Delivering the right experience to the right device.

Code Usage

The iPod-style drilldown menu widget shown here is not coded for ease of modification, but is free to reuse and modify with a proper attribution to Filament Group. Feel free to visit our demo page and view the source code to see how it works.

Thanks for the helpful feedback!

We're no longer taking comments on this post because we've handed off development of this widget to the jQuery UI development team. The menu is currently being refactored and is slated for an upcoming jQuery UI release. We encourage you to track its progress and continue contributing your ideas at the jQuery UI Development & Planning Wiki.

저작자표시

posted by Sunny's

2010. 9. 3. 15:35 JQUERY

10 Best jQuery Menu Plugins

Wed, 2009-04-01 18:48 | 5 comments

jdMenu Hierarchical Menu Plugin for jQuery

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.

Superfish – jQuery menu plugin by Joel Birch

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript)

jQuery Context Menu Plugin

A context menu plugin for jQuery that features easy implementation, keyboard shortcuts, CSS styling, and control methods.

jQuery Simple Drop-Down Menu Plugin

The peculiarity of this menu is that these 20 lines of code and absence of various cumbersome mouse events within html code.

LavaLamp jQuery mernu plugin

This plugin implements horizontal menu with beatiful sliding effect.

jGlideMenu

jGlideMenu is jQuery plugin that supports inline and AJAX menu definitions and uses an easier syntax than the original version.

Emenu

Emenu is designed to create a fixed-width, fixed-height drop down menu contained within a header image.

jQuery iPod-style Drilldown Menu

iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It's especially helpful when organizing large data structures that don't translate well into traditional dropdown or fly-out menus.

jQuery menu plugin

A jQuery menu plugin. It’s a drop down menu, which behaves like an application menu (click to open, click to close, stays open even after hovering elsewhere). It supports menu creation through HTML markup or through JavaScript. The plugin tries to position its submenus inside the visible area when there is not enough space at the right or bottom border (dimensions plugin required).

저작자표시

posted by Sunny's

1 2 3

calendar

Notice

Tag

Search

Category

Recent Post

Recent Comment

Recent Trackback

Archive

My Link

'JQUERY'에 해당되는 글 21건

출처 : http://hilldan.springnote.com/pages/1206052?print=1

ExtJs란

라이센스

호환되는 서버 플랫폼

ExtJS를 사용하기 위해 요구되는 라이브러리

3-party adapters와의 호환시 이슈사항

에러상황에 따른 대처

다른 URL혹은 domain이 틀린 사이트에서 데이타를 가지고 오고 싶을때

Hidden Field 표시하는법

그리드의 셀에 클릭이벤트 핸들러 사용하는법(가장 많이 헷갈리고 많이 사용하는 것)

Ajax로 불러온 마크업중의 스크립트가 실행되지 않을때

그리드의 Row를 각각 틀리게 표현하고 싶을때 (getRowClass를 사용한 expander사용)

load()로 빈 데이타스토어(getCount()==0)를 불러올때

Ext.get으로 컴포넌트 불러올때

tree Node에서 아이콘 표시하는법

"XX has no properties"라는 에러가 떨어질때

extjs.com/s.gif를 계속 찾고 있다면 아래와 같이 한다.

익칠이(IE)에서는 안돌아가는데 불여우(FF)에서 잘 돌아갈때

가끔씩 깨진 화면들이 나올때

1. Puffing Smoke Effect in jQuery

2. Crafting an Animated Postcard

3. Create a Realistic Hover Effect

4. Scrolling Background Effect

5. Multiple Animations with Glimmer

6. jQuery Blend

7. Parallax Scrolling Background

8. Stunning Sliding Door Effect

9. Make Your Header Responses to Mouse Movements

10. Animated Header Using jQuery

Popular jQuery Plugins

JQuery Key Filter(★★★★★)

JQuery Mask Input(★★★★)

PassRoids(★★★)

AutoComplete(★★)

mcDropdown(★★★★)

vTip(★★★★★)

AD Gallery (★★★★★)

Create Featured Content Slider(★★★★★)

jQuery Infinite Carousel(★★★★)

Create a Slick and Accessible Slideshow(★★★★)

MopSlider(★★)

Facebox(★★★★★)

ThickBox (★★★★)

ColorBox(★★★★)

Smooth Navigational Menu(★★★★★)

jQuery File Tree(★★★★★)

jQuery Context Menu Plugin(★★★★)

jSlickmenu(★★★)

Visualize(★★★★★)

Small Rich Text Editor(★★★)

jQuery BlockUI Plugin (v2)(★★★)

Clipboard plugin(★★★)

JQuery Corner(★★★)

Tips, Hints, Navigation

Forms

Slideshows and Galleries

Improving The Content

Layouts

Charts and Graphs

Images and Visual Effects

Last Click

Menu

Tabs

Accordion

SlideShows

Transition Effects

jQuery Carousel

Color Picker

LightBox