umgsai
umgsai

CSS+JS实现兼容性很好的无限级下拉菜单

 
 
    

  
  
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. 

  
  
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
    3. 

  
  
  3. <head>
    4. 

  
  
  4. <title>CSS+JS实现兼容性很好的无限级下拉菜单</title>
    5. 

  
  
  5. <styletype="text/css">
    6. 

  
  
  6. *{margin:0;padding:0;border:0;}
    7. 

  
  
  7. body{font:12px/130%verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
    8. 

  
  
  8. .clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
    9. 

  
  
  9. a:link{color:#000;text-decoration:none;}
    10. 

  
  
  10. a:visited{color:#000;text-decoration:none;}
    11. 

  
  
  11. a:hover{color:#000;text-decoration:none;}
    12. 

  
  
  12. .menu{width:778px;height:26px;background:#fff;margin:0auto;}
    13. 

  
  
  13. .menusel{float:left;width:100px;position:relative;height:25px;background:#ddd;line-height:25px;margin-left:1px;*margin-left:0px;_margin-left:-1px;}
    14. 

  
  
  14. .menuselh2{font-size:12px;}
    15. 

  
  
  15. .menusela{display:block;text-align:center;width:100px;border:1pxsolid#a4a4a4;height:25px;border-bottom:1pxsolid#a4a4a4;position:relative;z-index:2;}
    16. 

  
  
  16. .menusela:hover{border:1pxsolid#a4a4a4;border-bottom:1pxdashed#eeeeee;position:relative;z-index:2;height:25px;}
    17. 

  
  
  17. .ahovera{border-bottom:1pxdashed#eeeeee;background:#eeeeee;}
    18. 

  
  
  18. .position{position:absolute;z-index:1;}
    19. 

  
  
  19. .menuselul{width:125px;background:#eee;border:1pxsolid#a4a4a4;margin-top:-1px;position:relative;z-index:1;display:none;}
    20. 

  
  
  20. .menusel.block{display:block;}
    21. 

  
  
  21. .typeulli{border-bottom:1pxdashed#a4a4a4;width:125px;position:relative;float:left;}
    22. 

  
  
  22. .typeullia{border:none;width:125px;}
    23. 

  
  
  23. .typeullia:hover{border:none;background:#ddd;}
    24. 

  
  
  24. .typeul{margin-left:0;}
    25. 

  
  
  25. .typeulul{left:125px;top:0;position:absolute;}
    26. 

  
  
  26. .fli{margin-left:-1px;border-left:#eeeeeesolid1px;}
    27. 

  
  
  27. .menusel.lli{border:none;}
    28. 

  
  
  28. </style>
    29. 

  
  
  29. <scripttype="text/javascript">document.execCommand("BackgroundImageCache",false,true);</script><!--IE6背景图片闪烁问题-->
    30. 

  
  
  30. </head>
    31. 

  
  
  31. <body>
    32. 

  
  
  32. <divclass="menu">
    33. 

  
  
  33. <divid="menu1"class="menusel">
    34. 

  
  
  34. <h2><ahref="/">菜单1</a></h2>
    35. 

  
  
  35. <divclass="position">
    36. 

  
  
  36. <ulclass="clearfixtypeul">
    37. 

  
  
  37. <li><ahref="http://www.33567.cn">菜单选项1-2</a></li>
    38. 

  
  
  38. <li>
    39. 

  
  
  39. <ahref="#">菜单选项1-2</a>
    40. 

  
  
  40. <ul>
    41. 

  
  
  41. <liclass="fli"><ahref="#">菜单选项1-2-1</a></li>
    42. 

  
  
  42. <liclass="lli"><ahref="#">菜单选项1-2-2</a></li>
    43. 

  
  
  43. </ul>
    44. 

  
  
  44. </li>
    45. 

  
  
  45. <li><ahref="http://www.7caidy.com">菜单选项1-2</a></li>
    46. 

  
  
  46. <liclass="lli"><ahref="#">菜单选项1-2</a></li>
    47. 

  
  
  47. </ul>
    48. 

  
  
  48. </div><!--position-->
    49. 

  
  
  49. </div><!--menusel-->
    50. 

  
  
  50. <divid="menu2"class="menusel">
    51. 

  
  
  51. <h2><ahref="#">菜单2</a></h2>
    52. 

  
  
  52. <divclass="position">
    53. 

  
  
  53. <ulclass="clearfixtypeul">
    54. 

  
  
  54. <li><ahref="#">菜单选项2-2</a></li>
    55. 

  
  
  55. <li><ahref="#">菜单选项2-2</a>
    56. 

  
  
  56. <ul>
    57. 

  
  
  57. <liclass="fli"><ahref="#">菜单选项2-2-1</a></li>
    58. 

  
  
  58. <liclass="lli"><ahref="#">菜单选项2-2-2</a>
    59. 

  
  
  59. <ul>
    60. 

  
  
  60. <liclass="fli"><ahref="#">菜单选项2-2-1</a></li>
    61. 

  
  
  61. <liclass="lli"><ahref="#">菜单选项2-2-2</a>
    62. 

  
  
  62. </li>
    63. 

  
  
  63. </ul>
    64. 

  
  
  64. </li>
    65. 

  
  
  65. </ul>
    66. 

  
  
  66. </li>
    67. 

  
  
  67. <li><ahref="#">菜单选项2-2</a></li>
    68. 

  
  
  68. <liclass="lli"><ahref="#">菜单选项2-2</a></li>
    69. 

  
  
  69. </ul>
    70. 

  
  
  70. </div><!--position-->
    71. 

  
  
  71. </div><!--menusel-->
    72. 

  
  
  72. <divid="menu3"class="menusel">
    73. 

  
  
  73. <h2><ahref="#">菜单3</a></h2>
    74. 

  
  
  74. <divclass="position">
    75. 

  
  
  75. <ulclass="clearfixtypeul">
    76. 

  
  
  76. <li><ahref="#">菜单选项3-2</a></li>
    77. 

  
  
  77. <li><ahref="#">菜单选项3-2</a>
    78. 

  
  
  78. <ul>
    79. 

  
  
  79. <liclass="fli"><ahref="#">菜单选项3-2-1</a></li>
    80. 

  
  
  80. <liclass="lli"><ahref="#">菜单选项3-2-2</a>
    81. 

  
  
  81. <ul>
    82. 

  
  
  82. <liclass="fli"><ahref="#">菜单选项3-2-1</a></li>
    83. 

  
  
  83. <liclass="lli"><ahref="#">菜单选项3-2-2</a>
    84. 

  
  
  84. <ul>
    85. 

  
  
  85. <liclass="fli"><ahref="#">菜单选项3-2-1</a></li>
    86. 

  
  
  86. <liclass="lli"><ahref="#">菜单选项3-2-2</a></li>
    87. 

  
  
  87. </ul>
    88. 

  
  
  88. </li>
    89. 

  
  
  89. </ul>
    90. 

  
  
  90. </li>
    91. 

  
  
  91. </ul>
    92. 

  
  
  92. </li>
    93. 

  
  
  93. <li><ahref="#">菜单选项3-2</a></li>
    94. 

  
  
  94. <liclass="lli"><ahref="#">菜单选项3-2</a></li>
    95. 

  
  
  95. </ul>
    96. 

  
  
  96. </div><!--position-->
    97. 

  
  
  97. </div><!--menusel-->
    98. 

  
  
  98. </div><!--menu-->
    99. 

  
  
  99. <scripttype="text/javascript">
    100. 

  
  
  100. for(varx=1;x<4;x++)
    101. 

  
  
  101. {
    102. 

  
  
  102. varmenuid=document.getElementById("menu"+x);
    103. 

  
  
  103. menuid.num=x;
    104. 

  
  
  104. type();
    105. 

  
  
  105. }
    106. 

  
  
  106. functiontype()
    107. 

  
  
  107. {
    108. 

  
  
  108. varmenuh2=menuid.getElementsByTagName("h2");
    109. 

  
  
  109. varmenuul=menuid.getElementsByTagName("ul");
    110. 

  
  
  110. varmenuli=menuul[0].getElementsByTagName("li");
    111. 

  
  
  111. menuh2[0].onmouseover=show;
    112. 

  
  
  112. menuh2[0].onmouseout=unshow;
    113. 

  
  
  113. menuul[0].onmouseover=show;
    114. 

  
  
  114. menuul[0].onmouseout=unshow;
    115. 

  
  
  115. functionshow()
    116. 

  
  
  116. {
    117. 

  
  
  117. menuul[0].className="clearfixtypeulblock"
    118. 

  
  
  118. }
    119. 

  
  
  119. functionunshow()
    120. 

  
  
  120. {
    121. 

  
  
  121. menuul[0].className="typeul"
    122. 

  
  
  122. }
    123. 

  
  
  123. for(vari=0;i<menuli.length;i++)
    124. 

  
  
  124. {
    125. 

  
  
  125. menuli[i].num=i;
    126. 

  
  
  126. varliul=menuli[i].getElementsByTagName("ul")[0];
    127. 

  
  
  127. if(liul)
    128. 

  
  
  128. {
    129. 

  
  
  129. typeshow()
    130. 

  
  
  130. }
    131. 

  
  
  131. }
    132. 

  
  
  132. functiontypeshow()
    133. 

  
  
  133. {
    134. 

  
  
  134. menuli[i].onmouseover=showul;
    135. 

  
  
  135. menuli[i].onmouseout=unshowul;
    136. 

  
  
  136. }
    137. 

  
  
  137. functionshowul()
    138. 

  
  
  138. {
    139. 

  
  
  139. menuli[this.num].getElementsByTagName("ul")[0].className="block";
    140. 

  
  
  140. }
    141. 

  
  
  141. functionunshowul()
    142. 

  
  
  142. {
    143. 

  
  
  143. menuli[this.num].getElementsByTagName("ul")[0].className="";
    144. 

  
  
  144. }
    145. 

  
  
  145. }
    146. 

  
  
  146. </script>
    147. 

  
  
  147. </body>
    148. 

  
  
  148. </html>
    149. 

  
  
  149.  
    CSS+JS实现兼容性很好的无限级下拉菜单_第1张图片
     
    150.

本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/815559

你可能感兴趣的:(下拉菜单)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • python 常用库 feuiw pythonpython
    webdash简介一个用于构建交互式Web应用程序的Python框架，由Plotly公司开发，特别适合数据科学家、分析师和工程师快速创建数据可视化应用，而无需深入学习前端技术（HTML、CSS、JavaScript）。特点纯Python开发：无需编写前端代码，完全用Python语法即可构建交互式网页应用强大的数据可视化：内置Plotly图表库，支持超过40种图表类型高度交互性：支持滑块、下拉菜单、
  • Android-API调用学习总结 每次的天空 学习
    一、Postman检查API接口是否支持1.“HTTPRequest”来创建一个新的请求。——请求构建界面，这是你进行所有API调用的地方。2.设置请求方法和URL：选择请求方法：在URL输入框左侧，有一个下拉菜单。点击它，选择你想要测试的HTTP请求方法（例如：GET,POST,PUT,DELETE等）。GET：获取数据区别：GET请求通常用于从服务器获取或读取数据。它不应该对服务器上的数据产生
  • 自动化测试常见问题详解 程序员杰哥 测试用例测试工具软件测试职场和发展自动化测试python程序人生
    点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快日常维护自动化过程中经常会遇到各式各样的问题。常见问题的表现有哪些？今天就来列举哪些自动化测试中的顽疾。基本每个维护自动化的人都或多或少遇到过的。1.定位问题：自动化测试脚本通常需要与应用程序的各种元素进行交互，如按钮、文本框、下拉菜单等。在某些情况下，元素的定位可能会出现问题，导致脚本执行失败。这可能是由于元素的属性变化、页面结构的更改
  • 自动化测试秘籍：Selenium Python API实战指南 May Wei SeleniumPythonAPI自动化测试元素交互弹窗处理
    背景简介Selenium是一个用于Web应用程序测试的工具，它允许开发者模拟用户与浏览器的交互。在现代软件开发中，自动化测试是确保应用质量和效率的关键环节。本文将基于Selenium的PythonAPI，探讨如何高效地进行网页元素交互和自动化测试。标题1：操作下拉菜单和列表SeleniumWebDriver提供了一个名为Select的特殊类，用于与网页上的列表和下拉菜单进行交互。Select类提供
  • 我在黑马程序员学web前端 新手来了@click 前端
    1网页由三部分组成1.、html负责网页的结构2.css、负责网页的美化，控制网页元素的样式3、js，负责网页交互html常见的标签：1、form表单input输入框select下拉菜单option下拉列表2、table表格thead表头ｔｂｏｄｙ是表体tr行th表头加粗ｔｄ是列ｂｒ是换行2/CＳＳ常见的三种引入方式行内样式、内部样式、外部样式用ｌｉｎｋ关键字常用的元素选择器：标签选择器、id选择
  • 前端：优秀架构的坟墓
    你是否曾经见过那个设计精良的后端系统——界限分明、模式优雅、抽象层层递进——让人不禁感叹，这一定是极致享受的工作环境？然后，你打开了前端代码。顿时，你陷入了全局状态的迷宫，深度嵌套的组件，半途而废的Hooks，以及用十七种挫败方言“喊叫”的CSS之中。优秀的架构一路走过后端，经过DevOps的打磨，成功在云端扩展……却在React的某个上下文里因为一个下拉菜单绊倒，彻底崩溃。我干这一行够久了，见过
  • 在 Ant Design Vue 中实现滚动页面时保持下拉菜单展开 王旭晨 vue.jsjavascript前端
    引言在使用AntDesignVue的组件时，默认情况下，当用户滚动页面时，下拉菜单会自动关闭。这在某些场景下可能不够友好，例如在一个长表单中需要频繁切换选项时。本文将介绍如何通过配置和代码优化，实现滚动页面时保持下拉菜单展开的功能，同时不影响其他交互。问题分析为什么滚动页面会关闭下拉菜单？AntDesignVue的下拉组件（如）默认会监听页面的滚动事件。当滚动发生时，组件会认为用户意图离开当前操作
  • Dynamics 365 核心技术深度分析 洁辉 架构
    Dynamics365核心技术深度分析一、实体创建与设置（核心基础）实体是Dynamics365数据模型的核心单元，相当于数据库中的表结构1.实体创建流程确定业务需求创建新实体定义字段/属性设置关系配置视图/表单设置安全性发布自定义项2.关键设置项字段类型：单行文本、选项集（下拉菜单）、两个选项（布尔值）货币、日期时间、查找（关联其他实体）图像、文件（D365v9.0+）高级属性：//字段属性示例
  • 怎么查看2进制文件 贫僧法号止尘
    可以使用记事本或其他文本编辑器打开2进制文件。在记事本中，选择“文件”菜单，然后选择“打开”。在打开文件对话框中，选择“文件类型”下拉菜单并选择“所有文件”。这样，你就可以看到所有文件，包括2进制文件。然后，选择要查看的2进制文件，单击“打开”按钮即可。注意，记事本不能正确显示2进制文件的内容。它会将2进制数据显示为乱码字符。因此，建议使用专门的二进制查看器来查看2进制文件。这些工具可以正确显示2
  • 华为手机手机与计算机传输,如何将华为手机的视频传到华为的电脑上？手机与电脑数据互传操作步骤... 人人保 华为手机手机与计算机传输
    手机与电脑数据互传操作bai步骤如下：1、手机du通过原装USB数据线与电脑相连，待zhi电脑自行dao安装驱动，并确认驱动安装成功，如下图所示：注：如驱动未安装成功，可通过安装HiSuite软件进行辅助驱动安装或者通过选择端口模式中的帮助进行电脑驱动安装。(1)在手机端弹出的对话框选择“是，访问数据”(2)在手机下拉菜单中USB连接方式中选择设备文件管理(MTP)注：关于设备文件管理(MTP)和
  • 百度搜索下拉框,下拉菜单怎么做?如何刷? mt_187 日常记录技术收藏html5
    搜索下拉菜单反馈性关键词是用户在搜索时与搜索引擎的第一步互动，在互动过程中，搜索引擎的反馈关键词不断调整来满足用户的个性需求。搜索下拉框存在的下拉词，每天的点击浏览量都很高，这意味着很多企业都在抢这个位置，在网民搜索自己的行业主关键词时，下拉中的词条是行业关键词和自己品牌词或其他营销类词的整体呈现。搜索下拉框菜单怎么做?如何刷?在本篇文章中您将会了解到以下信息。第一部分搜索下拉框菜单原理第二部分怎
  • 在 PyCharm 中，设置 Edit Configurations（运行/调试配置） %Leo pycharmidepython
    步骤：设置EditConfigurations1.打开EditConfigurations窗口方法一：通过顶部菜单点击PyCharm顶部菜单栏的Run>EditConfigurations。方法二：通过运行栏在PyCharm窗口右上角，找到运行/调试配置下拉菜单（通常显示当前配置名称或）。点击下拉菜单旁边的EditConfigurations。方法三：快捷键使用快捷键Alt+Shift+F10（W
  • JavaScript基础-常见网页特效案例 咖啡の猫 javascript开发语言ecmascript
    一、前言在前端开发中，实现网页特效（如轮播图、下拉菜单、Tab切换、拖拽效果等）是提升用户体验和页面交互性的关键手段之一。这些特效不仅能增强用户对网站的粘性，也是衡量一个前端开发者能力的重要标准。JavaScript是实现网页特效的核心技术之一，结合HTML和CSS，可以轻松构建丰富的交互效果。本文将带你深入了解：常见网页特效的实现原理；如何使用原生JavaScript实现经典特效；每个案例附带完
  • el-dropdown自定义“更多操作⌵”上下文关联按钮）下拉菜单 你挚爱的强哥 Sg.js框架vue.jsjavascript前端
    {//dropdownActive=command;letindex=dropdownItems.findIndex((v)=>v.label==command);letitem=dropdownItems[index];item.clickEvent&&item.clickEvent({item,index,scope:scope});}">更多-->{{d.label}}exportdefau
  • Flutter中AppBar组件详解 aiguangyuan Flutter移动端开发Flutter
    AppBar组件主要用于定义应用程序顶部区域，可以用来展示应用程序标题、搜索入口、下拉菜单、标签栏等信息。常用的属性如下：1.leading标题前置控件。在首页通常显示应用程序的Logo，其它页面通常显示为返回按钮；2.title页面标题。通常显示当前页面的标题文字，可以放组件；3.actions标题后置控件。通常使用IconButton来表示，可以放按钮组；4.bottom底部控件。通常用tab
  • contactform7 ajax,Contact Form 7插件高级应用
    原标题：ContactForm7插件高级应用WordPress联系表单插件–ContactForm7是一款简单易用扩展性灵活的表单插件，可以自定义各式各样不同类型的表单功能，而且支持自定义接受邮件，Ajax提交和jQuery表单插件支持。可结合Akismet过滤垃圾邮件，同时也支持CAPTCHA反垃圾邮件，表单域元素支持各种最常见的：单选框、复选框、文本框、下拉菜单、按钮、文件上传等多种表单域。C
  • wordpress外贸独立站常用留言表单插件 contact form 7 wodrpress资源分享 wordpresswordpress
    ContactForm7介绍ContactForm7是一款非常流行的WordPress联系表单插件，广泛应用于外贸独立站。以下是其主要特点：功能强大且免费：ContactForm7是完全免费的，支持创建和管理多个联系表单。简单易用：用户无需编写代码，通过简单的拖放和配置即可设置表单字段、邮件通知等功能。高度自定义：支持自定义表单域，包括文本框、单选框、复选框、下拉菜单、文件上传等多种表单元素。扩展
  • Vue3 表单 AI老李 vue3vue.js前端javascriptvitevscode
    关键要点Vue3表单通过v-model实现双向数据绑定，支持输入框、文本域和下拉菜单。表单验证包括必填字段、正则表达式和自定义方法，确保数据完整性。表单处理涉及数据获取和重置，适合用户交互和提交。表单绑定Vue3使用v-model指令将表单元素与数据绑定。例如：组件数据：data(){return{message:''}}v-model自动同步输入和数据，支持复选框、单选框和下拉菜单。表单验证验证
  • 关于easyexcel动态下拉选问题处理 DougLiang excel开发语言java
    前些日子突然碰到一个问题，说是客户的导入文件模版想支持部分导入内容的下拉选，于是我就找了easyexcel官网寻找解决方案，并没有找到合适的方案，没办法只能自己动手并分享出来，针对Java生成Excel下拉菜单时因选项过多导致的问题，也通过将下拉数据存入隐藏Sheet再引用的方式解决。直接上代码：packagecom.tlit.platform.excel.annotations;importja
  • excel文件转化成为csv文件 云cia excel
    1.打开需要转换的excel文件2.选择另存为3.在‘保存类型’下拉菜单中，选择csv4.保存即可转换
  • NiceGUI 是一个基于 Python 的现代 Web 应用框架 czliutz python前端开发语言
    NiceGUI是一个基于Python的现代Web应用框架，它允许开发者直接使用Python构建交互式Web界面，而无需编写前端代码。以下是NiceGUI的主要功能和特点：核心功能1.简单易用的UI组件提供按钮、文本框、下拉菜单、滑块、图表等常见UI元素支持布局管理（水平、垂直、卡片式等）可自定义样式和交互行为2.实时交互支持双向数据绑定事件驱动编程模型（点击、输入变化等）实时更新UI内容3.数据可
  • Edge浏览器怎样开启兼容模式 小魚資源大雜燴 windowsedge浏览器
    允许站点在IE模式下重新加载：打开Edge浏览器，点击右上角的三个点图标，选择“设置”（或者按下“Alt+F”组合键后再点击“设置”）。在设置页面中，切换到左侧的“默认浏览器”选项卡。在“InternetExplorer兼容性”标题下，展开“允许站点在InternetExplorer模式下重新加载”选项的下拉菜单，选择“允许”，然后点击“重启”按钮，重启浏览器使更改生效。在兼容模式下打开网站：访问
  • Axure疑难杂症：利用中继器制作三级下拉菜单（逻辑判断进阶） 结构化知识课堂 Axure疑难杂症专题axure中继器下拉列表三级菜单
    亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420课程主题：三级下拉菜单主要内容：条件筛选时的逻辑判断思维，中继器使用应用场景：复合条件下的下拉列表制作案例展示：案例视频：<
  • Axure疑难杂症：中继器制作三级下拉菜单（多级中继器高级交互） 结构化知识课堂 axure下拉菜单中继器
    亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420本文视频课程记录于上述地址第五章中继器专题第11节课程主题：中继器制作下拉菜单主要内容：创建条件选区、多级中继器数据录入、全局变量、中继器筛选应用场景：多级查询条件进行结果筛选案例展示：案例视频：ev_20250
  • Popper.js 开源项目安装与配置指南 甄墨疆
    Popper.js开源项目安装与配置指南floating-ui项目地址:https://gitcode.com/gh_mirrors/floa/floating-ui1.项目基础介绍Popper.js是一个用于创建定位浮层元素（如工具提示、弹出框、下拉菜单等）的开源JavaScript库。它能够帮助开发者将浮层元素锚定到另一个UI元素上，并尽可能地避免与视窗边缘的碰撞，保证浮层元素的可见性。主要编
  • Android系统中状态栏、导航栏和下拉菜单 Frank_HarmonyOS android
    在Android系统中，状态栏（StatusBar）、导航栏（NavigationBar）和下拉菜单（ExPlan）是三个常见的用户界面元素，它们分别提供了一些基本的信息显示和交互功能。例如，状态栏可以显示时间、电量、信号等信息，导航栏可以提供返回、主页、多任务等按钮，下拉菜单可以提供快速设置、通知等选项。如何在Android系统中添加状态栏、导航栏和下拉菜单的控制功能，主要涉及了SystemUI
  • 鸿蒙OS&UniApp制作自定义的下拉菜单组件（鸿蒙系统适配版）#三方框架 #Uniapp 淼学派对 uniapp鸿蒙osharmonyosuni-app华为
    UniApp制作自定义的下拉菜单组件（鸿蒙系统适配版）前言在移动应用开发中，下拉菜单是一个常见且实用的交互组件，它能在有限的屏幕空间内展示更多的选项。虽然各种UI框架都提供了下拉菜单组件，但在一些特定场景下，我们往往需要根据产品需求定制自己的下拉菜单。尤其是在鸿蒙系统逐渐普及的今天，如何让我们的组件在华为设备上有更好的表现，是值得思考的问题。本文将分享我在实际项目中使用UniApp开发自定义下拉菜
  • 鸿蒙OS&UniApp 实现带搜索功能的下拉菜单#三方框架 #Uniapp 淼学派对 uniapp鸿蒙osharmonyosuni-app华为
    使用UniApp实现带搜索功能的下拉菜单前言在移动应用开发中，下拉菜单是常见的交互控件，广泛应用于筛选、选择、导航等场景。带搜索功能的下拉菜单，能极大提升用户在选项较多时的查找效率。随着鸿蒙（HarmonyOS）生态的壮大，开发者对多端适配和高性能交互提出了更高要求。本文将以UniApp为例，详细讲解如何开发一个带搜索功能的下拉菜单组件，并结合鸿蒙平台的适配与优化建议。一、需求与设计思路1.需求分
  • WPF实现树形下拉列表框(TreeComboBox) 趋时软件 WPFwpf
    文章目录前言一、需求分析二、代码实现2.1编辑TreeView模板2.2提取ComboBox的模板代码；2.3将ComboBox的模板代码移植到TreeView模板中；2.4将TreeView模板包含ItemsPresenter部分的关键代码放入ComboBox模板中的Popup控件内；三、运行效果3.1单选效果3.2多选效果四、个性化外观4.1单选效果4.2多选效果前言树形下拉菜单是许多WPF应
  • Enum用法 不懂事的小屁孩 enum
    以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
  • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
    1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
  • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
    今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
  • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
    最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
  • java连接ftp下载 g21121 java
    有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
  • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
      抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
  • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
    1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
  • Spring中的AOP aijuans springAOP
      Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
  • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
    placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
  • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
    java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
  • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
    Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
  • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
    一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
  • 【Java范型七】范型消除 bit1129 java
    范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
  • 【Spark九十四】spark-sql工具的使用 bit1129 spark
    spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
  • js做的各种倒计时 ronin47 js 倒计时
    第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
    public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
  • mongoDB安装 开窍的石头 mongodb安装 基本操作
    mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
  • [开源项目]引擎的关键意义 comsci 开源项目
         一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
  • 软件度量的一些方法 cuiyadll 方法
    软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
  • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
    参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
  • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
    RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
  • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
    快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
  • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
    MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
  • android4.4从系统图库无法加载图片的问题 gundumw100 android
    典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
  • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
    HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
  • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
      import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
  • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
          Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
  • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
    // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
  • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
    在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
  • jquery wuai jquery
    以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他