탭메뉴 선택처리 콜백함수로 받기

선택한 메뉴 아이템의 인덱스값 구하기

 

 

- 일반함수

	<script>

		$(document).ready(function(){
			// 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출
			tabMenu("#tabMenu1");

		});

		function tabMenu(selector){
			var $tabMenu = null;
			var $menuItems = null;
			// 선택한 탭메뉴를 저장할 변수
			var $selectMenuItem =null;

			// 요소 초기화, tabMenu() 함수 내부에서 사용할 공통 데이터는 모두 이곳에 작성해주세요.
			function init(selector){
				$tabMenu = $(selector);
				$menuItems =$tabMenu.find("li");
			}

			// 이벤트 등록은 모두 이곳에 작성해주세요.
			function initEvent(){
				$menuItems.click(function(){
					setSelectItem($(this));
				});
			}

			// 선택 메뉴 아이템 만들기
			function setSelectItem($item){
				if($selectMenuItem){
					$selectMenuItem.removeClass("select");
				}
				$selectMenuItem = $item;
				$selectMenuItem.addClass("select");

				// 선택한 인덱스 값 출력하기
				$("#info").html($selectMenuItem.index());
			}

			init(selector);
			initEvent();
		}
	</script>
    

	<ul class="tab-menu" id="tabMenu1">
		<li class="menuitem1">google</li>
		<li class="menuitem2">facebook</li>
		<li class="menuitem3">pinterest</li>
		<li class="menuitem4">twitter</li>
		<li class="menuitem5">airbnb</li>
		<li class="menuitem6">path</li>
	</ul>
	<div>선택한 인덱스 값 : <span id="info"></span></div>

가장 간단한 방법은 이전에 탭메뉴 예제에서 

$("#info").html($selectMenuItem.index()); 이런식으로 구문을 추가해주는것

하지만 이렇게 하면 탭메뉴는 반드시 #info가 있어야 한다.

.html은 html요소를 가져오는것

 

 

 

-콜백함수

	<script>
    
		$(document).ready(function(){
			// 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출
			tabMenu("#tabMenu1", onSelectItem); //4
		});

		function tabMenu(selector, callback){ //1
    		var $tabMenu = null;
			var $menuItems = null;
			// 선택한 탭메뉴를 저장할 변수
			var $selectMenuItem =null;

			// 요소 초기화, tabMenu() 함수 내부에서 사용할 공통 데이터는 모두 이곳에 작성해주세요.
			function init(selector){
				$tabMenu = $(selector);
				$menuItems =$tabMenu.find("li");
			}

			// 이벤트 등록은 모두 이곳에 작성해주세요.
			function initEvent(){
				$menuItems.click(function(){
					setSelectItem($(this));
				});
			}

			// 선택 메뉴 아이템 만들기
			function setSelectItem($item){
				if($selectMenuItem){
					$selectMenuItem.removeClass("select");
				}
				$selectMenuItem = $item;
				$selectMenuItem.addClass("select");


				//선택 콜백 함수 실행
				if(callback!= null) //2
				callback($selectMenuItem.index());
			}

			init(selector);
			initEvent();
		}

		// 선택 처리
		function onSelectItem(index){ //3
    		$("#info").html(index);
		}
	</script>
    
    	<ul class="tab-menu" id="tabMenu1">
		<li class="menuitem1">google</li>
		<li class="menuitem2">facebook</li>
		<li class="menuitem3">pinterest</li>
		<li class="menuitem4">twitter</li>
		<li class="menuitem5">airbnb</li>
		<li class="menuitem6">path</li>
	</ul>
	<div>선택한 인덱스 값 : <span id="info"></span></div>
    

 

$("#info").html($selectMenuItem.index()); 이 구문을 onSelectItem 함수로 만들고 index 매개변수로 연결한다.

tabMenu 함수에 callback 매개변수를 추가하고 onSelectItem 함수와 연결한다.

callback 함수 호출을 추가

callback 함수로 넘어온 값이 있을 경우 callback 함수와 인덱스값을 매개변수로 해서 넘겨준다