[筆記]下拉式選單 DropDownList的子選項Item (ListItem)改用圖片

摘要:[筆記]下拉式選單 DropDownList的子選項Item (ListItem)改用圖片
Bootstrap也有類似的解法,比較簡單





 

上一篇文章

[筆記]下拉式選單 DropDownList的群組(Group) & HTML5的 optgroup

 

 

如果要在下拉式選單(DropDownList)、清單控制項的子選項(ListItem)

加入圖片與文字,該怎麼作?

 

 

找到幾篇相關的文章,為自己做筆記:

 

這幾個方法,都是加入CSS來完成。

例如:

DropdownList Item With Custom Icon Image In ASP.NET Using C#.Net

http://www.aspdotnet-pools.com/2014/09/dropdownlist-item-with-custom-icon.html

 

putting images with options in a dropdown list
 
<select>
    <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
    <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
</select>

可以透過 .Attributes.Add()方法,加入 style=" "

只有 Firefox瀏覽器有效果

 

 

下面的方法,是用jQuery的 .ddslick()來做

http://designwithpc.com/Plugins/ddSlick

http://www.jquerybyexample.net/2012/05/how-to-add-images-in-dropdown-list.html

 

 

其他作法:

DropDownList的選項、圖片,都放在DB的資料表裡面

http://www.c-sharpcorner.com/UploadFile/9f0ae2/Asp-Net-bind-dropdownlist-with-images/

 



...........................................................................................................................................

 

在RWD(Bootstrap)裡面,也有類似的作法

簡潔而且輕鬆

請看:http://getbootstrap.com/examples/theme/

 

 

請在HTML表頭裡面,加入這些

請參考 

簡單的Bootstrap效果(v 3.0.0 / v 3.2.0版)與入門教學 (#2 範例修正與下載)

 

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="/Content/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="/Content/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="/Scripts/jquery-1.11.1.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
 
    <!-- **** 本範例必須加入以下的檔案,才能生效。********************************************** -->
    <!-- Custom styles for this template -->
    <link href="/Scripts/theme.css" rel="stylesheet">
 
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/Scripts/ie-emulation-modes-warning.js"></script>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
 
 
HTML的 <body>內容如下 
 
      <div class="page-header">
        <h1>Dropdown menus</h1>
      </div>
 
      <div class="dropdown theme-dropdown clearfix">
        <a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
 
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 
          <li role="presentation" class="divider"></li>   <!-- 分隔線 -->
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
              <li role="presentation"><img src="Images_Book\bmw.jpg" /></li>
        </ul>
      </div>

 

 

 

 

 

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net



ASP.NET遠距教學、線上課程(Web Form + MVC)。 第二門 課程「四折」-- 以MVC課程 作優惠。
第一天課程, "完整" 試聽。  如不滿意  全額退費!
................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

*********************************************************************************************

*** ASP.NET MVC線上課程 第一天 免費看 (5.5小時) *** 

************************************************************(歡迎索取,免費申請)*****

 

Blog文章 "附的範例" 無法下載,請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)

......................................................................................................................................................

...................................................................................................................................................... 

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

    MIS2000 Lab.  線上教學影片(YouTube) **免費觀賞**