CRUD按鈕操作代码,Css代码库,德仔网

代码语言

代码分类

【Css】 CRUD按鈕操作

作者:resory / 发布于2012/12/4/ 684

//定義操作,true意味著激活的按鈕.false意味著失效的按鈕.
var add = true ,			
	update = true,
	save = true,
	cancel = true,
	search = true,
	opeation = '';

$(function(){
	
	//初始化
	init();
	
	//add操作
	$("#form-add").click(function(){
		var add = false,
			update = false,
			search = false;
		buttonChange(add,update,save,cancel,search);
	});
	
	//update操作
	$("#form-update").click(function(){
		var add = false,
			update = false,
			search = false;
		buttonChange(add,update,save,cancel,search);
	});
	
	//save操作
	$("#form-save").click(function(){
		//save操作之後,與原始狀態相同
		init();
	});
	
	//cancel操作
	$("#form-cancel").click(function(){
		//cancel操作之後,與原始狀態相同
		init();
	});
	
	//search
	$("#form-search").click(function(){
		//點擊收縮后得到某些數據,update激活.
		var add = false,
			save = false,
			cancel = false,
			search = false;
		buttonChange(add,update,save,cancel,search);	
	});
	
	//操作按鈕初始化,一開始時只有add,search是激活的
	function init(){
		buttonActive('add');
		buttonUnactive('update');
		buttonUnactive('save');
		buttonUnactive('cancel'); 
		buttonActive('search');
	}
	
	//按鈕激活與失效轉換
	function buttonChange(add,update,save,cancel,search){
		//true的為激活,否則為失效
		add==true?buttonActive('add'):buttonUnactive('add');
		update==true?buttonActive('update'):buttonUnactive('update');		
		save==true?buttonActive('save'):buttonUnactive('save');
		cancel==true?buttonActive('cancel'):buttonUnactive('cancel');		
		search==true?buttonActive('search'):buttonUnactive('search');
	}
	
	//按鈕失效樣式
	function buttonUnactive(operation){
		$("#form-"+operation).css({"background-color":"#CCCCBB"});
		$("#form-"+operation).attr("disabled",'disabled');
	}
	
	//按鈕激活樣式
	function buttonActive(operation){
		$("#form-"+operation).css({"background-color":"#0CF"});
		$("#form-"+operation).removeAttr("disabled");
	}
	
	function drawTable(){
		
	}
});

试试其它关键字

　按鈕操作　

同语言下

可能有用的

resory贡献的其它代码(1)

.CRUD按鈕操作