2011년 3월 17일 목요일

jquery 이것저것

전체 체크박스 전체 선택-해제

$('#allcheck').click(function() {
    if ($('#allcheck:checked').length > 0) {
        $('.delcheck').attr('checked', 'checked');
    } else {
        $('.delcheck').attr('checked', '');
    }
});

동일한 이름의 input name="test"인걸 하나의 문자열로 변환
var ret = []; 
var cnt = 0;
$('input[name*=test]').each(function() {
    ret[cnt] = $(this).val();
    cnt += 1;
});
alert(ret.join());

select box 관련

var testcode = 2;
$('#testid option:eq('+testcode+')').attr('selected', 'selected');
alert($('#testid option:selected').val());
alert($('#testid option:selected').text());

input box 추가 및 삭제
input type="button" value="추가" id="addButton"
var addhtml = "div id=\"addHtml\" input type=\"text\" name=\"test\" value=\"\" input type=\"button\" value=\"삭제\" class=\"delhtml\" /div "; $('#addButton').click(function () { $('#addHtml').append(addhtml); $('.delhtml').bind('click', function () { $(this).parent().remove(); }); });

jquery autocomplete

jquery autocomplete 간단한 사용법

우선 사용하고자 하는 페이지의 자바스크립트
$('#name').autocomplete(uid, {
    minChars: 1,
    width: 210,
    max: 50,
    matchContains: true,
    autoFill: false,
    formatItem: function(row, i, max) {
        return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
    },
    formatMatch: function(row, i, max) {
        return row.name + " " + row.to;
    },
    formatResult: function(row) {
        return row.name;
    }
});

$('#name').result(function(event, row, formatted) {
    $('#to').val(row.to);
});

uid가 있는 자바스크립트
var uid = [
 { name: "Peter Pan", to: "peter@pan.de" },
 { name: "Molly", to: "molly@yahoo.com" },
 { name: "Forneria Marconi", to: "live@japan.jp" },
 { name: "Master Sync", to: "205bw@samsung.com" },
 { name: "Dr. Tech de Log", to: "g15@logitech.com" },
 { name: "Don Corleone", to: "don@vegas.com" },
 { name: "Mc Chick", to: "info@donalds.org" },
 { name: "Donnie Darko", to: "dd@timeshift.info" },
 { name: "Quake The Net", to: "webmaster@quakenet.org" },
 { name: "Dr. Write", to: "write@writable.com" }
];

name id를 가지고 있는 곳에서 입력하면 uid의 name과 일치하는 것들이 나타난다.

이때 해당하는 것을 선택하면 result 함수를 호출하게 된다.

여기서 필요한 작업을 하면 끝.

참조 url : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/