http://jqueryui.com/

http://jquerytools.github.io/demos/

Source code available from GitHub or a Zipped download.

addOption

You can add a single option: $("#myselect").addOption("Value", "Text");,
change the text of an existing option:$("#myselect").addOption("Value", "Text Replacement"); or add
multiple options using a hash:

var myOptions = {
	"Value 1" : "Text 1",
	"Value 2" : "Text 2",
	"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false); // use true if you want to select the added options » Run

ajaxAddOption(url[, params, select, fn, args])

Add options via AJAX (page must return valid JSON, sample below):$("#myselect2").ajaxAddOption("ajaxoptions.js");.

Parameters

• url – Page to get options from (must be valid JSON)
• params (optional) – Any parameters to send with the request
• select (optional) – Select the added options, default true
• fn (optional) – call this function with the select object as param after completion
• args – (optional) array of arguments to pass onto the function

$("#myselect2").ajaxAddOption("ajaxoptions.js", {}, false, sortoptions, [{"dir":"desc"}]);

function sortoptions(sort)
{
	var $this = $(this);
	// sort
	$this.sortOptions(sort.dir == "asc" ? true : false);
}

removeOption(index/value/regex/array[, selectedOnly])

Remove an option by

- index: $("#myselect2").removeOption(0);

- value: $("#myselect").removeOption("Value");

- regular expression: $("#myselect").removeOption(/^val/i);

- array $("#myselect").removeOption(["myselect_1", "myselect_2"]);

To remove all options, you can do $("#myselect").removeOption(/./);

If you supply a second parameter as a boolean (true, false), then only options that have been selected (and matched) will be removed:$("#myselect2").removeOption("Value 2", true);.

sortOptions([ascending])

Sorting is done as follows: $("#myselect2").sortOptions(false);(descending)
or $("#myselect2").sortOptions(); (ascending)

selectOptions(value[, clear])

Select options by value, using a string as the parameter$("#myselect2").selectOptions("Value 1");, or a regular expression
$("#myselect2").selectOptions(/^val/i);. You can also clear already selected options:
$("#myselect2").selectOptions("Value 2", true);

Originally coded by Mathias Bank, with a modification to allow it to take a regular expression.

copyOptions(to[, which])

You can copy options from one select to another:$("#myselect").copyOptions("#myselect2"); (copy selected options) or
$("#myselect").copyOptions("#myselect2", "all"); (copy all options)

containsOption(value[, fn])

Checks if a select box has an option with the supplied value

Parameters

• value – Which value to check for. Can be a string or regular expression
  e.g.
  if( $("#myselect").containsOption("val1") ) { ... } or
  if( $("#myselect").containsOption(/^val/i) ) { ... }
• fn (optional) – Function to apply if an option with the given value is found. Use this if you don’t want to break the chaining
  e.g. $("#myselect").containsOption("val1", copyoption).doSomethingElseWithSelect(); // calls copyoption (user defined function) for any options found, chain is continued

selectedValues()

Returns an array of the values which have been selected.$("#myselect2").selectedValues().

selectedTexts()

Returns an array of the texts which have been selected.$("#myselect2").selectedTexts().

selectedOptions()

Returns a jQuery object with each <option> that has been selected.$("#myselect2").selectedOptions().

출처 http://www.texotela.co.uk/code/jquery/select/#

Moving the file list

$(function(){ // wait for document to load 
                               $('#T7').MultiFile({ 
                                list: '#T7-list'
                               }); 
                              });

Customising the file list

$(function(){ // wait for document to load 
                               $('#T8A').MultiFile({ 
                                STRING: {
                                 remove: '<img src="http://www.fyneworks.com/i/bin.gif" height="16" width="16" alt="x"/>'
                                }
                               }); 
                              });

$(function(){ // wait for document to load 
                               $('#T8B').MultiFile({ 
                                STRING: {
                                 file: '<em title="Click to remove" onclick="$(this).parent().prev().click()">$file</em>',
                                 remove: '<img src="http://www.fyneworks.com/i/bin.gif" height="16" width="16" alt="x"/>'
                                }
                               }); 
                              });

Using events

$(function(){ // wait for document to load 
                               $('#T9').MultiFile({
                                onFileRemove: function(element, value, master_element){
                                 $('#F9-Log').append('<li>onFileRemove - '+value+'</li>')
                                },
                                afterFileRemove: function(element, value, master_element){
                                 $('#F9-Log').append('<li>afterFileRemove - '+value+'</li>')
                                },
                                onFileAppend: function(element, value, master_element){
                                 $('#F9-Log').append('<li>onFileAppend - '+value+'</li>')
                                },
                                afterFileAppend: function(element, value, master_element){
                                 $('#F9-Log').append('<li>afterFileAppend - '+value+'</li>')
                                },
                                onFileSelect: function(element, value, master_element){
                                 $('#F9-Log').append('<li>onFileSelect - '+value+'</li>')
                                },
                                afterFileSelect: function(element, value, master_element){
                                 $('#F9-Log').append('<li>afterFileSelect - '+value+'</li>')
                                }
                               }); 
                              });

Advanced Usage

Using your own selectors

$(function(){ // wait for document to load
                                $('#MyFileUpload').MultiFile();
                               });

Setting limit via script

$(function(){ // wait for document to load
                                $('#MyFileUpload').MultiFile(5 /*limit will be set to 5*/);
                               });

Advanced configuration

$(function(){ // wait for document to load
                                $('#MyCoolFileUpload').MultiFile({
                                 max: 5,
                                 accept: 'gif|jpg|png|bmp|swf'
                                });
                               });

Customising visible strings for multi-lingual support

$(function(){ // wait for document to load
                                $('#PortugueseFileUpload').MultiFile({
                                 STRING: {
                                  remove:'Remover',
                                  selected:'Selecionado: $file',
                                  denied:'Invalido arquivo de tipo $ext!'
                                 }
                                });
                               });

- See more at: http://www.fyneworks.com/jquery/multiple-file-upload/#sthash.R7cYZgO3.dpuf

출처 - http://www.fyneworks.com/jquery/multiple-file-upload/

Giva Labs

jNotify jQuery Plug-in v1.2.00

Overview

The jQuery jNotify plug-in is an unobtrusive notification system for web-based applications. Use jNotify to inform users when specific actions have completed on your site–such as when an AJAX operation complete.

The jNotify plug-in is designed to replace code where you may have previously used the JavaScript alert() function to provide feedback to the user. The alert() function has two significant UI issues:

• It is very obtrusive–users must take action (click "Ok") to remove the message or before you can interact with other elements on the page. While sometimes you want the user to acknowledge an action, often you just want to bring something to their attention without requiring them to take additional action.
• You can not use rich-text–messages are limited to plain text only. Sometimes you want to provide rich-text features, such as links or images, in your notifications.

The jNotify plug-in provides a light-weight (3KB minified) solution to all of these problems.

Requirements

In order to use the jNotify plug-in, you need the following:

• jQuery v1.4.3 (or higher)*
• jquery.jnotify.js Plug-in

 * This plug-in may work with older versions of jQuery in the 1.2 family. If you try using this with an older version of jQuery, you will need to include the jquery.dimensions.js plug-in (as of jQuery v1.2.6 the jquery.dimensions.js plug-in is included in the jQuery core.)

Usage

You can invoke a new notification using the following syntax:

$.jnotify(message, [options]);
$.jnotify(message, delay);
$.jnotify(message, sticky);
$.jnotify(message, type, [delay/sticky]);

Arguments

options

This argument is optional and allows you to customize the settings used for each instance of the plug-in. For a list of all available options, see the Options section.

delay

If the second argument is a number, then this is the same as setting the "delay"option.

sticky

If the second argument is either true or false, then this is the same as setting the "sticky" option.

type

If the second is a string, then this is the same as setting the "type" option.

delay/sticky

If the second is a string, then you can supply an optional third argument which specifies either the delay speed (a number) or if the notification is to be considered "sticky" (a boolean.).

Public API

$.jnotify.setup(options)

Sets the default options to use for all jNotify notifications.

$.jnotify.pause()

Pauses any current non-sticky notifications from being removed from the queue.

$.jnotify.resume()

Resumes the notification queue if it has previously been paused.

Options

There are a number of options available for customizing the look and feel of the jNotify widget.

{
    // define core settings
      type: ""                     // if a type is specified, then an additional class
                                   // of classNotification
                                   // + type is created for each notification
    , delay: 2000                  // the default time to show each notification
                                   // (in milliseconds)
    , sticky: false                // determines if the message should be considered
                                   // "sticky" (user must manually close notification)
    , clickToDismiss: true         // allows you to click on a message to dismiss it

    , closeLabel: "×"        // the HTML to use for the "Close" link
    , showClose: true              // determines if the "Close" link should be shown
                                   // if notification is also sticky
    , fadeSpeed: 1000              // the speed to fade messages out (in milliseconds)
    , slideSpeed: 250              // the speed used to slide messages out
                                   // (in milliseconds)

    // define the class statements
    , classContainer: "jnotify-container"       // className to use for the outer most
                                                // container--this is where all the
                                                // notifications appear
    , classNotification: "jnotify-notification" // className of the individual
                                                // notification containers
    , classBackground: "jnotify-background"     // className of the background layer
                                                // for each notification container
    , classClose: "jnotify-close"               // className to use for the "Close"
                                                // link
    , classMessage: "jnotify-message"           // className to use for the actual
                                                // notification text container--this
                                                // is where the message is actually
                                                // written

    // event handlers
    , init: null              // callback that occurs when the main jnotify container
                              // is created
    , create: null            // callback that occurs when when the note is created
                              // (occurs just before appearing in DOM)
    , beforeRemove: null      // callback that occurs when before the notification
                              // starts to fade away
    , remove: null            // callback that occurs when notification is removed
    , transition: null        // allows you to overwrite how the transitions between
                              // messages are handled
                              // receives the following arguments:
                              //   container - jQuery object containing the
                              //               notification
                              //   message   - jQuery object of the actual message
                              //   count     - the number of items left in queue
                              //   callback  - a function you must execute once your
                              //               transition has executed
                              //   options   - the options used for this jnotify
                              //               instance
}

Getting Started

The first thing we need to do is to load the required CSS stylesheet and the JavaScript libraries used by the widget:

<!---// load the jNotify CSS stylesheet //--->
<link type="text/css" href="./css/jquery.jnotify.css" rel="stylesheet" media="all" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.jnotify.js"></script>

Once you've added the jNotify plug-in to your HTML page, all you need to do is to invoke the $.jnotify() method whenever you want to display a message to the user.

Examples

The plug-in has been designed to use CSS to all formatting and layout of the notification system. Try clicking the buttons below to see how easily you can change the default styles just by changing the CSS.

Default CSS Alternative CSS

License

Copyright 2013 Giva, Inc. (http://www.givainc.com/labs/)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
	http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Revisions

v1.2.00 (2014-07-10)

• Added clickToDismiss option for clicking a message to quickly dimiss the message
• Fixed issue where messages would sometimes fadeout incorrect due to issue with items not removed from queue correctly

v1.1.02 (2013-09-19)

• Fixed option.create callback to not run until after note is added to the DOM
• The option.create callback now also gets an argument referencing the $jnotify layer

v1.1.00 (2010-09-30)

• Initial release

Download

The following download includes both uncompressed and minified versions of the plug-in and all the CSS and image files required to get you started. See the gettingstarted.htm file for usage instructions and a working example.

jquery.jnotify.zip (12 KB)

출처 - http://www.givainc.com/labs/jnotify_jquery_plugin.cfm

highlight: JavaScript text higlighting jQuery plugin

Posted 2007-09-15 in JavaScript by Johann.

.highlight { background-color: yellow }

$('li').highlight('bla');

$('#highlight-plugin').removeHighlight();

출처 - http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Form Plugin API

The Form Plugin API provides several methods that allow you to easily manage form data and form submission.

ajaxForm

Prepares a form to be submitted via AJAX by adding all of the necessary event listeners. It does not submit the form. Use ajaxForm in your document's ready function to prepare your form(s) for AJAX submission. ajaxForm takes zero or one argument. The single argument can be either a callback function or an Options Object.
Chainable: Yes.

Note: You can pass any of the standard $.ajax options to ajaxForm

Example:

$('#myFormId').ajaxForm();

ajaxSubmit

Immediately submits the form via AJAX. In the most common use case this is invoked in response to the user clicking a submit button on the form. ajaxSubmit takes zero or one argument. The single argument can be either a callback function or an Options Object.
Chainable: Yes.

Note: You can pass any of the standard $.ajax options to ajaxSubmit

Example:

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

formSerialize

Serializes the form into a query string. This method will return a string in the format: name1=value1&name2=value2
Chainable: No, this method returns a String.

Example:

var queryString = $('#myFormId').formSerialize(); 
 
// the data could now be submitted using $.get, $.post, $.ajax, etc 
$.post('myscript.php', queryString); 
        

fieldSerialize

Serializes field elements into a query string. This is handy when you need to serialize only part of a form. This method will return a string in the format: name1=value1&name2=value2
Chainable: No, this method returns a String.

Example:

var queryString = $('#myFormId .specialFields').fieldSerialize();

fieldValue

Returns the value(s) of the element(s) in the matched set in an array. As of version .91, this method always returns an array. If no valid value can be determined the array will be empty, otherwise it will contain one or more values.
Chainable: No, this method returns an array.

Example:

// get the value of the password input 
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]); 

