DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 利用img和div標簽實現圖像下拉列表的模擬
利用img和div標簽實現圖像下拉列表的模擬
編輯：CSS詳解     

dropdownlist本身不支持圖像列表，那麼我們利用jquery來實現下拉列表的模擬。

如圖

下拉列表 下拉列表 下拉列表 下拉列表

其實很簡單，不用自定義控件之類，因為我們在mvc下不能使用ASP.Net服務器控件，所以我們只用了div和img標簽實現這個功能

1.首先介紹一下數據庫表結構，這是下拉列表用到的數據

用到的表

下拉列表數據

src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016123017110012.png"

下拉列表數據

2.創建 company，department的錄入窗體

如下圖，因為不是重點，不再介紹，只要注意一點，company.id為自增int，注意屬性窗口中auto Generated Value為true，Auto-Sync為OnInsert，這樣linq才可沒錯

屬性窗口

屬性窗口

  1. [AcceptVerbs(HttpVerbs.Post)]  
  2. public ActionResult CreateCompany(string name, string brIEf)  
  3. {  
  4. string strResult = "失敗";  
  5. ServiceDataContext db = new ServiceDataContext();  
  6. Company com = new Company();  
  7. com.Name = name;  
  8. com.Brief = brIEf;  
  9. try 
  10. {  
  11. db.CompanIEs.InsertOnSubmit(com);  
  12. db.SubmitChanges();  
  13. strResult = "成功";  
  14. }  
  15. catch 
  16. {  
  17. strResult = "失敗，名稱重復？";  
  18. }  
  19. return JSon(strResult);  
  20. }

3.設計下拉菜單（這才是我想說的重點）

  1. <td> 
  2.                     <img id="imgDefault" src='<%=ViewData["selectedUrl"]%>' class="imgCSS" alt="" /><img 
  3.                         id="imgArrow" src="<%=VIEwData["arrowUrl"]%>" class="DropdownCSS" alt="" /> 
  4.                     <div id="divList" class="scrolldivHidden"> 
  5.                         <%=VIEwData["imageTable"]%>div> 
  6.                     <%=Html.Hidden("head") %> 
  7.                 td>

這裡selectedUrl為選擇的圖像，有默認值，arrowUrl為下拉圖標，VIEwData["imageTable"]是下拉列表框

這裡用到的CSS

  1. .Visible  
  2. {  
  3.     visibility: visible;  
  4.     display: block;  
  5. }  
  6. .Hidden  
  7. {  
  8.     visibility: hidden;  
  9.     display: none;  
  10. }  
  11. .imgCSS  
  12. {  
  13.     cursor: hand;  
  14.     width: 18px;  
  15.     height: 18px;  
  16.     border: 1px solid #c3c3c3;  
  17. }  
  18. .DropdownCSS  
  19. {  
  20.     cursor: hand;  
  21.     width: 9px;  
  22.     height: 9px;  
  23.     vertical-align: top;  
  24. }  
  25. .scrolldivHidden  
  26. {  
  27.     position:absolute;  
  28.     width: 36px;  
  29.     height: 50px;  
  30.     z-index: 1;  
  31.     left: 0px;  
  32.     top: 0x;  
  33.     overflow-y: auto;  
  34.     overflow-x:hidden;  
  35.     display:none;  
  36. }  
  37. .scrolldivVisible  
  38. {  
  39.     position:absolute;  
  40.     width: 36px;  
  41.     height: 50px;  
  42.     z-index: 1;  
  43.     left: 0px;  
  44.     top: 0x;  
  45.     overflow-y: auto;  
  46.     overflow-x:hidden;  
  47.     display:block;  
  48. }

主要我們用到jquery來實現選擇等功能

