tab sample(use JQuery)

tab.js

var Tab = function(tabName){
	this.tabName = tabName;
    this.checkDivId = tabName + '_users';
	this.selectorDiv = tabName + '_select';
	this.allDiv = tabName + '_all';
	this.requestDiv = tabName + '_request';
};
Tab.SELECTED_MAX = 50;
Tab.prototype = {
    selectedCnt : 0,
    show : function (users){
		var allSelect = this.tabName +'_allSelect';
		for(var i = 0, len = users.length; i < len ; i++){
			var user = users[i];
			var userId = user['id'];
			var userName = user['name'];
			var checkboxId = this.tabName+'_user_id_'+ userId ;
			$('#' + this.checkDivId).append(
				'<div id="'+ this.tabName+'_user_'+ userId +'">'+
				'<input type="checkbox" id="'+ checkboxId +'" value="'+ userId +'">' + 
				'<span id="user_name_'+userId +'">'+ userName + '</span>'+
				'</div>'
			);
			$('#'+checkboxId).click({user:user, tabObj:this }, this.selectUserEvent);
		}
		$('#'+ this.allDiv).append('<input type="checkbox" value="all" id="'+ allSelect +'"> <== all select');
		$('#'+ allSelect).click({user:user, tabObj:this}, this.selectAll);
		$('#'+ this.requestDiv).append('<input type="button" value="request" id="'+ this.tabName +'_req">');
		$('#'+ this.tabName +'_req').click({tabName:this.tabName}, this.requestEvent);
	},
	selectUserEvent : function(event){
		var tabObj = event.data['tabObj'];
		var user = event.data['user'];
		var userId = user['id'];
		var userName = user['name'];
		var tabName = tabObj['tabName'];
		var selectedCheckboxId = tabName+'_selected_user_id_'+ userId ;
		if(Tab.SELECTED_MAX <= tabObj.selectedCnt){
			alert('max');
			$(this).attr('checked', false);
			return;
		}

		$('#'+ tabName +'_user_'+userId).toggle();
		tabObj.selectedCnt++;

		$('#'+ tabObj.selectorDiv).append(
			'<div id="'+ tabName +'_selected_user_'+ userId +'">'+
			'<input type="checkbox" id="'+ selectedCheckboxId +'" value="'+ userId +'">' + 
			'<span id="'+ tabName +'_selected_user_name_'+userId +'">'+ userName + '</span>'+
			'</div>'
		);
		$('#'+selectedCheckboxId).click({user:user, tabObj:tabObj}, tabObj.delUserEvent);
	},
	requestEvent : function(event){
		var tabObj = event.data['tabObj'];
		$("input[id^='user_id_']:checked").each(function(){
			console.log($(this).val());
		})
    },
	delUserEvent : function(event){
		var tabObj = event.data['tabObj'];
		var user = event.data['user'];
		var userId = user['id'];
		var tabName = tabObj['tabName'];
		var allSelect = tabName +'_allSelect';
		$('#'+ tabName + '_user_'+userId).toggle();
		$('#'+ tabName + '_user_id_'+userId).attr('checked', false);
		$('#'+ tabName + '_selected_user_'+ userId).remove();
		tabObj.selectedCnt--;
		$('#'+allSelect).attr('checked', false);
	},
	selectAll : function(event){
		var tabObj = event.data['tabObj'];
		var tabName = tabObj['tabName'];
		if($(this).attr('checked')){
			$("input[id^='"+ tabName +"_user_id_']:not(:checked)").each(function(){
				if(Tab.SELECTED_MAX <= tabObj.selectedCnt){
					return false;
				}
				$(this).click();
			});
		}else{
			$("input[id^='"+ tabName +"_selected_user_id_']").each(function(){
				$(this).click();
			})
		}
	}
};

var Tabs = function(tabs){
	this.tabs = tabs;
};
Tabs.prototype = {
	show : function (){
	   $.getJSON('./tabdata.json', $.proxy(function(data){
			var users = data['users'];
			var installedUser = [];
			var newUser = [];
			for(var i = 0, len = users.length; i < len ; i++){
				var user = users[i]
				if(user['installed']){
					installedUser.push(user);
				}else{
					newUser.push(user);
				}
			}
			this.tabs['all'].show(users);
			this.tabs['game'].show(installedUser);
			this.tabs['fb'].show(newUser);
	   },this));
	}
};
var tab1 = new Tab('tab1');
var tab2 = new Tab('tab2');
var tab3 = new Tab('tab3');
var tabs = new Tabs({all:tab1, game:tab2, fb:tab3});
tabs.show();

tabdata.json

{"users" : [
{ "id" : 0, "name" : "user0", "installed": false},
{ "id" : 1, "name" : "user1", "installed": true},
{ "id" : 2, "name" : "user2", "installed": false},
{ "id" : 3, "name" : "user3", "installed": true},
{ "id" : 4, "name" : "user4", "installed": false},
{ "id" : 5, "name" : "user5", "installed": true},
{ "id" : 6, "name" : "user6", "installed": false},
{ "id" : 7, "name" : "user7", "installed": true},
{ "id" : 8, "name" : "user8", "installed": false},
{ "id" : 9, "name" : "user9", "installed": true},
{ "id" : 499, "name" : "user499", "installed": true}
]}

tabsample.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="tab.js"></script>
</head>
<body>
	all user <br>
	<div id="1">
		<div id="tab1_all"></div>
		<div id="tab1_users"></div>
		selected user <br>
		<div id="tab1_select"></div>
		<div id="tab1_request"></div>
	</div>
	installed user <br>
	<div id="2">
		<div id="tab2_all"></div>
		<div id="tab2_users"></div>
		selected user <br>
		<div id="tab2_select"></div>
		<div id="tab2_request"></div>
	</div>
	new user <br>
	<div id="3">
		<div id="tab3_all"></div>
		<div id="tab3_users"></div>
		selected user <br>
		<div id="tab3_select"></div>
		<div id="tab3_request"></div>
	</div>
</body>
</html>