resetForm

Resets the form to its original state by invoking the form element's native DOM method.
Chainable: Yes.

Example:

$('#myFormId').resetForm();

clearForm

Clears the form elements. This method emptys all of the text inputs, password inputs and textarea elements, clears the selection in any select elements, and unchecks all radio and checkbox inputs.
Chainable: Yes.

$('#myFormId').clearForm();

clearFields

Clears field elements. This is handy when you need to clear only a part of the form.
Chainable: Yes.

$('#myFormId .specialFields').clearFields();

출처 - http://jquery.malsup.com/form/#api

사용자의 쿠키를 이용해서 유동적으로 사이트를 운영할 때가 많다.

자바스크립트로 쿠키를 만드는 방법은 생략한다. (이미 검색하면 많이 나온다.)

제이쿼리는 플러그인 사용으로 간단하다.

일단 플러그인을 페이지내에 삽입해야한다.

해당 파일은 https://github.com/carhartl/jquery-cookie 이 곳에서 최신버전을 받아서 사용하거나 지금 필자가 쓰는 버전을 첨부파일로 넣을테니 다운받아 써도 상관없다. (다운받아 사용할 경우 차후에 새로 업데이트 된 버전이 아니라는 점은 염두해두길 바란다.)

<head>와 </head>사이 아래 코드를 삽입한다.

