jQuery ajax와 $.Callback() 함수를 활용하기

$('#list').fusionAjaxRecord 를 통해 ajax 통신을 마친 후
외부 함수인 prints 로 데이타를 전송한다.

# @ 외부 함수인 prints 함수를 ajax 통신이 마친 후 호출 및 데이타 전송

< script type="text/javascript">
$(document).ready(function()
{
	// obj : html 아이디 및 클래스 elementTag
	function prints(obj,data){
		$.each(data, function(key,state)
		{
			// 값 처리
		});
	}
	
	$('#list').fusionAjaxRecord({
		'filename':'./modules/test_view.php',
		'data':{
                         'tname':'bbs_notice',
		         'current_record':'1'
                 }
	}, prints);
});
< /script>

@# 전체소스 /==========================================================

< script>
jQuery(function($) 
{
	/**
	@prints : 외부 함수 function prints(){}
	function prints(obj, data){
	}
	
	$('#list').fusionAjaxRecord({
		'filename':'./modules/bbs_view.php',
		'data':{
				page:1,
				uid:10
		}
	}, prints);
	*/
	$.fn.fusionAjaxRecord= function(params,callMethod)
	{
		var targetID = $(this);
		var callbacks = $.Callbacks();
		var callFunction =callMethod;

		var param = $.extend({
			filename : null,
			data : ''
		},params||{});

		$.ajax({
			type: "post",
			url: param.filename,
			cache: false,
			dataType :'text',
			data :param.data,
			success: function(data, status)
			{
				var json = eval("(" + data + ")");				
				if(typeof(json.result) != 'undefined')
				{
					if(json.result == 'false')
						alert(json.msg);
					else{
						callbacks.add(callFunction);
						callbacks.fire(targetID,json);
					}
				}
			},
			error: function(data, status, errorThrown){
				alert(data.responseText+' '+status+' '+errorThrown);
			}
		});
	}
});
< /script>

jQuery SELECT 메뉴 onChange 이벤트

#@ HTML

< select name="selectEmail" id="selectEmail">
						< option value="">직접입력< /option>
						< option value="naver.com">naver.com< /option>
						< option value="chol.com">chol.com< /option>
						< option value="dreamwiz.com">dreamwiz.com< /option>
						< option value="empal.com">empal.com< /option>
				  < /select>

#@ 방법 1 /=============

< script>
$(document).ready(function()
{
	$('#selectEmail').change(function(){
		alert( $("#selectEmail option:selected").val() );
	});
});
< /script>

#@ 방법2 /===============

< script>
$(document).ready(function()
{
	$('#selectEmail').change(function(){
		$("#selectEmail option:selected").each(function () {
               		alert( $(this).val()+' '+ $(this).text()  );
		});
	});
});
< /script>

동적 스크립트 로딩 및 액션

jQuery 특정 자바스크립트가 로딩 된 후

원하는 작업을 하도록 할때

$.getScript("myplugin.js", function() {
     alert('이벤트 처리를 합시다');
});

jQuery 마우스 롤오버 이미지 기능과
메뉴 활성화 및
필요없는 메뉴 감추기[hidden]

이젠 쉽게 메뉴 롤오버를 적용 시키세요

메뉴 뿐 아니라 탭메뉴 적용에도 탁월한 기능을 보입니다.

브라우저 테스트 : 익스[6,7,8,9], 파이어폭스, 사파리, 오페라, 크롬, 안드로이드, 아이폰, 탭, 아이패드

#@ HTML 

< nav id="Nav1">
	< a href="#" title="메뉴1">< img src="./img/tab_a_01_off.gif" />
	< a href="#" title="메뉴2">< img src="./img/tab_a_02_off.gif"  />
	< a href="#" title="메뉴3">< img src="./img/tab_a_06_off.gif" />
	< a href="#" title="메뉴4">< img src="./img/tab_a_03_off.gif" />
		< div class="sub_menu4">
	   		< a href="#" title="메뉴4  서브메뉴1">< img src="./img/tab_b_01_off.gif">
	    		< a href="#" title="메뉴4  서브메뉴2">< img src="./img/tab_b_02_off.gif">
	    		< a href="#" title="메뉴4  서브메뉴3">< img src="./img/tab_b_03_off.gif">
		< /div>
	< a href="#" title="메뉴5">< img src="./img/tab_a_04_off.gif" />

< /nav>

<@# 사용법>

1. 1차 메뉴에 롤오버 기능 적용 방법

< script type="text/javascript" src="hover.js" >< /script>
< script type="text/javascript">
$(document).ready(function()
{
	// 1차 메뉴중 [메뉴1] 활성화 시키기
	$('.hover').fusionNavi({'element':'#NavI1','current':'','remove':''});
});

< /script>

2. 1차 메뉴 롤오버 기능 및 "메뉴1번" 활성화 적용 방법

