涂根华
涂根华

javascript tab组件

今天研究了下javascript tab代码 到网上看了下 然后自己封装了一个tab组件 本来用jquery写tab是非常简单的事件 但是在做淘宝页面时候 淘宝现在不允许用jquery框架 哇靠 一定要用kissy框架 我就便不用 靠 我直接用javascript写 这应该没有错吧！靠 废话少说！还是要引用上次翻译的一段js 那段js有一个方法是 获取类名的封装方法！如下：

 

  
  
  
  
    
   
   
   
   
  1. <script>  
    2. 
   
   
   
   
  2. var GLOBAL = {};  
    3. 
   
   
   
   
  3.     GLOBAL.namespace=function(str){  
    4. 
   
   
   
   
  4.         var arr = str.split("."),o = GLOBAL;  
    5. 
   
   
   
   
  5.         for (i=(arr[0]=="GLOBAL")?1:0;i<arr.length;i++){  
    6. 
   
   
   
   
  6.             o[arr[i]] = o[arr[i]] || {};  
    7. 
   
   
   
   
  7.             o=o[arr[i]];      
    8. 
   
   
   
   
  8.         }      
    9. 
   
   
   
   
  9.     }  
    10. 
   
   
   
   
  10.     GLOBAL.namespace("DOM");  
    11. 
   
   
   
   
  11.     GLOBAL.DOM.getElementsByClassName = function(str,root,tag){  
    12. 
   
   
   
   
  12.         if(root){  
    13. 
   
   
   
   
  13.             root = typeof root =="string" ? document.getElementById(root) : root;  
    14. 
   
   
   
   
  14.         }else{  
    15. 
   
   
   
   
  15.             root = document.body;      
    16. 
   
   
   
   
  16.         }  
    17. 
   
   
   
   
  17.         tag = tag || "*";  
    18. 
   
   
   
   
  18.         var els = document.getElementsByTagName(tag),arr=[];  
    19. 
   
   
   
   
  19.         for(var i=0,n=els.length;i<n;i++){  
    20. 
   
   
   
   
  20.             for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){  
    21. 
   
   
   
   
  21.                 if(k[j]==str){  
    22. 
   
   
   
   
  22.                     arr.push(els[i]);  
    23. 
   
   
   
   
  23.                     break;      
    24. 
   
   
   
   
  24.                 }  
    25. 
   
   
   
   
  25.             }  
    26. 
   
   
   
   
  26.         }  
    27. 
   
   
   
   
  27.         return arr;  
    28. 
   
   
   
   
  28.     }  
    29. 
   
   
   
   
  29. </script> 
    30.

因为原审js是没有这个方法 只有封装下呢！下面是js代码：

 

  
  
  
  
    
   
   
   
   
  1. <script>  
    2. 
   
   
   
   
  2.  
    3. 
   
   
   
   
  3. function tabPlug(TabMenu,TabContent){  
    4. 
   
   
   
   
  4.     var list1 = GLOBAL.DOM.getElementsByClassName(TabMenu),  
    5. 
   
   
   
   
  5.         c1 = GLOBAL.DOM.getElementsByClassName(TabContent);  
    6. 
   
   
   
   
  6.         var hover = "hover"; //当点击时增加一个类  
    7. 
   
   
   
   
  7.         //下面是写个函数来获取索引值的函数,通过它获取当前点击在导航中的索引位置  
    8. 
   
   
   
   
  8.         var indexValue = function(self,obj){  
    9. 
   
   
   
   
  9.             for(var i=0;i<obj.length;i++){  
    10. 
   
   
   
   
  10.                 if(obj[i] == self) return i;      
    11. 
   
   
   
   
  11.             }     
    12. 
   
   
   
   
  12.         }  
    13. 
   
   
   
   
  13.         var index; //定于一个变量 来保存当前的索引  
    14. 
   
   
   
   
  14.         list1[0].className = hover; //给第一个列表项添加一个类名  
    15. 
   
   
   
   
  15.         for(var j=1;j<c1.length;j++){  
    16. 
   
   
   
   
  16.             c1[j].style.display = "none";     
    17. 
   
   
   
   
  17.         }  
    18. 
   
   
   
   
  18.         for(var k=0;k<list1.length;k++){  
    19. 
   
   
   
   
  19.             list1[k].onclick = function(){  
    20. 
   
   
   
   
  20.                 index = indexValue(this,list1);  
    21. 
   
   
   
   
  21.                 for(var m=0;m<list1.length;m++){  
    22. 
   
   
   
   
  22.                     list1[m].className = (m==index) ? hover : "";//高亮显示点击项并移除其他项高亮    
    23. 
   
   
   
   
  23.                 }     
    24. 
   
   
   
   
  24.                 for(var n=0;n<c1.length;n++){  
    25. 
   
   
   
   
  25.                     c1[n].style.display = (n==index) ? "block" : "none";//显示点击对应的选项区,隐藏其他  
    26. 
   
   
   
   
  26.                 }  
    27. 
   
   
   
   
  27.             }     
    28. 
   
   
   
   
  28.         }     
    29. 
   
   
   
   
  29. }         
    30. 
   
   
   
   
  30.  </script>  
    31.