這裡用到jquery一個選擇框的插件

  1. /*  
  2. * Manipulation for Html SELECT with jQuery  
  3. * Created by Baldwin (http://www.dnnsun.com)  
  4. * version: 1.0 (02/03/2009)  
  5. * @requires jQuery v1.2 or later  
  6. */ 
  7. ; (function($) {  
  8.     /* Clear all options */ 
  9.     $.fn.clearSelect = function() {  
  10.         return this.each(function() {  
  11.             if (this.tagName == 'SELECT') this.options.length = 0;  
  12.         });  
  13.     }  
  14.  
  15.     /* Fill the options with the object array: [{'Text':'Hello','Value':'1'}]*/ 
  16.     $.fn.fillSelect = function(data) {  
  17.         return this.clearSelect().each(function() {  
  18.             if (this.tagName == 'SELECT') {  
  19.                 var dropdownList = this;  
  20.                 if (data && data.length > 0) {  
  21.                     $.each(data, function(index, optionData) {  
  22.                         var option = new Option(optionData.Text, optionData.Value);  
  23.  
  24.                         if ($.browser.msIE)  
  25.                             dropdownList.add(option);  
  26.                         else 
  27.                             dropdownList.add(option, null);  
  28.                     });  
  29.                     dropdownList.disabled = false;  
  30.                 }  
  31.                 else 
  32.                     dropdownList.disabled = true;  
  33.             }  
  34.         });  
  35.     }  
  36.  
  37.     /* loading when applying AJax fillSelect */ 
  38.     $.fn.loadSelect = function(loadText) {  
  39.         var data = [{ 'Text': loadText, 'Value': ''}];  
  40.         this.fillSelect(data);  
  41.     }  
  42.  
  43.     /* selected the target option with value */ 
  44.     $.fn.selected = function(value) {  
  45.         return this.each(function() {  
  46.             if (this.tagName == 'SELECT') {  
  47.                 var options = this.options;  
  48.                 if (options.length > 0) {  
  49.                     $.each(options, function(index, optionData) {  
  50.                         // once match then exist loop  
  51.                         if (optionData.value == value) {  
  52.                             optionData.selected = true;  
  53.                             return false;  
  54.                         }  
  55.                     });  
  56.                 }  
  57.             }  
  58.         });  
  59.     }  
  60.  
  61.     /* TODO:selected the target option with text */ 
  62.     $.fn.selectedText = function(text) {  
  63.         return this.each(function() {  
  64.             if (this.tagName == 'SELECT') {  
  65.                 var options = this.options;  
  66.                 if (options.length > 0) {  
  67.                     $.each(options, function(index, optionData) {  
  68.                         // once match then exist loop  
  69.                         if (optionData.text == text) {  
  70.                             optionData.selected = true;  
  71.                             return false;  
  72.                         }  
  73.                     });  
  74.                 }  
  75.             }  
  76.         });  
  77.     }  
  78.  
  79.     /* returns the selected value */ 
  80.     $.fn.getSelected = function() {  
  81.         return $(this).val();  
  82.     }  
  83.  
  84.     /* return the text of selected option */ 
  85.     $.fn.getSelectedText = function() {  
  86.         return $(this).children("[@selected]").text();  
  87.     }  
  88. })(jQuery);   
  89.    
  90.  
  91. function getDepartment(data) { $("#department").fillSelect(data); }  
  92.  
  93. $("#company").change(function() {  
  94.                 $.getJSON("GetDepartment?company=" + $("#company").val(), null, getDepartment);  
  95.             });

實現了聯動框

下面的代碼實現了下拉和選擇功能

  1.  $("#imgArrow,#imgDefault").toggle(function() {  
  2. $("#divList").CSS("left", $("#imgDefault").CSS("left"));  
  3. $("#divList").slideToggle("fast");  
  4. }, function() {  
  5. $("#divList").CSS("left", $("#imgDefault").CSS("left"));  
  6. $("#divList").slideToggle("fast");  
  7. });  
  8. $("#head").val($("#imgDefault").attr("src"));  
  9. $("img:.imgList").click(function() {  
  10. $("#imgDefault").attr("src", $(this).attr("src"));  
  11. $("#divList").slideToggle("fast");  
  12. $("#head").val($("#imgDefault").attr("src"));  
  13. }).hover(function() {  
  14. $(this).removeClass().addClass("alpha");  
  15. }, (function() {  
  16. $(this).removeClass();  
  17. }));  
  18. $("body").click(function() {  
  19. $("#divList").slideUp("fast");  
  20. $("#imgDefault").hover(function() {  
  21. $(this).addClass("alpha");  
  22. }, function() {  
  23. $(this).removeClass();  
  24. });  
  25. });