< script type="text/javascript" src="hover.js" >< /script>
< script type="text/javascript">
$(document).ready(function()
{
	// 1차 메뉴중 [메뉴1] 활성화 시키기
	$('.hover').fusionNavi({'element':'#NavI1','current':0,'remove':''});

	// 1차 메뉴 4번의 2차 메뉴 비활성화
	$('.hover').fusionNavi({'element':'.sub_menu4','current':'','remove':''});
});

< /script>

3. 1차 "메뉴4번" 활성화 2차 "메뉴1번" 활성화 적용 방법

< script type="text/javascript" src="hover.js" >< /script>
< script type="text/javascript">
$(document).ready(function()
{
	// 1차 메뉴중 [메뉴4] 활성화 시키기
	$('.hover').fusionNavi({'element':'#NavI1','current':3,'remove':''});

	// 1차 메뉴 4번의 2차 메뉴 1번 활성화
	$('.hover').fusionNavi({'element':'.sub_menu4','current':0,'remove':''});
});

< /script>

4. 1차 "메뉴5번" 메뉴 감추기(hidden) 방법

< script type="text/javascript" src="hover.js" >< /script>
< script type="text/javascript">
$(document).ready(function()
{
	// 1차 메뉴중 [메뉴1] 활성화 시키기
	$('.hover').fusionNavi({'element':'#NavI1','current':0,'remove':4});

	// 1차 메뉴 4번의 2차 메뉴 비활성화
	$('.hover').fusionNavi({'element':'.sub_menu4','current':'','remove':''});
});

< /script>

@# 간단 설명

'element':'[#아이디명 || .class명]',   // 특정 "#아이디" 또는 ".클래스" 밑에 있는 <a 태그로 감싸인 <img 태그에 적용

'current':'[ 3 || null ]',             // 적용 순번 및 비활성화 [ 0 부터 시작 || 비활성화]

remove':'[ 4 || null ]'                // 감추고 싶은 메뉴 [ 0 부터 시작 || 비활성화]

});

#@ script 소스 /======================================================

jQuery(function($) 
{
	$.fn.fusionNavi= function(params)
	{
		var targetID = params['element'];				//적용위치
		var current_position = params['current'];		//현재활성화 메뉴 순번
		var remove_position = params['remove'];		//메뉴 감추기(hidden) 메뉴 순번

		// 현재 메뉴 제외, 나머지에 class="hover"
		$(targetID+' > a img').addClass('hover');

		// 메뉴 감추기(hidden)
		try{
			$(targetID+' > a:eq('+remove_position+') img').remove();
		}catch(e){}

		// 현재 메뉴 활성화
		try{
			if(current_position || current_position=="0"){
				var hoverOnCur = $(targetID+' > a img').eq(current_position).attr('src').replace('_off','_on');
				$(targetID+' > a img').eq(current_position).attr('src', hoverOnCur);
				$(targetID+' > a img').eq(current_position).removeClass('hover');
			}
		}catch(e){}

		// on
		$(targetID+' > a img.hover').mouseenter(function(){
			var hoverOn = $(this).attr('src').replace('_off','_on');
			$(this).attr('src', hoverOn);
		});

		// off
		$(targetID+' > a img.hover').mouseleave(function(){
			var hoverOff = $(this).attr('src').replace('_on','_off');
			$(this).attr('src', hoverOff);
		});
	}
});

jQuery 메인에 위로 흐르는 공지글 에니메이션

#@ css /===================================

< style >
#scrollup {
   position: relative;
   overflow: hidden;
   height: 20px;
   width: 200px
 }
.headline {
   position: absolute;
   top: 190px;
   left: 5px;
   height: 25px;
   width:190px;
}
< /style >

#@ HTML /===================================

< div id="scrollup" >
     < div class="headline">공지글 1
     < div class="headline">공지글 2
     < div class="headline">공지글 3
< /div >

#@ SCRIPT /=================================

< script type="text/javascript" >
var headline_count;
var headline_interval;
var old_headline = 0;
var current_headline = 0;
var headline_top = 0;
jQuery(function($) 
{
	$.fn.scrollup= function(params)
	{
		var targetID = $(this);
		
		var param = $.extend({
			delaytime : 3000,
			top:0
		},params||{});
		
		headline =param.top;
		
		headline_count = $("div.headline").size();
	    $("div.headline:eq("+current_headline+")").css('top',headline+'px');
	 
	    headline_interval = setInterval(headline_rotate,param.delaytime); //time in milliseconds
	    $(targetID).hover(function() {
	        clearInterval(headline_interval);
	    }, function() {
	        headline_interval = setInterval(headline_rotate,param.delaytime); //time in milliseconds
	        headline_rotate();
	    });
	}
});

function headline_rotate() {
    current_headline = (old_headline + 1) % headline_count;
    $("div.headline:eq(" + old_headline + ")").animate({top: -25},"slow", function() {
        $(this).css('top','210px');
    });
    $("div.headline:eq(" + current_headline + ")").show().animate({top: headline},"slow");
    old_headline = current_headline;
}

$('#scrollup').scrollup();
< /script >

#@ jquery 데모 주소 /=======================================

http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader#Demo