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

开发 前端
本文介绍了利用img和div标签实现图像下拉列表的方法。这个方法不用自定义控件之类,因为我们在mvc下不能使用asp.net服务器控件,所以我们只用了div和img标签实现这个功能。

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

如图

下拉列表 下拉列表 下拉列表 [[3393]]

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

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

用到的表

下拉列表数据

src="https://s6.51cto.com/oss/202207/19/b60497b04629aed78e6686c66ad342bcb8c24c.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. /* Fill the options with the object array: [{'Text':'Hello','Value':'1'}]*/
  15. $.fn.fillSelect = function(data) {
  16. return this.clearSelect().each(function() {
  17. if (this.tagName == 'SELECT') {
  18. var dropdownList = this;
  19. if (data && data.length > 0) {
  20. $.each(data, function(index, optionData) {
  21. var option = new Option(optionData.Text, optionData.Value);
  22. if ($.browser.msie)
  23. dropdownList.add(option);
  24. else
  25. dropdownList.add(option, null);
  26. });
  27. dropdownList.disabled = false;
  28. }
  29. else
  30. dropdownList.disabled = true;
  31. }
  32. });
  33. }
  34. /* loading when applying Ajax fillSelect */
  35. $.fn.loadSelect = function(loadText) {
  36. var data = [{ 'Text': loadText, 'Value': ''}];
  37. this.fillSelect(data);
  38. }
  39. /* selected the target option with value */
  40. $.fn.selected = function(value) {
  41. return this.each(function() {
  42. if (this.tagName == 'SELECT') {
  43. var options = this.options;
  44. if (options.length > 0) {
  45. $.each(options, function(index, optionData) {
  46. // once match then exist loop
  47. if (optionData.value == value) {
  48. optionData.selected = true;
  49. return false;
  50. }
  51. });
  52. }
  53. }
  54. });
  55. }
  56. /* TODO:selected the target option with text */
  57. $.fn.selectedText = function(text) {
  58. return this.each(function() {
  59. if (this.tagName == 'SELECT') {
  60. var options = this.options;
  61. if (options.length > 0) {
  62. $.each(options, function(index, optionData) {
  63. // once match then exist loop
  64. if (optionData.text == text) {
  65. optionData.selected = true;
  66. return false;
  67. }
  68. });
  69. }
  70. }
  71. });
  72. }
  73. /* returns the selected value */
  74. $.fn.getSelected = function() {
  75. return $(this).val();
  76. }
  77. /* return the text of selected option */
  78. $.fn.getSelectedText = function() {
  79. return $(this).children("[@selected]").text();
  80. }
  81. })(jQuery);
  82. function getDepartment(data) { $("#department").fillSelect(data); }
  83. $("#company").change(function() {
  84. $.getJSON("GetDepartment?company=" + $("#company").val(), null, getDepartment);
  85. });

实现了联动框

下面的代码实现了下拉和选择功能

  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. private SelectListItem[] GetDepartmentList(int nCompanyId)
  51. {
  52. ServiceDataContext db = new ServiceDataContext();
  53. var items = from t in db.Departments
  54. where t.Company==nCompanyId
  55. select new
  56. {
  57. ID = t.ID,
  58. Name = t.Name,
  59. Brief = t.Brief
  60. };
  61. List s = new List();
  62. SelectListItem b = new SelectListItem();
  63. b.Text = "--please select department--";
  64. b.Value = "";
  65. s.Add(b);
  66. foreach (var i in items)
  67. {
  68. SelectListItem item = new SelectListItem();
  69. item.Text = i.Name;
  70. item.Value = i.ID.ToString();
  71. s.Add(item);
  72. }
  73. return s.ToArray();
  74. }
  75. private string[] GetHeadList()
  76. {
  77. List head = new List();
  78. string strServer=Url.Content("~/Content/images/Head/");
  79. string strUrlFolder = Server.MapPath(Url.Content(Head_Folder+"Head/"));
  80. string[] fileEntries = Directory.GetFiles(strUrlFolder);
  81. FileInfo fi=null;
  82. foreach (string file in fileEntries)
  83. {
  84. fi = new FileInfo(file);
  85. if (fi.Name.ToLower().IndexOf("head")==0 && !fi.FullName.ToLower().Contains("_offline"))
  86. {
  87. head.Add(strServer+fi.Name);
  88. }
  89. }
  90. return head.ToArray();
  91. }
  92. private string GetImageTable()
  93. {
  94. System.Text.StringBuilder sbResult = new System.Text.StringBuilder();
  95. string[] arrImgs = GetHeadList();
  96. foreach (string strImage in arrImgs)
  97. {
  98. string strFile=strImage.Substring(strImage.LastIndexOf("/")+1);
  99. sbResult.AppendLine(string.Format("",
  100. "img_"+strFile.Remove(strFile.LastIndexOf(".")),
  101. Url.Content(strImage)
  102. ));
  103. }
  104. string strImg=sbResult.ToString();
  105. strImg=strImg.Remove(strImg.Length-5,5);
  106. return strImg;
  107. }
  108. }

注意紫色处,我们加了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. }));

好了,可以试试效果了。

【编辑推荐】

  1. CSS 3中的炫目新功能抢先预览
  2. CSS 3备受期待的8大功能
  3. CSS网页布局困扰新手的八个问题
  4. 25个下拉菜单导航脚本下载
  5. HTML 5 正式标准恐将2022年才能正式发布
责任编辑:yangsai 来源: cnblogs
相关推荐

2010-08-24 10:11:26

DIV标签

2010-09-09 09:34:32

DIV

2023-02-21 08:40:55

2010-09-10 09:51:05

DIVCSS

2009-07-07 17:07:28

JSP标签

2010-08-24 10:01:05

DIV

2009-10-14 17:32:24

VB.NET实现下拉列

2021-06-30 12:47:12

标签HTML分辨率

2011-06-29 16:02:40

jQuery

2010-09-07 13:40:02

DIV标签

2010-09-09 10:07:05

DIVCSS

2010-09-09 16:36:36

DIV标签

2010-09-13 09:28:30

DIV自适应高度DIV最小高度

2015-05-13 09:36:18

js模拟手机下拉刷新

2009-08-07 16:09:25

ASP.NET AJA

2010-10-09 10:47:03

Javascriptselect

2009-07-07 17:43:33

JSP系统

2017-02-20 19:25:54

Python 图像处理

2023-11-24 09:26:29

Java图像

2010-09-07 13:45:53

<div>标签
点赞
收藏

51CTO技术栈公众号