davidbeckham
davidbeckham

原生JavaScript写出Tabs标签页

  最近在重新学习JavaScript，手写了一个tabs标签页。

  话不多说，直接开始。  

  首先，是前端页面。

原生JavaScript写出Tabs标签页_第1张图片

 

图1 tabs

先来把tabs分解一下：原生JavaScript写出Tabs标签页_第2张图片图2 tabs分解

首先，一个大的框div，上面红色的框是导航栏nav，导航栏里是一个无序列表ul，里面三个li标签（黄色的框），li标签里两个绿色标签是两个span，一个用来放导航的名字，一个用来放导航关闭的icon，右边是一个button，用来添加新的导航栏及内容；下方是导航栏的内容section。

导航tabs.html代码如下：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <main>
        <div class="tabsbox" id="tab">
            
            <nav class="firstnav">
                <ul>
                    <li class="liactive"><span>测试1span><span class="icon-guanbi">Xspan>li>
                    <li><span>测试2span><span class="icon-guanbi">Xspan>li>
                    <li><span>测试3span><span class=" icon-guanbi">Xspan>li>
                ul>
                <div class="tabadd">
                    <span>+span>
                div>
            nav>

            
            <div class="tabscon">
                <section class="conactive">测试内容1section>
                <section>测试内容2section>
                <section>测试内容3section>
            div>
        div>
    main>

    <script src="js/tabs.js">script>
body>

