dijit樣式定制(三)Button、RadioButton、CheckBox


dijit.form.DropDownButton

  dijit的button中除了ComboButton使用table布局外,其他的button都是用span嵌套布局,下圖中可看一下button的主要結構,以DropDownButton為例:

  

  下面就是介紹幾個比較重要的class

  .dijitDropDownButton、.dijitButton、.dijitComboButton、.dijitToggleButton這幾個類都影響各類型button的最外層整體效果,主要設置button的margin以及保證button中text的垂直居中。

  .dijitButtonNode,凡是“具有按鈕效果的地方”就有這個class,比如dijit.form.Select、dijit.form.NumberSpinner;該class一方面是用來設置動畫效果,一方面在dijit.css中設置全局效果,在dijit.form.*Button中對button的整體樣式效果做出了設置,如:border、padding、background-color、color(字體顏色)

  .dijitIcon*(Edit、Save等)負責顯示圖標,background-imge是相同的主要就是改變background-position

  .dijitButtonText設置margin與text-align來影響button中的文本

  .dijitArrowButtonInner上一篇講過,設置右側的向下箭頭

  claro/form/Button.less中line64-93這是不同狀態ArrowButton中的inner,104-149行中設置不同狀態下.dijitButtonNode的background-color、box-shadow來顯示效果,151-165主要設置comboButton中的顯示效果

 

dijit.form.RadioButton、dijit.form.CheckBox

  這個dijit都是通過div+label來布局,以RadioButton為例看一下其結構

  

  這兩個dijit都是通過改變不同狀態下左側div的背景圖片來顯示效果,.dijitRadio、.dijitCheckBox這兩個class設置了左側div的background-image、width、height、margin、padding;然后就是在不同狀態的class中設置background-position來背景圖片

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM