涂根华
涂根华

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组件)

  • Stable Diffusion/DALL-E 3图像生成优化策略 云端源想 stablediffusion
    StableDiffusion的最新版本或社区开发的插件，可以补充这些信息以保持内容的时效性。云端源想1.硬件与部署优化（进阶）显存压缩技术使用--medvram或--lowvram启动参数（StableDiffusionWebUI），通过分层加载模型降低显存占用（适合6GB以下显卡）。分块推理（TiledDiffusion）：将图像分割为512×512区块，逐块生成后无缝拼接，支持4096×40
  • SQLite Truncate Table lsx202406 开发语言
    SQLiteTruncateTableSQLite是一种轻量级的数据库管理系统，常用于嵌入式系统和小型应用程序。在处理数据库时，有时需要删除表中的所有数据，但保留表结构。这时，TRUNCATETABLE语句就派上用场了。本文将详细介绍SQLite中的TRUNCATETABLE语句，包括其用法、性能影响以及与DELETE语句的区别。1.简介TRUNCATETABLE语句用于删除表中的所有数据，但保留
  • 【扩散模型Diffusion Model系列】1-一篇文章带你快速入门扩散模型Diffusion Model，个人入门学习路线+优质学习博客资料 Leafing_ DiffusionModel扩散模型人工智能深度学习AIGC扩散模型AI视频生成算法人工智能深度学习
    文章目录零、写在前面一、扩散理论缘起DDPM再见，马尔科夫！高视角DDIMLevelup！更高视角SDE、ScoreMatching、ODE走直线！RectifiedFlow和FlowMatching二、模型结构传统派LDMUNet:StableDiffusion维新派MMDiT：StableDiffusion3/Flux三、加速采样多走一步，再比较ConsistencyModel/LCM半白箱采
  • 【Android】使用Room数据库解决本地持久化 吃汉堡吃到饱 android数据库jvm
    【Android】使用Room数据库解决本地持久化Room概述Room是一个持久性库，属于AndroidJetpack的一部分。Room是SQLite数据库之上的一个抽象层。Room并不直接使用SQLite，而是负责简化数据库设置和配置以及与数据库交互方面的琐碎工作。此外，Room还提供SQLite语句的编译时检查。Room主要组件Room包含三个主要组件：数据实体表示应用的数据库中的表。数据实体
  • 【每日学点HarmonyOS Next知识】状态变量、动画UI残留、Tab控件显示、ob前缀问题、文字背景拉伸 轻口味 每天学点HarmonyOSNext知识harmonyosui华为HarmonyOSNext
    1、HarmonyOS怎么用一个变量观察其他很多个变量的变化？有一个提交按钮的颜色，需要很多个值非空才变为红色，否则变为灰色，可不可以用一个变量统一观察这很多个值，去判断按钮该显示什么颜色，比如Button().backgroundColor(this.color)，this.color的值取决于很多个输入框的值想将子组件与父组件的变量绑定起来，实现其中一个变量改变，对应的变量也做同步的改变，可以
  • Python中存储数据——json模块 小白的高手之路 python学习pythonjson开发语言
    很多时候，程序要把信息存储在列表和字典等数据结构中。一种简单的方式是使用json模块来存储数据。json模块能够将简单的Python数据结构存储到文件中，并在程序运行时加载文件中的数据。还可以使用json在Python程序之间分享数据。更重要的是，JSON数据格式并非Python专用的，能够将以JSON格式存储的数据与使用其他编程语言的人分享。JSON（JavaScriptObjectNotion
  • 一段java代码输出Hello world经历了哪些过程 无畏@ java
    一段Java代码从编写到输出Hello,World!，经历了多个步骤和组件的协作。以下是详细的过程解析：1.编写Java代码首先，编写一个简单的Java程序：java复制publicclassHelloWorld{publicstaticvoidmain(String[]args){System.out.println("Hello,World!");}}代码说明：定义了一个类HelloWorld
  • Spring Boot 多数据源解决方案：dynamic-datasource-spring-boot-starter 的奥秘（上） m0_74824780 面试学习路线阿里巴巴springboot后端java
    在SpringBoot生态中，dynamic-datasource-spring-boot-starter是一个非常实用的组件，它为我们在多数据源场景下提供了便捷的解决方案。在上一篇文章《一分钟上手：如何创建你的第一个SpringBootStarter》中，我们学习了如何创建自己的starter，今天我们就来深入探究下dynamic-datasource-spring-boot-starter的源
  • ADO.NET 面试题 哈希疯 .net数据库microsoft
    这里写自定义目录标题什么是ADO.NET？ADO.NET的主要特点有哪些？ADO.NET的四个组件分别是什么？什么是Connection串？Connection的状态有哪些？什么是DataAdapter？DataAdapter的作用是什么？什么是DataSet？ADO.NET中如何使用事务？什么是存储过程？存储过程的优劣何在？优点缺点什么是参数化查询？什么是事务？事务的并发控制有哪些？什么是连接池
  • 【MySQL基础】数据库与表的基本操作：从创建到管理 是阿川啊 零基础学MySQL数据库mysqlsql
    文章目录写在前面：1、数据库的创建和管理1.创建数据库：CREATEDATABASE注意事项：2.查看已有数据库：SHOWDATABASES3.删除数据库：DROPDATABASE防止误删4.总结2、表的创建与管理1.创建数据表：CREATETABLE2.查看表结构：DESCRIBE表名3.删除数据表：DROPTABLE4.修改表结构：ALTERTABLE4.1添加新列4.2删除列4.3修改列的数
  • 不要再让 import“占领满屏“啦？ 常威和来福回忆 react.js前端前端框架
    javascript代码解读复制代码//不使用重导importModalfrom'@arco-design/web-react/es/Modal'importCheckboxfrom'@arco-design/web-react/es/Checkbox'importMessagefrom'@arco-design/web-react/es/Message'...//使用模块重导import{Mod
  • vuejs相关链接和格式化插件推荐 醉酒的李白、 vue.jsjavascript前端
    vue官网：https://cn.vuejs.org/配合路由设置：https://router.vuejs.org/zh/guide/elementplus(vue3)|elementUI(vue2)：https://element-plus.org/zh-CN/#/zh-CN构建工具vite：https://cn.vitejs.dev/右键选择Prettier作为格式化工具，el-tree组件
  • AI学习指南RAG篇(5)-RAG的系统架构 俞兆鹏 AI学习指南ai
    文章目录一、引言二、RAG系统的四个核心组件1.知识库处理模块1.1文档收集1.2文档预处理1.3示例代码2.向量化模块2.1文本嵌入2.2向量数据库2.3示例代码3.检索引擎3.1检索算法3.2检索结果排序3.3示例代码4.生成模块4.1生成模型4.2提示工程4.3示例代码三、RAG系统的架构图四、总结一、引言RAG（Retrieval-AugmentedGeneration，检索增强生成）技术
  • WPF 嵌入Winform GDI 、 开启AllowsTransparenc问题 weixin_30896763
    此文章可以解决2至少2个问题：1.开启AllowsTransparenc造成的GDI+组件不显示问题2.WPF组件无法覆盖嵌入WPF窗口的任何第三方GDI+组件上层方案1：自制双层原理：用一个新的窗口来承载GDI+组件，实现父窗口拖动、缩放、最小化、最大化的联动事件。缺点：电脑性能太差会出现重影。方案2：微软解决空域的方案原理：用一个新的窗口来承载GDI+组件，实现父窗口拖动、缩放、最小化、最大化
  • 鸿蒙应用开发—ZDbUtil高效使用数据库 H.ZWei HarmonyOS应用开发harmonyos数据库鸿蒙ZDbUtil
    文章目录介绍下载安装基本使用注解TableIdColumnOneToOne使用方法定义实体类初始化数据库并根据被@Table注解的类创建表创建表查数据插入数据删除数据清空数据参考介绍ZDbUtil是一款基于SQLite的鸿蒙数据库框架，通过注解标注实体类与属性，让数据更能抽象化简化原生RdbStore的使用。同时支持V1和V2状态管理管理。SQLite在鸿蒙上的基本使用可以参考：鸿蒙应用开发—数据
  • 深度学习之优化器Optimizer介绍 yueguang8 人工智能深度学习人工智能
    优化器(Optimizer)是深度学习训练中非常关键的组件,它负责根据损失函数的梯度来更新模型参数,从而使模型性能不断提升。1.优化器的作用和重要性优化器是训练深度学习模型的核心组件之一。它负责根据损失函数的梯度来更新模型参数,推动模型性能不断提高。选择合适的优化器可以极大地影响模型的收敛速度和最终性能。2.优化器的基本原理优化器的基本思路是利用梯度下降法来最小化损失函数。每一步都根据当前梯度的方
  • 地理信息系统（ArcGIS）在水文水资源、水环境中的应用 科研的力量 水文地质土壤arcgis水文水资源
    一ArcGIS：数据管理1.1ArcGIS界面及数据加载1.2ArcGIS常见数据格式1.3基于Geodatabase的数据库构建1.4环境信息的查询与输出1.5文档保存方式二ArcGIS：数据转换2.1常用地图投影介绍2.2投影变换2.3地理坐标转换（北京54、西安80、WGS84及国家2000坐标转换）2.4数据结构转换2.5数据格式转换2.6数据类型转换三ArcGIS：地图制作3.1GIS制
  • mac M1 安装flutter 小泥人（倪） macosflutter
    M1安装Flutter1-官网下载flutterSDK盘符自己记好https://docs.flutter.dev/release/archive?tab=macos2-控制台配置环境变量open.zshrc/bash_profile//平常在哪配就打开哪个文件3-复制粘贴exportPATH="$PATH:/Users/xnr/Documents/flutter/bin:$PATH"//自己安装
  • vue中修改子组件样式 dengling4813 javascriptViewUI
    一、问题叙述项目里需要新添加一个表单页面，里面就只是几个select,这个几个select是原本封装好的组件，有自己原本的样式，而这次的原型图却没有和之前的样式统一起来，需要微调一下，这里就涉及到父组件修改子组件的样式。不想混用本地和全局样式，所以选择了>>>，但是并不起作用，就换成/deep/，其实到这里我也没有继续深入这个知识点，因为在浏览器里预览后已经实现了原型图的样式，直到打包在手机上测试
  • vue3 antd table表格样式修改——ant design vue table表格的行高调整 Dorable_Wander antdesignvueVuevue.jscss前端anti-design-vuejavascript
    vue3antd项目实战——修改antdesignvuetable组件的默认样式（调整每行行高）知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会用到的知识链接vue3+antdesignvue+ts实战【ant-design-vue组件库引入】css样式穿透（/deep/::v-deep深度选择器）vue3antd项目实战——table表格（一文带你快速实现后台
  • vue3 el-table 通过深度选择器::v-deep修改组件内部样式（默认样式） BillKu vue.jsjavascript前端
    默认的样式：修改的样式：CSS：//使用vue3的深度选择器::v-deep（或者:deep，::v-deep的别名），修改组件内部样式，从而改变组件默认的显示效果//表格奇数行样式::v-deep.el-table.odd-row{background-color:#ccffff;}//表格偶数行样式:deep.el-table.even-row{background-color:#9acdd6
  • react组件设计原则_前端组件设计原则 weixin_39825259 react组件设计原则
    原标题：前端组件设计原则译者：@没有好名字了译文：https://github.com/lightningminers/article/issues/36，https://juejin.im/post/5c49cff56fb9a049bd42a90f作者：@AndrewDinihan原文：https://engineering.carsguide.com.au/front-end-componen
  • vue3学习教程第二十六节（Hooks 封装注意事项） 刺客-Andy vue3vue.jsjavascript前端
    1、什么是HooksHooks最先提出的是React，在React16之后提出了所有以use开头定义的函数，用于复杂功能编写、函数组件中状态管理共用、副作用处理而抽离的共用的单一功能可复用的函数；2、Hooks与mixinsClass在应用中的差异在vue2中的mixinsClass主要有以下缺点：a、数据来源不清晰：在一个单文件组件中引入多个mixins或者class时候，想要追踪一个方法或者属
  • React 使用高阶组件封装Context的两种方式 Kevin·Tseng vuereactjava数据库python
    Reac中使用Context共享数据时，可以使用高阶组件做一个封装，方便页面使用方式一：使用高阶组件1.在App.js中添加状态共享ProviderimportHomefrom'./page/Home'import{Provider,Context}from'./AppContext'conststore={user:{isLogin:true,userName:"Kevin"}}function
  • 鸿蒙HarmonyOS NEXT开发：LoadingProgress（基础组件） 「已注销」 ArkTS鸿蒙harmonyos华为android驱动开发鸿蒙
    LoadingProgress用于显示加载动效的组件。说明：该组件从APIVersion8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件无接口LoadingProgress()创建加载进展组件。卡片能力：从APIversion9开始，该接口支持在ArkTS卡片中使用。原子化服务API：从APIversion11开始，该接口支持在原子化服务中使用。属性除支持通用属性外，
  • Flutter：签名板封装 sunly_ Flutterflutterjavascript开发语言
    签名板依赖安装#图片处理image:^4.1.3#签名signature:^5.4.1封装组件import'dart:typed_data';import'package:dogex/common/index.dart';import'package:ducafe_ui_core/ducafe_ui_core.dart';import'package:flutter/material.dart';
  • 组件封装有哪些注意事项—面试常问优美回答 二川bro 面试职场和发展
    组件封装有哪些注意事项—面试常问优美回答关键点及回答建议与代码案例组件设计原则关键点：高内聚低耦合、接口清晰、职责单一。回答建议：“在设计组件时，我遵循高内聚低耦合的原则，确保组件内部逻辑紧密相关，同时减少与其他组件的直接依赖。”“我注重定义清晰的接口，使得组件的使用者能够轻松地理解和使用组件，而不需要关心其内部实现。”“我坚持职责单一原则，每个组件只负责一个特定的功能，以便于维护和复用。”代码案
  • HIVE SQL进阶 Q010910 hivesqlhadoop数据分析
    1.lateralviewexplode：将array或map类型的列拆分成多行数据lateralview：把拆分的单个字段数据与原始表的数据关联上LATERALVIEWEXPLODE(col)table_tempAScol_nametable_temp是因为LATERALVIEWUDTF函数在执行时，会生成一个临时的虚拟表。同时生成的列也需要列名col_name。lateralview的位置在f
  • Excel 基础知识-操作手册2 数据牧马人 excel
    十、查找与引用函数Excel中的查找与引用函数非常丰富，以下是一些主要的函数及其使用示例：1.**VLOOKUP**-语法：`VLOOKUP(lookup_value,table_array,col_index_num,[range_lookup])`-示例：假设A列是员工编号，B列是员工姓名，你想根据员工编号查找员工姓名。公式：=VLOOKUP(123,A2:B100,2,FALSE)这将在A2
  • flutter dio 组件源码解析1 阿旭哟嘿 flutter
    dio使用方法看https://github.com/flutterchina/dio记录下dio配套组件dio_cookie_manager管理cookie的dio_http2_adapterhttp2适配器dio_smart_retry重试机制http_certificate_pinning配置固定证书比如就不能随意抓包curl_logger_dio_interceptorcurl生成器，比如
  • 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其他