모터 사이클 부츠 온라인 판매 사이트 - 출처: jQuery in Action;인사이트 -
[1단계]
$(function(){
// 부츠의 style을 옵션으로 로딩...
$('#bootChooserControl').load(/action/fetchBootStyleOptions');
// 부츠의 style을 선택하면 상세정보 출력
$('#bootChooserControl').change(function(event){
$('#productDetailPane').load(
'action/fetchProductDetails', // URL
{style:$(event.target).val()}, // Parameter
function(){ $('[value=""]', event.target).remove(); } // callback
// context > event.target 에서 value=''인 엘리먼트 삭제
);
});
});
load() 대신 $.get() 사용하기
$('#bootChooserControl').change(function(event){
$.get(
'action/fetchProductDetails',
{style:$(event.target).val()},
function(response){
$('#productDetailPane').html(response);
$('[value=""]', event.target).remove();
}
);
});
[2단계]
$(function() {
$('#bootChooserControl').load('/html5_ex/bootcloset/actions/fetchBootStyleOptions.php');
$('#bootChooserControl').change(function(event){
$('#productDetailPane').load(
'/html5_ex/bootcloset/actions/fetchProductDetails.php',
$(this).serialize()
);
$('#colorChooserControl').load(
'/html5_ex/bootcloset/actions/fetchColorOptions.php',
$(this).serialize(),
function(){
$(this).attr('disabled',false);
$('#sizeChooserControl').attr('disabled',true).html("");
}
);
});
$('#colorChooserControl').change(function(event){
$('#sizeChooserControl').load(
'/html5_ex/bootcloset/actions/fetchSizeOptions.php',
$('#bootChooserControl, #colorChooserControl').serialize(),
function(){
$(this).attr('disabled',false);
}
);
});
$('#selectionsPane').change(function(event){
$('[value=""]',event.target).remove();
});
});
[3단계]
phase.4a.html
$(function() {
$('#bootChooserControl').load('/html5_ex/bootcloset/actions/fetchBootStyleOptions.php');
$('#bootChooserControl').change(function(event){
$('#productDetailPane').load(
'/html5_ex/bootcloset/actions/fetchProductDetails.php',
$('#bootChooserControl').serialize(),
function(){ $('abbr').termifier('/html5_ex/bootcloset/actions/fetchTerm.php'); }
// load 된 html에 포함된 <tag>에 사용 - callback 함수
);
$('#colorChooserControl').load(
'/html5_ex/bootcloset/actions/fetchColorOptions.php',
$('#bootChooserControl').serialize(),
function(){
$('#colorChooserControl').attr('disabled',false);
$('#sizeChooserControl')
.attr('disabled',true)
.find('option').remove();
}
);
});
$('#colorChooserControl').change(function(event){
$('#sizeChooserControl').load(
'/html5_ex/bootcloset/actions/fetchSizeOptions.php',
$('#bootChooserControl,#colorChooserControl').serialize(),
function(){ $('#sizeChooserControl').attr('disabled',false); }
);
});
$('#selectionsPane').change(function(event){
$('[value=""]',event.target).remove();
});
$('body').ajaxComplete(function(event, xhr, options){
//options: $.ajax(options)의 options
// #productDetailPane 이 load 되면
if (options.url.indexOf('fetchProductDetails') != -1) {
$('div.termifier').remove();
}
});
});
[jquery.termifier.js]
jquery.jqia.termifier.js
(function($){
$.fn.termifier = function(actionURL, options) {
var settings = $.extend({
origin: {top:0, left:0},
paramName: 'term',
addClass: null,
actionURL: actionURL
},options||{});
this.click(function(event){
$('div.termifier').remove();
$('<div>')
.addClass('termifier' + (settings.addClass ? (' ') + settings.addClass : ''))
.css({
position: 'absolute',
top: event.pageY - settings.origin.top,
left: event.pageX - settings.origin.left,
display: 'none'
})
.click(function(event){
$(this).fadeOut('slow');
})
.appendTo('body')
.append(
$('<div>').load(
settings.actionURL,
encodeURIComponent(settings.paramName) + '=' + encodeURIComponent($(event.target).text()),
function(){ $(this).closest('.termifier').fadeIn('slow'); }
)
);
});
this.addClass('termified');
return this;
};
})(jQuery);