这个js不怎么难理解 我知道你们都ok的 所以也没有什么必要解析！上面也有点注释！

所有代码如下：

 

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
   
   
   
   
  5. <title>无标题文档</title> 
    6. 
   
   
   
   
  6. <style> 
    7. 
   
   
   
   
  7. .tabnav{width:500px;height:25px;margin-left:100px; overflow:hidden;}  
    8. 
   
   
   
   
  8. .tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}  
    9. 
   
   
   
   
  9. .tabnav li.hover{background:#047}  
    10. 
   
   
   
   
  10. .tabbox{width:500px;border:2px solid #047; overflow:hidden;}  
    11. 
   
   
   
   
  11. .tabbox div{margin:10px;line-height:20px}  
    12. 
   
   
   
   
  12. .tabbox .hide{ display:none;}  
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14. .tabnav2{width:500px;height:25px;margin-left:100px; overflow:hidden;}  
    15. 
   
   
   
   
  15. .tabnav2 li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}  
    16. 
   
   
   
   
  16. .tabnav2 li.hover{background:#047}  
    17. 
   
   
   
   
  17. .tabbox2{width:500px;border:2px solid #047; overflow:hidden;}  
    18. 
   
   
   
   
  18. .tabbox2 div{margin:10px;line-height:20px}  
    19. 
   
   
   
   
  19. .tabbox2 .hide{ display:none;}  
    20. 
   
   
   
   
  20. </style> 
    21. 
   
   
   
   
  21. <script> 
    22. 
   
   
   
   
  22. var GLOBAL = {};  
    23. 
   
   
   
   
  23.     GLOBAL.namespace=function(str){  
    24. 
   
   
   
   
  24.         var arr = str.split("."),o = GLOBAL;  
    25. 
   
   
   
   
  25.         for (i=(arr[0]=="GLOBAL")?1:0;i<arr.length;i++){  
    26. 
   
   
   
   
  26.             o[arr[i]] = o[arr[i]] || {};  
    27. 
   
   
   
   
  27.             oo=o[arr[i]];      
    28. 
   
   
   
   
  28.         }      
    29. 
   
   
   
   
  29.     }  
    30. 
   
   
   
   
  30.     GLOBAL.namespace("DOM");  
    31. 
   
   
   
   
  31.     GLOBAL.DOM.getElementsByClassName = function(str,root,tag){  
    32. 
   
   
   
   
  32.         if(root){  
    33. 
   
   
   
   
  33.             root = typeof root =="string" ? document.getElementById(root) : root;  
    34. 
   
   
   
   
  34.         }else{  
    35. 
   
   
   
   
  35.             root = document.body;      
    36. 
   
   
   
   
  36.         }  
    37. 
   
   
   
   
  37.         tagtag = tag || "*";  
    38. 
   
   
   
   
  38.         var els = document.getElementsByTagName(tag),arr=[];  
    39. 
   
   
   
   
  39.         for(var i=0,n=els.length;i<n;i++){  
    40. 
   
   
   
   
  40.             for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){  
    41. 
   
   
   
   
  41.                 if(k[j]==str){  
    42. 
   
   
   
   
  42.                     arr.push(els[i]);  
    43. 
   
   
   
   
  43.                     break;      
    44. 
   
   
   
   
  44.                 }  
    45. 
   
   
   
   
  45.             }  
    46. 
   
   
   
   
  46.         }  
    47. 
   
   
   
   
  47.         return arr;  
    48. 
   
   
   
   
  48.     }  
    49. 
   
   
   
   
  49. </script> 
    50. 
   
   
   
   
  50. </head> 
    51. 
   
   
   
   
  51.  
    52. 
   
   
   
   
  52. <body> 
    53. 
   
   
   
   
  53.  
    54. 
   
   
   
   
  54. <ul class="tabnav"> 
    55. 
   
   
   
   
  55.     <li class="list1">jQuery技术</li> 
    56. 
   
   
   
   
  56.     <li class="list1">CSS技术</li> 
    57. 
   
   
   
   
  57.     <li class="list1">xhtml技术</li> 
    58. 
   
   
   
   
  58. </ul> 
    59. 
   
   
   
   
  59. <div class="tabbox"> 
    60. 
   
   
   
   
  60.     <div class="c1"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
    61. 
   
   
   
   
  61.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
    62. 
   
   
   
   
  62.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
    63. 
   
   
   
   
  63. </div> 
    64. 
   
   
   
   
  64. <br /><br /> 
    65. 
   
   
   
   
  65.   <ul class="tabnav"> 
    66. 
   
   
   
   
  66.     <li class="list2">jQuery技术</li> 
    67. 
   
   
   
   
  67.     <li class="list2">CSS技术</li> 
    68. 
   
   
   
   
  68.     <li class="list2">xhtml技术</li> 
    69. 
   
   
   
   
  69. </ul> 
    70. 
   
   
   
   
  70. <div class="tabbox"> 
    71. 
   
   
   
   
  71.     <div class="c2"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
    72. 
   
   
   
   
  72.     <div class="c2 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
    73. 
   
   
   
   
  73.     <div class="c2 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
    74. 
   
   
   
   
  74. </div>    
    75. 
   
   
   
   
  75.  <script> 
    76. 
   
   
   
   
  76.  
    77. 
   
   
   
   
  77. function tabPlug(TabMenu,TabContent){  
    78. 
   
   
   
   
  78.     var list1 = GLOBAL.DOM.getElementsByClassName(TabMenu),  
    79. 
   
   
   
   
  79.         c1 = GLOBAL.DOM.getElementsByClassName(TabContent);  
    80. 
   
   
   
   
  80.         var hover = "hover"; //当点击时增加一个类  
    81. 
   
   
   
   
  81.         //下面是写个函数来获取索引值的函数,通过它获取当前点击在导航中的索引位置  
    82. 
   
   
   
   
  82.         var indexValue = function(self,obj){  
    83. 
   
   
   
   
  83.             for(var i=0;i<obj.length;i++){  
    84. 
   
   
   
   
  84.                 if(obj[i] == self) return i;      
    85. 
   
   
   
   
  85.             }     
    86. 
   
   
   
   
  86.         }  
    87. 
   
   
   
   
  87.         var index; //定于一个变量 来保存当前的索引  
    88. 
   
   
   
   
  88.         list1[0].className = hover; //给第一个列表项添加一个类名  
    89. 
   
   
   
   
  89.         for(var j=1;j<c1.length;j++){  
    90. 
   
   
   
   
  90.             c1[j].style.display = "none";     
    91. 
   
   
   
   
  91.         }  
    92. 
   
   
   
   
  92.         for(var k=0;k<list1.length;k++){  
    93. 
   
   
   
   
  93.             list1[k].onclick = function(){  
    94. 
   
   
   
   
  94.                 index = indexValue(this,list1);  
    95. 
   
   
   
   
  95.                 for(var m=0;m<list1.length;m++){  
    96. 
   
   
   
   
  96.                     list1[m].className = (m==index) ? hover : "";//高亮显示点击项并移除其他项高亮    
    97. 
   
   
   
   
  97.                 }     
    98. 
   
   
   
   
  98.                 for(var n=0;n<c1.length;n++){  
    99. 
   
   
   
   
  99.                     c1[n].style.display = (n==index) ? "block" : "none";//显示点击对应的选项区,隐藏其他  
    100. 
   
   
   
   
  100.                 }  
    101. 
   
   
   
   
  101.             }     
    102. 
   
   
   
   
  102.         }     
    103. 
   
   
   
   
  103. }         
    104. 
   
   
   
   
  104.  </script>    
    105. 
   
   
   
   
  105.  <script> 
    106. 
   
   
   
   
  106.  tabPlug("list1","c1");  
    107. 
   
   
   
   
  107.   tabPlug("list2","c2");  
    108. 
   
   
   
   
  108.  </script>   
    109. 
   
   
   
   
  109.    
    110. 
   
   
   
   
  110.  
    111. 
   
   
   
   
  111. </body> 
    112. 
   
   
   
   
  112. </html> 
    113.

下面也有压缩包下载 可以看看源码！

你可能感兴趣的:(JavaScript,JavaScript,职场,休闲,tab组件)

  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 2022-04-18 Apbenz
    语重心长的和我说，不要老是说不行，人至而立之年危机四伏，内在的，外在的，感觉就是心力憔悴，让人无所适从。面对职场的无情，突然好羡慕干体力劳动的外卖小哥。难道命运是想让我去送外卖了吗？干体力活才能让我活下去？fastadmin打卡成功,淘宝金币任务完成。ㅏㅓㅗㅜㅡㅣㅐㅔㅑㅕㅛㅠㅢㅒㅖY行。야자여자요리우유의사얘기예
  • SQL Server_查询某一数据库中的所有表的内容 qq_42772833 SQLServer数据库sqlserver
    1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchainmicrosoft数据库python
    利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
  • 数组去重 好奇的猫猫猫
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
  • 在一台Ubuntu计算机上构建Hyperledger Fabric网络 落叶无声9 区块链超级账本Hyperledgerfabric区块链ubuntu构建hyperledgerfabric
    在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 【PG】常见数据库、表属性设置 江无羡 数据库
    PG的常见属性配置方法数据库复制、备份相关表的复制标识单表操作批量表操作链接数据库复制、备份相关表的复制标识单表操作通过ALTER语句单独更改一张表的复制标识。ALTERTABLE[tablename]REPLICAIDENTITYFULL;批量表操作通过代码块的方式，对某个schema中的所有表一起更新其复制标识。SELECTtablename,CASErelreplidentWHEN'd'TH
  • ES聚合分析原理与代码实例讲解 光剑书架上的书 大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
    ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
  • JVM、JRE和 JDK：理解Java开发的三大核心组件 Y雨何时停T Javajava
    Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
  • 上班族可以做线上副业兼职有哪些？盘点7个适合上班族做的副业兼职！ 高省APP大九
    对于许多上班族来说，工资往往不能满足他们的生活需求，因此许多人开始寻找副业来增加收入。以下是一些适合普通人的副业赚钱路子，希望能给您带来一些灵感。1、做好物推荐现在很多职场人其实有大量的个人时间，只不过这些个人时间比较碎片化，他们不能够很好的利用起来，其实可以利用这些碎片化的时间去做副业，比如做好物推荐。在网上有很多的平台，比如头条抖音等等都开通了一个商品的分销功能，只要你发布相关的视频或者文章，
  • vue3中el-table中点击图片放大时，被表格覆盖 叫我小鹏呀 vue.jsjavascript前端
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • Vue中table合并单元格用法 weixin_30613343 javascriptViewUI
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • uniapp map组件自定义markers标记点 以对_ uni-app学习记录uni-appjavascript前端
    需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制{{item.options.labelName}}exportdefault{data(){return{storeIndex:0,locaInfo:{longitude:120.445172,latitude:36.111387},markers:[//标点列表{id:1,//标记点idin
  • 基于STM32与Qt的自动平衡机器人：从控制到人机交互的的详细设计流程 极客小张 stm32qt机器人物联网人机交互毕业设计c语言
    一、项目概述目标和用途本项目旨在开发一款基于STM32控制的自动平衡机器人，结合步进电机和陀螺仪传感器，实现对平衡机器人的精确控制。该机器人可以用于教育、科研、娱乐等多个领域，帮助用户了解自动控制、机器人运动学等相关知识。技术栈关键词STM32单片机步进电机陀螺仪传感器AD采集电路Qt人机界面实时数据监控二、系统架构系统架构设计本项目的系统架构设计包括以下主要组件：控制单元:STM32单片机传感器
  • JAVA·一个简单的登录窗口 MortalTom java开发语言学习
    文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
  • 2023最详细的Python安装教程（Windows版本） 程序员林哥 Pythonpythonwindows开发语言
    python安装是学习pyhon第一步，很多刚入门小白不清楚如何安装python，今天我来带大家完成python安装与配置，跟着我一步步来，很简单，你肯定能完成。第一部分：python安装（一）准备工作1、下载和安装python(认准官方网站)当然你不想去下载的话也可以分享给你，还有入门学习教程，点击下方卡片跳转进群领取（二）开始安装对于Windows操作系统，可以下载“executableins
  • C++八股 Petrichorzncu 八股总结c++开发语言
    这里写目录标题C++内存管理C++的构造函数，复制构造函数，和析构函数深复制与浅复制：构造函数和析构函数哪个能写成虚函数，为什么？C++数据结构内存排列结构体和类占用的内存：==虚函数和虚表的原理==虚函数虚表（Vtable）虚函数和虚表的实现细节==内存泄漏==指针的工作原理函数的传值和传址new和delete与malloc和freeC++内存区域划分C++11新特性C++常见新特性==智能指针
  • 放松的一天 4da9b7687fa0
    20190325总结起床07:20图片发自App睡觉:23:00天气:晴今日任务清单学习·信息·阅读•水滴阅读Day40Alice’sAdventuresinWonderlandChapter6.2图片发自App•BBC跟读训练营Day24图片发自App图片发自App图片发自App•潘多拉口语训练营Day6Wow.Whatabigboy!•文化知识学习今日无•阅读时间地狱健康·饮食·锻炼•饮食目标
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • Table列表复现框实现【勾选-搜索-再勾选】 ～四时春～ java开发语言elementuivue
    Table列表复现框实现【勾选-搜索-再勾选】概要整体架构流程代码实现技术细节注意参考文献概要最近在开发时遇到一个问题，在进行表单渲染时，正常选中没有问题，单如果需要搜索选中时，一个是已选中的不会回填，二是在搜索的结果中进行选中，没有实现，经过排查，查找资料后实现。例如：整体架构流程具体的实现效果如下：代码实现{{scope.row.userName}}已选区{{userItem.userName
  • vue+el-table 可输入表格使用上下键进行input框切换 以对_ vue学习记录vue.jsjavascript前端
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
  • PHP，安卓，UI，java，linux视频教程合集 cocos2d-x小菜 javaUIlinuxPHPandroid
    ╔-----------------------------------╗┆                           
  • zookeeper admin 笔记 braveCS zookeeper
      Required Software 1) JDK>=1.6 2)推荐使用ensemble的ZooKeeper(至少3台)，并run on separate machines 3)在Yahoo!，zk配置在特定的RHEL boxes里，2个cpu，2G内存，80G硬盘   数据和日志目录 1)数据目录里的文件是zk节点的持久化备份，包括快照和事务日
  • Spring配置多个连接池 easterfly spring
    项目中需要同时连接多个数据库的时候，如何才能在需要用到哪个数据库就连接哪个数据库呢？ Spring中有关于dataSource的配置：     <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"   &nb
  • Mysql 171815164 mysql
    例如，你想myuser使用mypassword从任何主机连接到mysql服务器的话。 GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY 'mypassword' WI TH GRANT OPTION; 如果你想允许用户myuser从ip为192.168.1.6的主机连接到mysql服务器，并使用mypassword作
  • CommonDAO（公共/基础DAO） g21121 DAO
            好久没有更新博客了，最近一段时间工作比较忙，所以请见谅，无论你是爱看呢还是爱看呢还是爱看呢，总之或许对你有些帮助。         DAO(Data Access Object)是一个数据访问（顾名思义就是与数据库打交道）接口，DAO一般在业
  • 直言有讳 永夜-极光 感悟随笔
      1.转载地址:http://blog.csdn.net/jasonblog/article/details/10813313   精华: “直言有讳”是阿里巴巴提倡的一种观念，而我在此之前并没有很深刻的认识。为什么呢？就好比是读书时候做阅读理解，我喜欢我自己的解读，并不喜欢老师给的意思。在这里也是。我自己坚持的原则是互相尊重，我觉得阿里巴巴很多价值观其实是基本的做人
  • 安装CentOS 7 和Win 7后，Win7 引导丢失 随便小屋 centos
    一般安装双系统的顺序是先装Win7，然后在安装CentOS，这样CentOS可以引导WIN 7启动。但安装CentOS7后，却找不到Win7 的引导，稍微修改一点东西即可。 一、首先具有root 的权限。      即进入Terminal后输入命令su，然后输入密码即可 二、利用vim编辑器打开/boot/grub2/grub.cfg文件进行修改 v
  • Oracle备份与恢复案例 aijuans oracle
    Oracle备份与恢复案例 一. 理解什么是数据库恢复当我们使用一个数据库时，总希望数据库的内容是可靠的、正确的，但由于计算机系统的故障（硬件故障、软件故障、网络故障、进程故障和系统故障）影响数据库系统的操作，影响数据库中数据的正确性，甚至破坏数据库，使数据库中全部或部分数据丢失。因此当发生上述故障后，希望能重构这个完整的数据库，该处理称为数据库恢复。恢复过程大致可以分为复原(Restore)与
  • JavaEE开源快速开发平台G4Studio v5.0发布 無為子
      我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V5.0版本已经正式发布。   访问G4Studio网站 http://www.g4it.org   2013-04-06 发布G4Studio_V5.0版本 功能新增 (1). 新增了调用Oracle存储过程返回游标，并将游标映射为Java List集合对象的标
  • Oracle显示根据高考分数模拟录取 百合不是茶 PL/SQL编程oracle例子模拟高考录取学习交流
    题目要求: 1,创建student表和result表 2,pl/sql对学生的成绩数据进行处理 3,处理的逻辑是根据每门专业课的最低分线和总分的最低分数线自动的将录取和落选     1,创建student表,和result表 学生信息表; create table student( student_id number primary key,--学生id
  • 优秀的领导与差劲的领导 bijian1013 领导管理团队
    责任 优秀的领导：优秀的领导总是对他所负责的项目担负起责任。如果项目不幸失败了，那么他知道该受责备的人是他自己，并且敢于承认错误。 差劲的领导：差劲的领导觉得这不是他的问题，因此他会想方设法证明是他的团队不行，或是将责任归咎于团队中他不喜欢的那几个成员身上。 努力工作 优秀的领导：团队领导应该是团队成员的榜样。至少，他应该与团队中的其他成员一样努力工作。这仅仅因为他
  • js函数在浏览器下的兼容 Bill_chen jquery浏览器IEDWRext
      做前端开发的工程师，少不了要用FF进行测试，纯js函数在不同浏览器下，名称也可能不同。对于IE6和FF，取得下一结点的函数就不尽相同：   IE6：node.nextSibling,对于FF是不能识别的；   FF：node.nextElementSibling,对于IE是不能识别的； 兼容解决方式：var Div = node.nextSibl
  • 【JVM四】老年代垃圾回收：吞吐量垃圾收集器(Throughput GC) bit1129 垃圾回收
    吞吐量与用户线程暂停时间   衡量垃圾回收算法优劣的指标有两个： 吞吐量越高，则算法越好 暂停时间越短，则算法越好 首先说明吞吐量和暂停时间的含义。   垃圾回收时，JVM会启动几个特定的GC线程来完成垃圾回收的任务，这些GC线程与应用的用户线程产生竞争关系，共同竞争处理器资源以及CPU的执行时间。GC线程不会对用户带来的任何价值，因此，好的GC应该占
  • J2EE监听器和过滤器基础 白糖_ J2EE
    Servlet程序由Servlet，Filter和Listener组成，其中监听器用来监听Servlet容器上下文。 监听器通常分三类：基于Servlet上下文的ServletContex监听，基于会话的HttpSession监听和基于请求的ServletRequest监听。   ServletContex监听器 ServletContex又叫application
  • 博弈AngularJS讲义(16) - 提供者 boyitech jsAngularJSapiAngularProvider
      Angular框架提供了强大的依赖注入机制，这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象，例如控制器，指令，过滤器动画等。   那注入器怎么知道如何去创建这些特殊的对象呢？ Angular提供了5种方式让注入器创建对象，其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac
  • java-写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 bylijinnan java
    public class CommonSubSequence { /** * 题目：写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 * 写一个版本算法复杂度O(N^2)和一个O(N) 。 * * O(N^2)：对于a中的每个字符，遍历b中的每个字符，如果相同，则拷贝到新字符串中。 * O(
  • sqlserver 2000 无法验证产品密钥 Chen.H sqlwindowsSQL ServerMicrosoft
    在 Service Pack 4 (SP 4), 是运行 Microsoft Windows Server 2003、 Microsoft Windows Storage Server 2003 或 Microsoft Windows 2000 服务器上您尝试安装 Microsoft SQL Server 2000 通过卷许可协议 (VLA) 媒体。 这样做, 收到以下错误信息CD KEY的 SQ
  • [新概念武器]气象战争 comsci
           气象战争的发动者必须是拥有发射深空航天器能力的国家或者组织....        原因如下:        地球上的气候变化和大气层中的云层涡旋场有密切的关系,而维持一个在大气层某个层次
  • oracle 中 rollup、cube、grouping 使用详解 daizj oraclegroupingrollupcube
    oracle 中 rollup、cube、grouping 使用详解 -- 使用oracle 样例表演示 转自namesliu -- 使用oracle 的样列库，演示 rollup, cube, grouping 的用法与使用场景    --- ROLLUP ， 为了理解分组的成员数量，我增加了 分组的计数  COUNT(SAL)   
  • 技术资料汇总分享 Dead_knight 技术资料汇总 分享
    本人汇总的技术资料，分享出来，希望对大家有用。 http://pan.baidu.com/s/1jGr56uE 资料主要包含： Workflow->工作流相关理论、框架(OSWorkflow、JBPM、Activiti、fireflow...) Security->java安全相关资料(SSL、SSO、SpringSecurity、Shiro、JAAS...) Ser
  • 初一下学期难记忆单词背诵第一课 dcj3sjt126com englishword
    could 能够 minute 分钟 Tuesday 星期二 February 二月 eighteenth 第十八 listen 听 careful 小心的，仔细的 short 短的 heavy 重的 empty 空的 certainly 当然 carry 携带；搬运 tape 磁带 basket 蓝子 bottle 瓶 juice 汁，果汁 head 头；头部
  • 截取视图的图片, 然后分享出去 dcj3sjt126com OSObjective-C
    OS 7 has a new method that allows you to draw a view hierarchy into the current graphics context. This can be used to get an UIImage very fast. I implemented a category method on UIView to get the vi
  • MySql重置密码 fanxiaolong MySql重置密码
    方法一:  在my.ini的[mysqld]字段加入： skip-grant-tables 重启mysql服务，这时的mysql不需要密码即可登录数据库  然后进入mysql mysql>use mysql;  mysql>更新 user set password=password('新密码') WHERE User='root'; mysq
  • Ehcache（03）——Ehcache中储存缓存的方式 234390216 ehcacheMemoryStoreDiskStore存储驱除策略
    Ehcache中储存缓存的方式   目录 1     堆内存（MemoryStore） 1.1     指定可用内存 1.2     驱除策略 1.3     元素过期 2   &nbs
  • spring mvc中的@propertysource jackyrong spring mvc
      在spring mvc中，在配置文件中的东西，可以在java代码中通过注解进行读取了： @PropertySource  在spring 3.1中开始引入 比如有配置文件 config.properties mongodb.url=1.2.3.4 mongodb.db=hello 则代码中   @PropertySource(&
  • 重学单例模式 lanqiu17 单例Singleton模式
    最近在重新学习设计模式，感觉对模式理解更加深刻。觉得有必要记下来。 第一个学的就是单例模式，单例模式估计是最好理解的模式了。它的作用就是防止外部创建实例，保证只有一个实例。 单例模式的常用实现方式有两种，就人们熟知的饱汉式与饥汉式，具体就不多说了。这里说下其他的实现方式 静态内部类方式: package test.pattern.singleton.statics; publ
  • .NET开源核心运行时，且行且珍惜 netcome java.net开源
    背景 2014年11月12日，ASP.NET之父、微软云计算与企业级产品工程部执行副总裁Scott Guthrie，在Connect全球开发者在线会议上宣布，微软将开源全部.NET核心运行时，并将.NET 扩展为可在 Linux 和 Mac OS 平台上运行。.NET核心运行时将基于MIT开源许可协议发布，其中将包括执行.NET代码所需的一切项目——CLR、JIT编译器、垃圾收集器（GC）和核心
  • 使用oscahe缓存技术减少与数据库的频繁交互 Everyday都不同 Web高并发oscahe缓存
    此前一直不知道缓存的具体实现，只知道是把数据存储在内存中，以便下次直接从内存中读取。对于缓存的使用也没有概念，觉得缓存技术是一个比较”神秘陌生“的领域。但最近要用到缓存技术，发现还是很有必要一探究竟的。   缓存技术使用背景：一般来说，对于web项目，如果我们要什么数据直接jdbc查库好了，但是在遇到高并发的情形下，不可能每一次都是去查数据库，因为这样在高并发的情形下显得不太合理——
  • Spring+Mybatis 手动控制事务 toknowme mybatis
    @Override    public boolean testDelete(String jobCode) throws Exception {       boolean flag = false;  &nbs
  • 菜鸟级的android程序员面试时候需要掌握的知识点 xp9802 android
    熟悉Android开发架构和API调用 掌握APP适应不同型号手机屏幕开发技巧 熟悉Android下的数据存储  熟练Android Debug Bridge Tool 熟练Eclipse/ADT及相关工具  熟悉Android框架原理及Activity生命周期 熟练进行Android UI布局 熟练使用SQLite数据库； 熟悉Android下网络通信机制，S
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他