html>
<style>
 * {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

main {
    width: 960px;
    height: 500px;
    border-radius: 10px;
    margin: 50px auto;
}

main h4 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.tabsbox {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid lightsalmon;
    position: relative;
}

nav ul {
    overflow: hidden;
}

nav ul li {
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li.liactive {
    border-bottom: 2px solid #fff;
    z-index: 9;
}

#tab input {
    width: 80%;
    height: 60%;
}

nav ul li span:last-child {
    position: absolute;
    user-select: none;
    font-size: 12px;
    top: -18px;
    right: 0;
    display: inline-block;
    height: 20px;
}

.tabadd {
    position: absolute;
    /* width: 100px; */
    top: 0;
    right: 0;
}

.tabadd span {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    float: right;
    margin: 10px;
    user-select: none;
}

.tabscon {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.tabscon section,
.tabscon section.conactive {
    display: none;
    width: 100%;
    height: 100%;
}

.tabscon section.conactive {
    display: block;
}
style>

由于给导航栏增删查改的js代码很多，我单独用一个js文件写tabs.js，在tabs.html里引用就行。

实现的导航栏功能有：

　　1）导航栏的切换功能

       2）增加导航栏的功能

       3）删除导航栏的功能

   tabs.js代码如下：

  1 var that;
  2 class Tab {
  3     constructor(id){
  4         that = this;
  5         //获取元素
  6         this.main = document.querySelector(id);
  7        
  8         this.add = this.main.querySelector('.tabadd');
  9         //li的父元素
 10         this.ul = this.main.querySelector('.firstnav ul:first-child');
 11         //section的父元素
 12         this.fsection = this.main.querySelector('.tabscon');
 13         this.init();
 14     }
 15     //初始化操作
 16     init(){
 17         this.updateNode();
 18         this.add.onclick = this.addTab;
 19         for(let i = 0;i<this.lis.length;i++){
 20             this.lis[i].index = i;
 21             this.lis[i].onclick = this.toggleTab;
 22             this.remove[i].onclick = this.removeTab;
 23             this.spans[i].ondblclick = this.editTab;
 24             this.sections[i].ondblclick = this.editTab;
 25         }
 26     }
 27     //获取li跟section
 28     updateNode(){
 29         this.lis = this.main.querySelectorAll('li');
 30         this.sections = this.main.querySelectorAll('section');
 31         this.remove = this.main.querySelectorAll('.icon-guanbi');
 32         this.spans = this.main.querySelectorAll('.firstnav li span:first-child')
 33     }
 34     //1.切换功能
 35     toggleTab(){
 36 
 37         that.clearClass();
 38         this.className = 'liactive';
 39         that.sections[this.index].className = 'conactive';
 40     }
 41     clearClass(){
 42         for(let i = 0;i<this.lis.length;i++){
 43             this.lis[i].className = '';
 44             this.sections[i].className = '';
 45         }
 46     }
 47     //2.添加功能
 48     addTab(){
 49         that.clearClass();
 50        //1)添加li元素和section
 51         var random = Math.random()
 52         var li = '
  • 新选项卡X
    • ';
 53         var section = '
    '+random+'
    ';
 54        
 55        //2）把两个元素添加到对应的父级元素中
 56         that.ul.insertAdjacentHTML('beforeend',li);
 57         that.fsection.insertAdjacentHTML('beforeend',section);
 58         that.init();
 59     }
 60     //3.删除功能
 61     removeTab(e){
 62         e.stopPropagation();
 63         var index = this.parentNode.index;
 64         console.log(index);
 65         //删除对应节点
 66         that.lis[index].remove();
 67         that.sections[index].remove();
 68         //删除后及时更新页面中的节点
 69         that.init();
 70         //如果当前页面有选中状态，就不用执行下面的步骤
 71         if(document.querySelector('.liactive')) return;
 72         //让index前一个处于选中状态
 73         index--;
 74         that.lis[index] && that.lis[index].click();
 75     }
 76     //4.修改功能
 77     editTab(){
 78         let str = this.innerHTML;
 79         // console.log(str);
 80         //禁止双击选中文字
 81         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
 82         this.innerHTML=''
 83         let input = this.children[0];
 84         input.value = str;
 85         input.select();
 86         //input失去焦点后变回span
 87         input.onblur = function(){
 88             this.parentNode.innerHTML= this.value;
 89         }
 90         //按回车也能
 91         input.onkeyup = function(e){
 92             if(e.keyCode == 13){
 93                  this.blur();//获得焦点
 94             }
 95            
 96         }
 97         
 98     }
 99 }
100  new Tab('#tab');
101 // tab.init();

     

     

    你可能感兴趣的:(原生JavaScript写出Tabs标签页)

    • 4招写出高价值文章 zhiliner
      文章写得泛泛是因为思考得不够深，思考得越深文章会越有价值。拿到一个主题一定要去深入挖掘事件背后的东西，比如人物困境以及趋势性的东西。写作过程中有几个深度思考的方法一、解剖，让旧素材焕发新意作为一个写作者，我们能够做的最大贡献，就是给出自己看世界的角度。解剖其实就是把这个话题相关的信息都列出来，详细的列出来，看清楚它的内部。我们看到一个老话题或者一段旧素材的时候，不要只看这个素材或者话题本身，一定要
    • 经纬恒润二面&三七互娱一面&元象二面 Redstone Monstrosity 面试前端
      1.请尽可能详细地说明，进程和线程的区别，分别有哪些应用场景？进程间如何通信？线程间如何通信？你的回答中不要写出示例代码。进程和线程是操作系统中的两个基本概念，它们在计算机系统中扮演着不同的角色，并且在不同的应用场景中发挥作用。进程和线程的区别定义：进程：进程是操作系统进行资源分配和调度的基本单位。每个进程都有独立的内存空间和系统资源。线程：线程是进程内的一个执行单元，是操作系统进行调度的最小单位
    • 补充元象二面 Redstone Monstrosity 前端面试
      1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    • 绝招曝光！3小时高效利用ChatGPT写出精彩论文 kkai人工智能 chatgpt人工智能ai学习媒体
      在这份指南中，我将深入解析如何利用ChatGPT4.0的高级功能，指导整个学术研究和写作过程。从初步探索研究主题，到撰写结构严谨的学术论文，我将一步步展示如何在每个环节中有效运用ChatGPT。如果您还未使用PLUS版本，可以参考相关教程。**初步探索与主题的确定**起初，我处于庞大的知识领域中，寻找一个可深入研究的领域。ChatGPT如同灯塔，通过深入分析最新研究趋势和领域热点，帮助我在广阔的学
    • 【c++基础概念深度理解——堆和栈的区别，并实现堆溢出和栈溢出】 XWWW668899 C++基本概念c++c语言开发语言青少年编程
      文章目录概要技术名词解释栈溢出和堆溢出小结概要学习C++语言，避免不了要好好理解一下堆（Heap）和栈（Stack），有助于更好地管理内存，以及如何写出一段程序“成功实现”堆溢出和栈溢出。技术名词解释理解东西最快的方式是根据自己目前能理解的词语去关联新的概念，不断的纠正，向正确的深度理解靠近，当无限接近的时候也就理解了想要理解的概念。我们经常说堆栈，把这两个名词放到一起。其实，堆是堆，栈是栈，两种
    • 我的不自在 萍梗子
      人群——一个人的时候，觉得孤单渴望热闹。到了商场，看到那么多的人群，又觉喧闹，觉不自在。连进店里逛逛都不敢。远远看看离开。其实是自己着装觉得太邋遢。若着装正常普通，形象OK，在人群中可以像个隐形人般观察，应该就没那么不自在。坐在花坛边，写下这些，自在多了。可以坦然进去商场浏览了。——文字的功效。写出来的厘清功能。走到广场，融入人群。爱奇艺会员活动，很多奇装异服。很多欢闹的年轻人。而我，真的不年轻了
    • 我的总资产6.666 莱莱克西
      刚才打开，准备日更，顺便看了一眼自己在里面的资产。咦…总资产6.666，突然觉得这个数字应该截一下屏，保留下来。纯粹觉得这个数字这么刚刚好还挺吉利也挺难得的（我是个迷信鬼吧……）。然后今天日更的主题一下子就有了。大多数时候在打开前还不知道当天要写点什么，但神奇的是，当我打开之后，略略思索一下，灵感立马就来了。我想这大概就是写作的魅力，不去下笔就永远不知道自己能写出什么东西来。起初来也是为了锻炼自己
    • 内经简介（上） 骆长珊
      哈喽大家好我是骆长珊今天是2017年1月9日，今天是我每天一篇文章的第四十八篇。最近在重温《黄帝内经》，我在不断记颂原文的过程也不断的找相关资料来看。最终目的，以教为学，写出自己知道的，提神自己的觉悟。黄帝内经》是我国传统医学四大经典著作之一（《黄帝内经》、《伤寒论》、《金匮要略》、《温病条辨》），也是第一部冠以中华民族先祖“黄帝”之名的传世巨著，是我国医学宝库中现存成书最早的一部医学典籍。在理论
    • 2021-08-25 木棉yang0314
      无题不知不觉八月末了，凉爽的风吹进来，舒服的想留在这时光里，过去的不去想，正在发生的也不去想，未来的更不去想。就这样听着隔壁老樊的歌，留在这时光里。浮世半生，刚刚学会偷得半日闲，还有种沉甸甸的负罪感，感觉自己好自私。是啊，这些年何曾为自己真正活过？可谁又不是背着沉重的担子，昨天去看，才知道北花的母亲病重，赶紧联系询问，她说：“谁都不要说，是我的一个情绪出口，写出来不是为了告诉别人，请你理解！”其实
    • 第二阶段学习的第二次复盘 蓝色沫
      【昵称】蓝色，沫【我的技能】第二阶段所学内容中，我学习了如何学好爆款标题，如何写好开头和结尾，如何写好媒体文等等。【我要发问】第二阶段学习的内容中，没能掌握好写媒体文。【我的闪光点】第二阶段做的好的地方，有按时完成作业，以及认真听视频课，在课程中，明白了怎样去写好开头和结尾，怎样写出爆款标题等。【不足之处】没能掌握好写媒体文。关于写好媒体文，有些吃力，针对写三至五个小标题，以及写好媒体文框架还存在
    • 无敬道尘子（通灵游戏2） 忆予残柳
      王敬问完这句话后，随着标准楷书的出现，所有人都紧张了起来。如果是连笔的行书都没什么，但是，四个人握着同一支笔，写出这样的字，真是让人倒吸一口凉气。应该没有人会有这么深的功力吧。这又紧张又惊悚的气氛，真是刺激，我下意识的看了看所有人，都是一副紧张的表情，特别是王敬，那豆大的汗珠正噼里啪啦地往下掉。突然，在没有人问的时候，笔自己动了起来，在纸上写了一行非常标准的楷书：“你好”，“很快就再见了”。在字写
    • 大数据真实面试题---SQL The博宇 大数据面试题——SQL大数据mysqlsql数据库bigdata
      视频号数据分析组外包招聘笔试题时间限时45分钟完成。题目根据3张表表结构，写出具体求解的SQL代码（搞笑品类定义：视频分类或者视频创建者分类为“搞笑”）1、表创建语句：createtablet_user_video_action_d(dsint,user_idstring,video_idstring,action_typeint,`timestamp`bigint)rowformatdelimi
    • electron多标签页模式更像客户端 diygwcom electronjavascript前端
      Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
    • 2019-6-9 星期日 多云 亲子日记第775天 小轩仔0808
      端午小长假最后一天，穿梭在各个补习班、兴趣班，该收收心，准备开学啦！早起送宝贝去上作文课，回家开始准备早饭。吃过早饭后，陪宝贝写作文，庆祝祖国华诞70周年，以书信的格式完成。宝贝冥思苦想，最终副标题准备写给未来的一封信。这个题材对于宝贝来说有些难度，我便告诉他，充分发挥自己的想象力，把你想到的未来是什么样子写出来。在我耐心的讲解下，他终于拿起笔，流畅地写起来。历经两个多小时，作品终于完成了，宝贝不
    • 【十八】【QT开发应用】标签页QTabWidget的常见用法 妖精七七_ QT开发应用qt开发语言
      #include"widget.h"//包含自定义的widget头文件#include//包含QHBoxLayout头文件，用于水平布局#include//包含QTabWidget头文件，用于创建标签页控件#include//包含QDebug头文件，用于调试输出widget::widget(QWidget*parent)//widget类的构造函数:QWidget(parent)//调用基类QWi
    • Java：数学相关类 昭关969 java开发语言
      Math类Math类是数学工具类，用于数学计算，构造方法是私有的，方法都是静态的，因此直接类名调用staticintabs(inta)求参数绝对值staticdoubleceil(doublea)向上取整staticdoublefloor(doublea)向下取整staticlonground(doublea)四舍五入staticintmax(inta,intb)求较大值staticintmin(
    • Ihandy Unity开发 面试题 2024 z2014z 面试职场和发展
      1.当i>10时，调用test是否会出现死锁？原因是什么？voidtest(inti){lock(this){if(i>10){i--;test(i);}}}2.有一个表有n条记录，每条记录有两个字段，weight和id，写出程序保证id出现的概率与权重相同3.从1到n，一共有多少个14.二叉树的层次遍历5.给定两个链表，将对应数值相加6.检查两棵树是否相同
    • 如何把文案变成“印钞机” 西亚西
      把文案变成印钞机，这是《爆款文案》作者关键明老师一直在做的事情。他是前奥美金牌广告人，他写出了走心文案的一套系统和4大步骤。让每一个想学文案的人都能够从中获益。大家称关键明老师为文案圈的神级人物，知道关老师的人就知道，这个夸奖并不夸张。但是关老师为什么有现在如此高的成就？相信很多人想知道答案。首先关老师非常非常的利他。我现在链接到的很多人，其实都是从关老师那里知道。苏北老师，阿糖，安迪，还有许多同
    • 话题3:我眼里最会生活的女子是什么模样？ 欢喜Rose
      她首先应该是心地善良的，她有岁月和书香沉淀的气质。她应该是自律的，她能规划好自己的人生，把生活过得充实而有意义。她不仅能把孩子培养照顾好，同时她还能很好地照顾好自己，她懂得怎样好好爱自己她不断地追求成长和进步，她能找到自己的天命，活出自己，能很好地影响到别人。她有一颗敏感而又细腻的心，能把平凡的日子过得有滋有味。她写出了很多有温暖有力量的文字，她的文字让很多人得到了滋养和启发，看到了美好生活的希望
    • 招银网络&大疆&元象一面 Redstone Monstrosity 前端面试
      1.请尽可能详细地说明，XHR、axios和fetch这三者的区别是什么？axios和fetch的底层实现是什么？axios拦截器是什么？axios提供了哪些配置或功能，是fetch和XHR中没有的？你的回答中不要写出示例代码。XHR、axios和fetch的区别XHR(XMLHttpRequest)历史：XHR是最早的AJAX技术，由微软在1999年引入，后来被标准化。兼容性：几乎所有现代浏览器
    • 深入理解单元测试 元闰子 单元测试log4j
      荐语本文要介绍的是2020年O’Reilly出版的书籍UnitTestingPrinciples,Practices,andPatterns，一本在豆瓣评分高达9.9的好书。作为一名软件开发工程师，你应该对单元测试（unittest）很熟悉，但单元测试的目的、Mock的正确用法、单元测试和集成测试的区别等等，你真的懂吗？书中对这些内容都做了深入的介绍，并通过实际案例教你如何写出好的单元测试。读完这
    • 在叙事中有一种激情在涌动 一棵树的倒影
      在叙事中有一种激情在涌动文气，是贯穿在文章里的气势；文章的连贯性。文章要靠这股气。怎样才能让学生写出有文气的作文呢？一、用好教材这个例子。叶圣陶先生提出“教材无非是个例子”。他认为从语文教材入手,目的在于阅读种种的书,“选本的阅读是举一,推到其他东西的阅读是反三,一贯的目的在养成阅读的好习惯,”教会学生举一反三,达到“不需要教”的目的,善于启发引导学生触类旁通,这样便可使学生一辈子受用。初中阶段复
    • 15：00面试，15：06就出来了，问的问题有点变态。。 2401_86640859 面试职场和发展
      应该考虑进行如何测试的测试方法怎样估计测试工作量?测试设计的问题当测试过程发生错误时，有哪几种解决办法?测试执行的问题测试评估的目标如何提高测试?C/S模式的优点和缺点B/S模式的优点和缺点…Linuxgrep和find的区别?grep都有哪些用法?查看IP地址?创建和删除一个多级目录?在当前用户家目录中查找haha.txt文件?如何查询出tomcat的进程并杀掉这个进程，写出linux命令?动态
    • DAY91 决定！ 品贤
      继续写下去，练笔是一种态度。也不过才百天，不该要求有什么结果和后果，就这么写下去好了。诗歌，小说，心理，法律都是可以写得东西。写出来的东西经过梳理，总比在脑子里自以为是要好。需要改进的是每天再多投入一些时间精力，百天以后文章质量要有提升！图片发自App
    • 2020-12-11 浮生花开
      写一个人的故事，需要你去了解这个人的所有，才能写出好的故事，没有真正了解过，你又谈何去书写他的人生呢。有时候，如果，你真的遇到一个合适的人，或者说你遇到一个让你感兴趣的人，那么，请你对他进行如下的了解吧：1，他的价值观，一个人的价值观决定了他对这个世界基本的人事物的认知，一件小事可以看出很多细节，所以价值观的是否一直决定了你们是不是适合想知，毕竟，强扭的瓜不甜。2，他的为人处世，很多时候价值观会决
    • 如何通过学习经典，写出一篇优质的情感爆款文【续集】 小夭读书
      昨天文章中说到的都是如何通过阅读经典后，再对比自我写作中总结出的盲点，今天就要详细说说爆款文的干货内容了。首先是爆款文的选题：如果你大量去阅读一些类似的文章，你就会发现所有的文章都有套路，只要你能用心去归类总结，就一定能找到你想要写的主题。
    • 零时空间005*99天圆满/似此星辰同昨日～随笔 似此星辰同昨日
      文l仙派狼王*星辰原创时间过得真快，一晃三个月就过去了。最没想到的是，我这么懒的人，到现在，居然把自己以前写的，那些杂七杂八的东西，整理得差不多了。写不是问题，好赖能够写出来，一说到改，头疼得厉害。再一个就是舍弃，但不是丢弃，怎么说都是我自己的作品。留着有空的时候看看，或许还能找到灵感呢！不知道别人怎么想的，对于写小文，我不是特别喜欢写，总觉得和考试的文章一样，写起来总是感觉不那么舒畅。我翻看以前
    • 写出渗透测试信息收集详细流程 卿酌南烛_b805
      一、扫描域名漏洞：域名漏洞扫描工具有AWVS、APPSCAN、Netspark、WebInspect、Nmap、Nessus、天镜、明鉴、WVSS、RSAS等。二、子域名探测：1、dns域传送漏洞2、搜索引擎查找（通过Google、bing、搜索c段）3、通过ssl证书查询网站：https://myssl.com/ssl.html和https://www.chinassl.net/ssltools
    • 跟我一起写 SIPp XML scenario file 之二 无名387 os通讯
      就我个人的体会而言，貌似没什么秘诀，无非是：勤查手册拿到一个样本，进行临摹，多加练习分析有几个SIP事务如果SIPp做uas,totag是自己产生的fromtag,totag要不要颠倒过来requesturl的url来自何处如果uas主动发request,via是自己产生的要不要支持sipproxy目标是：拿到任意pcap文件，都可以写出对应的XMLscenariofile另：手册在这里：http
    • 随笔 小柠Duo猫猫
      从第一位粉丝，到今天的第七位，我还是庆幸，还是？但还是很感谢你们的关注。我不知道你会看我的文章吗？看我的啰哩啰嗦吗？或许是我的一个点赞，你就回粉下，或许？说实话，我很少去关注，对于关注的简友会偶尔看下，会看看推送，会对产生共鸣的文章点下小爱心，简友们各个是高手，可以写出那么一长段，我可做不到！会因此说，我当初是学理的，不是学文的。呃，这个借口真的烂极了。依然感谢你们！
    • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
       这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
    • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
        1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
    • [航天与宇宙]为什么发射和回收航天器有档期 comsci
             地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
    • linux下批量替换文件内容 商人shang linux替换
      1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
    • 网页在线天气预报 oloz 天气预报
      网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
    • SpringMVC和Struts2比较 杨白白 springMVC
      1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
    • refuse copy, lazy girl! 小桔子 copy
             妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
    • apache与php整合 aichenglong php apache web
      一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
    • Maven常用内置变量 AILIKES maven
      Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
    • java的类和对象 百合不是茶 JAVA面向对象 类 对象
      java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
    • JS控制页面输入框为只读 bijian1013 JavaScript
      在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
    • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
              对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
    • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
      常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
    • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
      1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
    • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
      nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
    • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
      随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
    • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
      参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
    • 数据库连接池的工作原理 chicony 数据库连接池
             随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
    • java 关键字 CrazyMizzz java
      关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
    • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
      Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
    • 单态设计模式 dcj3sjt126com 设计模式
        单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
    • svn locked dcj3sjt126com Lock
      post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
    • ARM寄存器学习 e200702084 数据结构C++cC#F#
      无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
    • 常用编码资料 gengzg 编码
      List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
    • 进程 vs. 线程 hongtoushizi 线程linux进程
      我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
    • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
      一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
    • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
           字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
    • 枚举类型的单例模式 zhb8015 单例模式
      E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
    • Kafka+Storm+HDFS ssydxa219 storm
      cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
    • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
      System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他