1. 쿠키를 저장하는 방법은 아래와 같다.

 werty는 쿠키이름, sunday는 그에 대한 값을 넣는 것이다.

sunday대신에 php 경우 $id 이런식으로 아이디 값을 넣어주면 해당 아이디가 쿠키로 저장된 것이다.

별달리 그냥 팝업창으로 쓸 때 필자는 sunday 부분에 ok라고 넣는다.

그리고 확장형은 아래와 같다.

 expires : 만료일을 의미한다. 위 예제로 보면 7일동안 해당 쿠키를 유지한다는 이야기다.

path : 경로설정이다. 이 사이트의 모든 페이지가 해당된다면 / 이렇게 슬러시만 둔다. 그렇지 않고 특정 폴더라면 경로를 넣으면 된다.

domain : 쿠키가 적용될 도메인이다. 기본 설정은 쿠키가 만들어진 도메인이다.

secure : 기본 설정은 false로 되어있다. true/false 로 입력가능하며 true 일 경우 https 프로토콜만 적용된다.

2. 쿠키를 불러오는 방법은 아래와 같다.

저장된 쿠키중에 werty의 값을 불러온다.

3. 쿠키를 지우는 방법은 아래와 같다.

 이렇게 하면 저장되어있던 werty의 값을 지운다.

다른 방법으로 만료일을 -1로 바꾸어 초기화시키는 방법도 있다.

 만료일을 지난날로 지정해버리는 방법이다.

두방법다 초기화는 되지만 첫번째에서 주의할 점은 쿠키 저장시 자신이 설정한 도메인(domain)과 경로(path)가 디폴트가 아니라 설정했었다면 적용되지 않는다.

출처 - http://werty.co.kr/blog/1864

jQuery UI datepicker 크기 조정

jQuery UI 날짜 선택기 너비

jQuery UI 날짜 선택기 작게

주요 소스 코드

.ui-datepicker{ font-size: 12px; width: 160px; }
.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }

전체 소스 코드

<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy-mm-dd'
  });
});
</script>
<style>
.ui-datepicker{ font-size: 12px; width: 160px; }
.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
</style>
<p>생년월일: <input type="text" id="datepicker1"></p>

• 예시: http://jmnote.com/jqui/dpicker_size.php

같이 보기

• jQuery UI 날짜 선택

출처 - http://jmnote.com/wiki/JQuery_UI_datepicker_%ED%81%AC%EA%B8%B0_%EC%A1%B0%EC%A0%95