index.php
clientScript->registerScriptFile(Yii::app()->request->baseUrl."/js/system/operation.js");Yii::app()->clientScript->registerCssFile(Yii::app()->request->baseUrl."/css1/system/operation.css");?>operation.cssid . '/' . $this->action->id; ?>
disabled>disabled>disabled>disabled>disabled>
#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"); }});
樣式演示:
