操作按鈕樣式改變(yii環境)

最新推荐文章于 2025-09-12 13:16:34 发布

weixin_33749242

最新推荐文章于 2025-09-12 13:16:34 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：https://my.oschina.net/resory/blog/93553

本文介绍了一个使用PHP和JavaScript实现的操作按钮状态管理功能。通过定义不同的操作如添加、更新、保存等，并根据当前操作切换按钮的状态（启用或禁用）。文章展示了如何在不同操作之间进行切换并更新按钮样式。

为什么80%的码农都做不了架构师？>>>

index.php

<?php
/* @var $this TranslationController */
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl."/js/system/operation.js");
Yii::app()->clientScript->registerCssFile(Yii::app()->request->baseUrl."/css1/system/operation.css");
?>
<h1><?php echo $this->id . '/' . $this->action->id; ?></h1>



<div id="operation">
	<div id="add-data">
		<input type="button" name="form-add" id="form-add" value=<?php echo Yii::t('default','Add')?> disabled></input>
	</div>
	<div id="update-data">
			<input type="button" name="form-update" id="form-update" value=<?php echo Yii::t('default','Update')?> disabled></input>
	</div>
	<div id="save-data">
			<input type="button" name="form-save" id="form-save" value=<?php echo Yii::t('default','Save')?> disabled></input>
	</div>
	<div id="cancel-data">
			<input type="button" name="form-cancel" id="form-cancel" value=<?php echo Yii::t('default','Cancel')?> disabled></input>
	</div>
	<div id="search-data">
		<input type="button" name="addSearchData" id="form-search" value=<?php echo Yii::t('default','Search')?> disabled></input>
	</div>
</div>

operation.css

#operation{
	width:570px;
	margin-bottom:10px;
	height:auto;
}

#operation input{
	width:60px;
	background-color:#0CF;
	margin-right:5px;
	height:25px;
	color:white;
	border-radius:5px;
	cursor:pointer;
	font-family:inherit;
}

input#form-add{
	float:left
}

input#form-cancel{
	float:left;
}

input#form-save{
	float:left;
}

input#form-update{
	float:left;
}

input#form-search{
	float:left;
}

.save-data{
	margin-top:10px;
	
}

#search-data-input{
	display:none;
	/* width:500px; */
	font-size:15px;
	margin-bottom:5px;
	margin-top:5px;
}

#search-data-input span{
	padding:5px;
}

thead th , tbody tr , tbody td{
	text-align:center;	
}

#grid .k-grid-header .k-header {
	text-align:center;	
}

operation.js

//定義操作
var add = true ,
	update = true,
	save = true,
	cancel = true,
	search = true,
	opeation = '';

$(function(){
	
	//初始化
	init();
	
	//add操作
	$("#add-data").click(function(){
		var add = false,
			update = false,
			search = false;
		buttonChange(add,update,save,cancel,search);
	});
	
	//update操作
	$("#update-data").click(function(){
		var add = false,
			update = false,
			search = false;
		buttonChange(add,update,save,cancel,search);
	});
	
	//save操作
	$("#save-data").click(function(){
		//save操作之後,與原始狀態相同
		init();
	});
	
	//cancel操作
	$("#cancel-data").click(function(){
		//cancel操作之後,與原始狀態相同
		init();
	});
	
	//search
	$("#search-data").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",true);
	}
	
	//按鈕激活樣式
	function buttonActive(operation){
		$("#form-"+operation).css({"background-color":"#0CF"});
		$("#form-"+operation).removeAttr("disabled");
	}
});

樣式演示: