纯CSS实现tooltip提示框，CSS箭头及形状

原文: 纯CSS实现tooltip提示框，CSS箭头及形状

本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状！

首先介绍一下CSS：after选择器

定义和用法：(参考w3school:after选择器)

　　：after选择器在被选元素的内容后面插入内容，使用content属性来指定要插入的内容

例：

p:after

{ 

    content:"台词：-";

    background-color:yellow;

    color:red;

    font-weight:bold;

}
View Code

 具体大家可以参考：w3school！

 

下面来介绍用:after选择器来制作CSS箭头等提示框：（这里将一步一步简单的设计，每一步添加的内容就是与前一步多出来的style代码内容，注意区别！）
首先，我们的HTML代码：

<body>

    <div class="demo"></div>

</body>
View Code

让我们来设置该盒子的样式：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

</style>
View Code

截图：

纯CSS实现tooltip提示框，CSS箭头及形状

这里需注意我们设置position属性为relative，是为了允许我们设置我们的“箭头”（还没有出现）绝对定位并且保持它和我们的盒子有联系！

 

接着我们继续插入“箭头”（还没有出现）基本样式：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        height:20px;

        width:20px;

        background:yellow;

    }

</style>
View Code

截图：

纯CSS实现tooltip提示框，CSS箭头及形状

你将会注意到一些事，一、我们仅仅插入了一个黄色的方块，那个就是我们将要设计成箭头的方块；二、我们设置绝对定位absolute以至于我们可以将它移动到我们想要的位置上！

继续，这儿给黄色方块（即“箭头”前身）设置边框，这儿的边框就是箭头的实体，并且去掉黄色方块的内容（通过设置.demo:after中的样式“height:0;width:0”去掉黄色方块，这里我们省略了黄色方块的height、width）：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        //height:20px;

        //width:20px;

        background:yellow;

                

        border:10px solid gray;

    }

</style>
View Code

截图：
纯CSS实现tooltip提示框，CSS箭头及形状

 

现在再将灰色边框方块设计成箭头形式：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        //height:20px;

        //width:20px;

        //background:yellow;

                

        //border:10px solid gray;

        border:10px solid transparent;

        border-top-color:gray

    }

</style>
View Code

截图：
纯CSS实现tooltip提示框，CSS箭头及形状

OK！我们可以看到箭头成形！

 

下面来设置它的位置为我们想要的（此例箭头移动至下端）：

<style>

    .demo{

        background-color: lightgreen;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        //height:20px;

        //width:20px;

        //background:yellow;

                

        //border:10px solid gray;

        border:10px solid transparent;

        border-top-color:gray;

        

        top:100%;

        left:10px;

    }

</style>
View Code

截图：
纯CSS实现tooltip提示框，CSS箭头及形状

到这里基本上完事了

 

下面整体样式设计下（其实就更改了盒子的背景色与箭头颜色相同）：

<style>

    .demo{

        background-color: gray;

        height: 100px;

        position: relative;

        width: 100px;

    }

    .demo:after{

        content:'';

        position:absolute;

        //height:20px;

        //width:20px;

        //background:yellow;

                

        //border:10px solid gray;

        border:10px solid transparent;

        border-top-color:gray;

        

        top:100%;

        left:10px;

    }

</style>
View Code

截图：
纯CSS实现tooltip提示框，CSS箭头及形状

 

具体需要什么样的样式可以自行设置了！例如将箭头移动到其他三边可以设置border-T\R\B\L-color:gray;和TRBL(TRBL是指top\right\bottom\left)即可！

当然要修改箭头在盒子边框上的位置时，还需注意：边框border的大小不包含在自身盒子尺寸内！所以设计时需要注意margin的影响，比如箭头在下边框中居中，我们考虑上面的同时还需添加：“ margin-left:-10px; ”才可居中！

 

结论来自yy浮萍人生的评论（简洁形象~~哈哈~~）：

此例设计原理：设置伪类选择器盒子的宽度和高度为0,那边border形成的区域是[X]这个样子的，其他三边透明了，所以呢就显示了个三角形！

 

（本文参考：YUI Team:CSS Quick Tip: CSS Arrows and Shapes Without Markup）

 

你可能感兴趣的:(tooltip)

  • 【antdv4.0FormItem更新tooltip属性引发的思考】
    北京时间2023-10-19，ant-design-vue最近发布了4.0.4-4.0.6的小版本更新，其中4.0.4新增了对Form组件中FormItem的tooltip属性支持，这个功能我觉得在后台管理场景下还是非常实用的，tooltip属性作用于FormItem中的FormItemLabel区域，用来配置提示信息，当用户不确定该行的用处或者不知道填什么内容时，可以作为input里placeh
  • ikun-ui v0.2.7版本发布：组件功能增强与体验优化 时琦旖
    ikun-uiv0.2.7版本发布：组件功能增强与体验优化ikun-ui是一个基于Svelte框架构建的现代化UI组件库，专注于为开发者提供高质量、易用的前端组件。在最新发布的v0.2.7版本中，团队对多个核心组件进行了功能增强和体验优化，特别是在交互体验和视觉表现方面有了显著提升。组件功能增强工具提示与弹出框组件优化工具提示(Tooltip)和弹出框(Popover)组件新增了两项实用的交互控制
  • TextTipsPlus 多行省略 + Tooltip 提示组件 JaysonJin 实用组件库vue.jsjavascript前端
    TextTipsPlus多行省略+Tooltip提示组件✅功能亮点功能说明多行省略通过line-clamp控制显示行数，默认单行动态宽度支持传入width（数值或百分比/字符串）Tooltip超出显示自动判断是否超出容器，超出后显示完整tooltip插槽支持支持插入复杂结构（文本、图标、HTML等）i18n支持插槽和text均可支持$t()组件源码（TextTipsPlus.vue）{{$t(te
  • MATLAB App Designer基础教程 Matlab GUI入门（二） Sunshine_Cherish 学习笔记Matlabmatlab开发语言程序人生
    MATLABGUI入门第二天——Lamp(灯)霓虹灯控件的使用一、主要内容:技巧1.Tooltip的使用2.Vislble和Enable3.lf函数语句的使用需求：根据阈值进行提示1.红色温度过高>=500⒉橙色温度适中400~5003.蓝色温度过低=500app.lamp.Color="1,0,0";app.show_tips.Text="温度过高！";elseifvalue=400app.la
  • html 推荐三角角标,纯CSS实现箭头、气泡让提示功能具有三角形图标 weixin_39948247 html推荐三角角标
    演示地址：CSSTrianglesDemo本文两种实现方式:使用或不使用before和:after伪元素(伪类,pseudo-elements)最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标。当我重新思考想要所设计的每个图标颜色都随心所欲的时候，采用图片那就是一场灾难。幸运的是,MooTools的核心开发者DarrenWaddell
  • 新建笔记源码 无数碎片寻妳 海陆空自动化学习方案笔记java前端
    v1#NoEnv#Persistent#SingleInstanceForceSendModeInputSetWorkingDir%A_ScriptDir%SetBatchLines-1;设置坐标模式CoordMode,Mouse,ScreenCoordMode,ToolTip,ScreenCoordMode,Gui,Screen;---全局变量---globalTyporaConfigFile:
  • vue3中element-plus修改el-tooltip的宽度 selfsuer vue.jsjavascript前端
    注意选中的样式是:deep(.el-popper.is-dark){max-width:30%!important;}也有可能不需要后面的.is-dark，看情况而定，总之不是.el-tooltip修改el-tooltip的显示高度参考：前端字数太多使用el-table设置show-overflow-tooltip显示不下，闪烁不显示_某页面的el-table统一开启show-over-toolt
  • w笔记--axisPointer 的不同层级的优先级
    axisPointer的不同层级的优先级在ECharts中，axisPointer配置存在不同层级的定义（如tooltip中的axisPointer、坐标轴xAxis/yAxis中的axisPointer），它们的优先级和作用范围有特定规则：axisPointer的作用与配置层级axisPointer用于配置坐标轴指示器（即鼠标悬浮到坐标轴、数据系列时，显示的辅助线/阴影等提示元素），可在两个层级
  • vue2项目开发中遇到的小问题 0716*_zwj 前端javascript开发语言
    1.show-overflow-tooltip表格文字超出宽度，显示省略号，使用show-overflow-tooltip鼠标放上去会有一个提示框，但是文字太多的情况下，提示框文字会被吃一两个//改造table的tooltip样式，宽度不能为100%不然字体太多还是会丢失几个字（这个样式我是放在全局的）.el-tooltip__popper.is-dark{max-width:50%;}
  • echarts饼图使用tooltip详细介绍（鼠标移入显示的部分）和饼图数据显示不全的问题和echarts起始位置改变 小猫猫改bug echarts前端javascript
    自定义显示的内容：paremas打印出来以后，marker是异常前面的颜色块，a.b.c为自定义的内容2.饼图数据显示不完全：问题描述：写项目时遇到一个bug，当后端返回的数据过小，饼图会不显示，只需要在series里面加上这样的代码：minAngle:15,//最小的扇区角度（0~360），用于防止某个值过小导致扇区太小影响交互avoidLabelOverlap:true,//是否启用防止标签重
  • leaflet使用draw插件测量距离和面积 翠莲 webgisvue
    官网在线例子draw插件在线预览我的测量预览图：按照文档给出的例子，先引入这个插件，采用import形式import"leaflet-draw";import"leaflet-draw/dist/leaflet.draw.css";初始化使用插件//添加画图的提示信息L.drawLocal.draw.handlers.polyline={tooltip:{start:"点击地图开始画线",cont
  • echarts tooltip 无法正常显示
    在vue3中，无法正常显示tooltip，根据echarts官网配置项正确配置：constoption=reactive({title:{text:'用户操作平均时长',},//正确配置tooltip:{show:true,trigger:'axis'}})未出现tooltip原因：初始化ecahrts的时候用ref保存了echarts实例，实际上应该用shallowRefconstlineCha
  • ECharts 提示框（tooltip）居中显示位置的设置技巧 技术需要沉淀gogo echartsecharts前端javascript
    在使用ECharts开发可视化图表时，默认的tooltip会显示在鼠标右侧。这种默认行为在某些布局中可能会导致遮挡、偏移或视觉不居中。为了让用户获得更优的交互体验，我们可以通过手动设置tooltip.position函数，实现提示框在鼠标下方居中显示的效果。1、默认问题ECharts默认的tooltip会显示在鼠标右边，如果鼠标靠近图表右侧边缘时，tooltip可能会：超出图表边界遮挡关键信息视觉
  • 【sgImportBtn】自定义组件：导入按钮（支持上下文关联导出菜单，配置下载导入Excel模板按钮命令、样式、图标路径等） 你挚爱的强哥 Vue.jsSg.js框架vue.jsjavascriptecmascript
    sgImportBtn.vue{{dropdownItems[0].label}}{{item.label}}exportdefault{name:"sgExportBtn",components:{},data(){return{form:{},disabled:false,placement_dropdown:`bottom-end`,placement_tooltip:`top-end`,t
  • Easyui悬停组件 后会无期77 前端碎碎练easyui前端javascript
    文章目录一、EasyUI官方悬停解决方案：Tooltip组件1.基础用法2.高级配置项二、进阶场景：Datagrid表格悬停扩展1.监听行事件2.第三方扩展包（流云大神版）三、自定义悬停样式四、常见问题解决在EasyUI中，没有直接命名为“悬停组件”的独立控件，但可通过其核心组件（如tooltip）或扩展功能实现悬停效果。以下是具体实现方式及示例：一、EasyUI官方悬停解决方案：Tooltip组
  • a-tooltip偏移量不生效 兔老大的胡萝卜 前端javascripthtml
    trigger.parentNode":align="{offset:[0,-10],//[x,y]偏移}">偏移量设置最好使用align，直接offse没生效
  • 绘制自己组合的k线图_pyecharts 绘制参考线和策略线的K线图 weixin_39623355 绘制自己组合的k线图
    1、绘制流程1)构造Kline对象kline=Kline()添加数据kline.add_xaxis(xaxis_data=x_data)kline.add_yaxis(yaxis_data=y_data)全局配置kline.set_global_opts(可配置内容包括：提示框(opts.TooltipOptsx)、区域缩放(opts.DataZoomOptsy)、视觉映射配置项(opts.Vis
  • CSS attr() 函数详解 liangshanbo1215 CSS前端扩展css前端
    attr()是CSS中的一个函数，用于获取HTML元素的属性值并在样式中使用。虽然功能强大，但它的应用有一些限制和注意事项。基本语法element::pseudo-element{property:attr(attribute-name);}可用场景1.在伪元素的content属性中使用（最常用）悬停查看提示div::after{content:attr(data-tooltip);display
  • 1、Block UI 控件属性中英文对照表(基本) 机台克星 NX二次开发uic++
    1.标签位图常规BlockID控件idEnable是否可选/禁用控件Group组Label标题Show是否可见特定于块BalloonTooltipImage动态提示图片（鼠标移动到控件是显示图片）BalloonTooltipLayout动态提示布局BalloonTooltipText动态提示文本内容Bitmap指定图片DisplayBitmaplable是否显示标题HighQualitBitmap
  • echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整 我家老板是小仙女 echartecharts
    echart之堆叠柱状图自定义tooltip内容兼tooltip悬浮位置调整由于业务要求如下：（1）排序：根据柱状组成结构，从上到下保持一致，银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通（2）标签：根据柱状组成结构，从左到右，银票-电票-白名单、银票-电票-灰名单、商票-外部商票、商票-T票通然而echart堆叠柱状图的渲染机制是柱状图从下往上的，所以第一条数据是排在最底层
  • JavaScript实现鼠标悬停提示层的完整教程 veritascxy
    本文还有配套的精品资源，点击获取简介：在JavaScript编程中，实现鼠标悬停提示层是提升用户交互体验的重要方式。本文介绍如何使用CSS和JavaScript创建和控制提示层（tooltip），使其在用户鼠标悬停时显示相关详细信息，并在鼠标移开时隐藏。具体包括了tooltip的样式设计、显示与隐藏逻辑处理以及位置调整等关键步骤。此外，文中还建议了代码封装和响应式设计的考虑，以适应不同设备的需求。
  • html鼠标移动到图片上显示冒泡框,Bootstrap 教程 - 提示冒泡(Tooltip) weixin_39965881
    提示冒泡(Tooltip)使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例，用于本地标题存储的动画和数据属性。概览使用提示冒泡持件时应了解以下：Tooltip提示冒泡组件依赖于Popper.js，你必须将popper.min.js文件放在bootstrap.js之前调用，或者使用bootstrap.bundle.min.js/bootstrap.bundl
  • 使用echarts（三）自定义图表仪表盘 沉、睡 jspythonjava数据可视化css
    自定义仪表盘样式如下代码如下Document//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));//指定图表的配置项和数据varoption={tooltip:{formatter:'{a}{b}:{c}M/S'},//toolbox:{//重置，保存图片//feature:{//rest
  • 使用 ECharts 在 Vue3 中柱状图的完整配置解析 技术需要沉淀gogo echartsvue.jsechartsjavascript
    一、初始化图表实例constchart=echarts.init(chartRef.value);二、Tooltip提示配置tooltip:{trigger:'axis',axisPointer:{type:'line'//支持'line'或'shadow'类型，指示器样式},backgroundColor:'rgba(0,0,0,0.7)',textStyle:{color:'#fff'},fo
  • Flutter之PopupMenuButton 夢鑰 flutterflutterflutter
    constPopupMenuButton({Keykey,@requiredthis.itemBuilder,this.initialValue,//初始值，如果itemBuilder里该值，则会高亮显示this.onSelected,//选中弹出弹出选项的回调this.onCanceled,//点屏幕外取消回调,点击屏幕其他地方时调用this.tooltip,//this.elevation=8
  • Vue之echarts圆饼图详解 xclhs 学习vueecharts圆饼图vue小白入门
    圆饼图案例分析代码：option={  backgroundColor:'#2c343c',  title:{    text:'CustomizedPie',    left:'center',    top:20,    textStyle:{      color:'#ccc'    }  },  tooltip:{    trigger:'item',    formatter:"{a}{
  • WPF常用技巧汇总 - Part 2 Zhen (Evan) Wang WPFwpf大数据java
    WPF常用技巧汇总-CSDN博客主要用于记录工作中发现的一些问题和常见的解决方法。目录WPF常用技巧汇总-CSDN博客1.DataGridTooltip-Multiple2.DataGridTooltip-Cell值和ToolTip值一样3.DataGridTooltip-Cell值和ToolTip值不一样4.DataGrid-Ctrl+A/Ctrl+C复制的内容不是Cell的值5.DataGri
  • CSS 文字超出范围显示省略号 有趣的小良 实际开发常见问题css3前端css开发语言
    需要实现的效果是当文字太多的时候只显示一行或两行，其余文字用…省略号配合tooltip组件去显示的时候可以用css样式这样实现white-space:pre-wrap!important;overflow:hidden;//超过隐藏text-overflow:ellipsis;//设置省略号display:-webkit-box;-webkit-line-clamp:2;//设置行数，2显示可以显
  • echarts 圆饼图空心中间加文字 tjh0001
    varoption={title:{text:circularGraph.title,//标题文本left:"center",show:circularGraph.head//是否显示标题组件},tooltip:{trigger:"item",formatter:"{b}:{c}({d}%)"},legend:{show:true,orient:"horizontal",x:"center",y:
  • echarts横向柱状图胶囊 花笙_ echartsecharts前端
    echarts配置项tooltip:{trigger:'axis',//触发tooltip提示类型axis:坐标轴触发axisPointer:{type:'cross',//指示器类型cross:十字准星指示器crossStyle:{color:'#999'//线颜色}}},grid:{left:'0%',//离容器左侧的距离top:'5%',bottom:'3%',containLabel:tr
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他