jQuery on 이벤트 핸들러 사용방법
API Link : http://api.jquery.com/on/
어쩌구 저쩌구 해서..
delegate , live , bind => on 사용하시면 됩니다.
function myHandler(event) {
alert(event.data.foo);
}
$(function() {
$("p").on("click", {foo: "bar"}, myHandler)
});
<p>TEST</p>
$(function() {
$("p").on("click", function(){
alert( $(this).text() );
});
});
<p>TEST</p>
Jquery 를 이용한 에러 리포팅 소스
//Ajax 호출 함수. 예시.
function detailView()
{
$.ajax({
type: "POST",
dataType: "xml",
url: "xxx.asp",
data: { mode : "DETAIL"},
success: function(xmlRS){
// 성공처리
}
,error: function(xhr, ajaxOptions, thrownError){
//에러처리
fnSendErrorReport(xhr.responseText);
alert("Detail Load Error");
}
});
}
// 에러 리포팅 함수.
function fnSendErrorReport(errorMsg)
{
$.ajax({
type: "POST",
dataType: "text",
url: "errorReport.asp",
data: { mode : "ERRORREPORT", errorMsg : errorMsg }
});
}
If mode = "ERRORREPORT" Then
errorMsg = Request("errorMsg")
MailBody = "domain : " & dom & " ("& Date() & " " &hour(time) &":"& minute(time) &":"& second(time) &")" & vbCrlf
MailBody = MailBody & "error Msg : " & errorMsg " & vbCrlf
If errorMsg<> "" Then
cdoEmailResult = fnCdoEmailComponent("보낸", "받는", "", 업체명 & " Error Report ", MailBody,"")
End If
End if
//전부 삭제
$("form[name='"+formId + "'] select[name='"+objId+"'] option").remove();
//하나 삭제
$('#ttt').children("[value='04']").remove();
//추가할때
$('#ttt').append('<option value="05">Split</option>');
// select box 초기화 하는 함수.
function fnResetSelectBox(formName,objId)
{
$("form[name='"+formName+ "'] select[name='"+objId+"'] option").remove();
$("form[name='"+formName+ "'] select[name='"+objId+"']").append("<option value="">==SELECT==</option>");
}
//select box 기본 값 남기고 삭제 하기
function fnResetSelectBox(formName,objName )
{
$("form[name='"+formName+"'] select[name='"+ objName +"'] option").not("[value='']").remove();
}
//특정 index로 값 설정하기
$('#selectBox option:eq(3)').attr('selected', 'selected')
많은 부분의 Jquery UI API들이 대부분이런 형태로 XML 데이터를 파싱하여 배열에 넣고
UI를 생성하는 방식으로 처리되고 있는 것 같다.
XML 파일
<?xml version="1.0" encoding="utf-8" ?> - <root> - <item> <no>번호</no> <title>제목</title> <type>타입</type> </item> </root>
Javascript 소스
$.ajax({
type: "get"
,dataType: "xml"
,url: "xml파일 주소"
,success: function(xml){
if($(xml).find("item").length > 0){ // null check
$(xml).find("item").each(function(){ // item 수만큼 loop
// item 요소 중 title 읽어오기.
var title = $(this).find("title").text();
});
}
}
,error: function(){ alert("xml error!!"); }
});
간편하게 사용할 수 있는 메뉴 바 샘플 코드입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title id='Description'>The sample demonstrates how to center the menu items.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var theme = getTheme();
$("#jqxMenu").jqxMenu({ width: '50%', height: '30px', theme: theme });
var centerItems = function () {
var firstItem = $($("#jqxMenu ul:first").children()[0]);
firstItem.css('margin-left', 0);
var width = 0;
var borderOffset = 2;
$.each($("#jqxMenu ul:first").children(), function () {
width += $(this).outerWidth(true) + borderOffset;
});
var menuWidth = $("#jqxMenu").outerWidth();
firstItem.css('margin-left', (menuWidth / 2 ) - (width / 2));
}
centerItems();
$(window).resize(function () {
centerItems();
});
});
</script>
<div id='jqxMenu'>
<ul>
<li>Booking
<ul style='width: 250px;'>
<li><a href="#Financial">Booking</a></li>
<li><a href="#Education">Group Booking</a></li>
</ul>
</li>
<li>Basic Code
<ul style='width: 250px;'>
<li><a href="#Education">Nation Code</a></li>
<li><a href="#Financial">City Code</a></li>
<li>Basic Code
<ul style='width: 250px;'>
<li><a href="#Education">Nation Code</a></li>
<li><a href="#Financial">City Code</a></li>
</ul>
</li>
</ul>
</li>
<li>Event
<ul>
<li><a href="#PCProducts">Promotion</a></li>
<li>Main Page Event Management
<ul style='width: 220px;'>
<li><a href="#ConsumerPhoto">Tab</a></li>
<li><a href="#Mobile">Event Hotel</a></li>
<li>Basic Code
<ul style='width: 250px;'>
<li><a href="#Education">Nation Code</a></li>
<li><a href="#Financial">City Code</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Event Image</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
