2013년 5월 22일 수요일
Jquery mousedown 이벤트
$("#test").mousedown(function(event){
//마우스 버튼 Event
// 1. event.which=1:마우스 왼쪽 눌렀을때
// 2. event.which=2:마우스 휠 눌렀을때
// 3. event.which=3:마우스 오른쪽 눌렀을때
if(event.which == 1){
//Source
}else if (event.which == 2){
//source
}else if(event.which == 3){
//Source
}
});
2013년 5월 9일 목요일
jquery 자동완성(20130510)
[js]
jquery-ui-1.10.2.js
jquery-1.9.1.js
[css]
jquery-ui_1.10.2.css
[javascript]
jQuery(function($){
inputTextAutocomplete();
});function inputTextAutocomplete(){
/*
*1. 자바 action 이경우 ../xxx.action 을 호출 함.
* var URL = "../xxxx.action";
*2. json 형식의 파일이 있을경우 경로를 url 로 설정 함.
* var URL = "../xxxx.json";
*/
$('#inputText).autocomplete({
source: function (request, response) {
var param = "&vo.inputtext="+ $('#inputText).val();
$.ajax({
url: URL,
dataType: "json",
type: 'POST',
contentType:"application/x-www-form-urlencoded;charset=UTF-8",
data: param,
error: function(data){
},
success: function(data) {
$(".ui-autocomplete").css("z-index", "9999");
$(".ui-autocomplete").css("overflow", "auto");
response($.map(data, function(item) {
return {
codevalue: item.codevalue,
codeindex: item.codeindex,
};
}));
}
});
},
minLength:0,/* focus 함수를 사용함으로 인해 minLength 값을 1 로 주어도됨.*/
autoFocus: false,
delay: 100,
focus: function () {
// prevent value inserted on focus
//자동완성 검색 키워를 입력하여 콤보박스 형태로 자동완성되었을때
//Key Down, Key Up 으로 선택시 입력 Text 박스에 입력한
//자동완성 키워드가 리셋되는 형상을 방지 하기위해 return false 함.
//focus: function () 을 사용하지 않거나 사용하되 return true 를 하면
// 입력 Text 박스에 입력한 자동완성 키워드가 리셋 됨.
return false;
},
select: function(event, ui) {
$('#inputTextHidden).val(ui.item.codeindex);
//alert(event.button);
if (event.keyCode == 13 || event.button == 0){
//키보드 이벤트 또는 마우스 이벤트가 발생하면 처리 되는 로직추가
...........................
}
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
//inputText인 TEXT 박스에 입력시 드롭다운 콤보 박스 형태로 보여주도록 Html
구성
return $( "<li>" )
.data( "item.autocomplete", item )
.append( "<a>" + "<strong>"+item.codevalue+"</strong> "+item.compnm + "</a><span style='cursor: pointer; position:absolute; top:3px; right:4px;' onclick=eventFunction('"+item.codeindex+"')>X</span>" )
.appendTo( ul );
};
}.data( "item.autocomplete", item )
.append( "<a>" + "<strong>"+item.codevalue+"</strong> "+item.compnm + "</a><span style='cursor: pointer; position:absolute; top:3px; right:4px;' onclick=eventFunction('"+item.codeindex+"')>X</span>" )
.appendTo( ul );
};
function eventFunction(codeindex){
alert(codeindex);
}
[html]
<input id="inputText" type="text" >
<input id="inputTextHidden" type="hidden" >
피드 구독하기:
글 (Atom)