2013年11月18日 星期一

Bootstrap, jQuery 樣式化 select 外掛

本來 html 的 select 就不大能樣式化,本來只是改變 select 的高度,後來發現 Mac 的 chorme 跟 safari 都不支援,我想有需求還是用 plugin 好了。

網路上有很多,我這邊找了兩個來用。

Bootstrap-select
這個是 bootstrap 的,引入該引入的。
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>   
  2. <script type="text/javascript" src="bootstrap-select.js"></script>   
  3. <link rel="stylesheet" type="text/css" href="bootstrap-select.css">   
  4.   
  5. <!-- 3.0 -->   
  6. <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">   
  7. <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  

html的結構就照舊就好了, plugin 會自動把 html 變成可以樣式化的 tag,然後使用 plugin。

  1. $('select').selectpicker();  

不過如果一開始沒用 bootstrap ,回頭要改樣式就很痛苦,於是另一個是用純 jQuery 的 jquery-selectbox

同樣引入該引入的(js 跟 css),就可以用了。
  1. $('select').selectBox();  

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...