還有我們用到的action

  1. public ActionResult CreateService()  
  2.        {  
  3.            VIEwData["company"] = GetCompanyList();  
  4.            List blank=new List();  
  5.            blank.Add(GetBlankDepartment());  
  6.            VIEwData["department"] =  blank.ToArray();  
  7.            VIEwData["head"] = GetHeadList();  
  8.            VIEwData["selectedUrl"] = Url.Content(Head_Folder + "Head/head0.gif");  
  9.            VIEwData["arrowUrl"] = Url.Content(Head_Folder + "/dropdown.gif");  
  10.            VIEwData["imageTable"] = GetImageTable();  
  11.            return VIEw();  
  12.        }   
  13.  [AcceptVerbs(HttpVerbs.Get)]  
  14.        public ActionResult GetDepartment(int? company)  
  15.        {  
  16.            SelectListItem[] items=null;  
  17.            if(company!=null)  
  18.               items = GetDepartmentList((int)company);  
  19.            else 
  20.            {  
  21.                SelectListItem i=GetBlankDepartment();  
  22.                items=new SelectListItem[]{i};  
  23.            }  
  24.            return JSon(items);  
  25.        }  
  26.      private SelectListItem[] GetCompanyList()  
  27.        {  
  28.            ServiceDataContext db = new ServiceDataContext();  
  29.            var items = from t in db.CompanIEs  
  30.                        select new 
  31.                        {  
  32.                            ID = t.ID,  
  33.                            Name = t.Name,  
  34.                            Brief = t.BrIEf  
  35.                        };  
  36.            List s = new List();  
  37.            SelectListItem b = new SelectListItem();  
  38.            b.Text = "--please select company--";  
  39.            b.Value = "";  
  40.            s.Add(b);  
  41.            foreach (var i in items)  
  42.            {  
  43.                SelectListItem item = new SelectListItem();  
  44.                item.Text = i.Name;  
  45.                item.Value = i.ID.ToString();  
  46.                s.Add(item);  
  47.            }  
  48.            return s.ToArray();  
  49.        }  
  50.  
  51.        private SelectListItem[] GetDepartmentList(int nCompanyId)  
  52.        {  
  53.  
  54.            ServiceDataContext db = new ServiceDataContext();  
  55.            var items = from t in db.Departments  
  56.                        where t.Company==nCompanyId  
  57.                        select new 
  58.                        {  
  59.                            ID = t.ID,  
  60.                            Name = t.Name,  
  61.                            Brief = t.BrIEf  
  62.                        };  
  63.            List s = new List();  
  64.            SelectListItem b = new SelectListItem();  
  65.            b.Text = "--please select department--";  
  66.            b.Value = "";  
  67.            s.Add(b);  
  68.            foreach (var i in items)  
  69.            {  
  70.                SelectListItem item = new SelectListItem();  
  71.                item.Text = i.Name;  
  72.                item.Value = i.ID.ToString();  
  73.                s.Add(item);  
  74.            }  
  75.            return s.ToArray();  
  76.        }  
  77.  
  78.        private string[] GetHeadList()  
  79.        {  
  80.            List head = new List();  
  81.            string strServer=Url.Content("~/Content/images/Head/");  
  82.            string strUrlFolder = Server.MapPath(Url.Content(Head_Folder+"Head/"));  
  83.            string[] fileEntrIEs = Directory.GetFiles(strUrlFolder);  
  84.            FileInfo fi=null;  
  85.            foreach (string file in fileEntrIEs)  
  86.            {  
  87.                fi =  new FileInfo(file);  
  88.                if (fi.Name.ToLower().IndexOf("head")==0 && !fi.FullName.ToLower().Contains("_offline"))  
  89.                {  
  90.                    head.Add(strServer+fi.Name);  
  91.                }  
  92.            }  
  93.            return head.ToArray();  
  94.        }  
  95.  
  96.        private string GetImageTable()  
  97.        {  
  98.            System.Text.StringBuilder sbResult = new System.Text.StringBuilder();  
  99.            string[] arrImgs = GetHeadList();  
  100.            foreach (string strImage in arrImgs)  
  101.            {  
  102.                string strFile=strImage.Substring(strImage.LastIndexOf("/")+1);  
  103.                sbResult.AppendLine(string.Format("",  
  104.                    "img_"+strFile.Remove(strFile.LastIndexOf(".")),  
  105.                    Url.Content(strImage)  
  106.                    ));  
  107.            }  
  108.            string strImg=sbResult.ToString();  
  109.            strImg=strImg.Remove(strImg.Length-5,5);  
  110.            return strImg;  
  111.        }  
  112.    }

注意紫色處，我們加了CSSimgList來供jquery選擇

  1. $("img:.imgList").click(function() {  
  2.                 $("#imgDefault").attr("src", $(this).attr("src"));  
  3.                 $("#divList").slideToggle("fast");  
  4.                 $("#head").val($("#imgDefault").attr("src"));  
  5.             }).hover(function() {  
  6.                 $(this).removeClass().addClass("alpha");  
  7.             }, (function() {  
  8.                 $(this).removeClass();  
  9.             }));

好了，可以試試效果了。

CSS詳解
CSS網頁布局時常犯的10個小錯誤
CSS網頁布局時常犯的幾種小錯誤：　　1. 檢查Html元素是否有拼寫錯誤、是否忘記結束
DIV+CSS網頁布局對SEO的影響
本文和大家分享一下DIV+CSS網頁布局對SEO的影響，SEO主要就是通過對網站的結構，標簽，排版
HTML 5：實至名歸還是言過其實？
盡管還有很長的路要走，但Html 5已經開始吸引越來越多的人的目光。大型社交網站Facebook已

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS的一些圓角圖形實例分享 CSS縮寫語法總括 理解繼承屬性及應用 學習筆記 IE8兼容代碼用法解析 Webjx推薦15個好的CSS網格布局生成器 CSS制作清爽綠色格調圖文box通用樣式 用相對定位和負向移動完成圖片象框陰影 CSS 中的黃金分割率 DIV+CSS網頁重構概念詳解 CSS布局的8個你需要掌握的技巧
熱門推薦
用clearfix:after消除css浮動解決外部div不能撐開問題 CSS3設計賽:基於純CSS3技術的前5名設計師 重新認識一下網頁標准 SPAN和DIV的區別 讓FireFox與IE兼容 CSS常見問題大全(1) 關於網頁圖片的屬性 CSS語法手冊（二）文本屬性 hCalendar微格式:關於事件和基於時間或地點的活動 css插入透明png(IE6下PNG背景透明）
大家都在看
簡單html5代碼獲取地理位置 js實現從數組裡隨機獲取元素 基於Jquery的仿照flash放大圖片效果代碼 JavaScript實現的雙向跨域插件分享 js前端面試題及答案整理（一） XML簡明教程第7課:在XML文檔中使用數據類型 javascript中的繼承實例代碼 JS操作select下拉框動態變動(創建/刪除/獲取)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved