软件开发培训班 >> 编程开发 >> CSS


利用img和div标签实现图像下拉列表的模拟

　　本文标签：图像下拉列表 img div

　　

dropdownlist本身不支持图像列表，那么我们利用jquery来实现下拉列表的模拟  。

如图

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

其实很简单，不用自定义控件之类，因为我们在mvc下不能使用asp.net服务器控件，所以我们只用了div和img标签实现这个功能

1.首先介绍一下数据库表结构，这是下拉列表用到的数据

用到的表

下拉列表数据

src="http://www.zimg.cn/2011/11/20111185326.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.             }));

好了，可以试试效果了  。