另类提示框_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

另类提示框_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:21 AM

我这里说的提示框，就是当用户将鼠标移动到需要提示的图标时，就会在这图标的位置出现一个提示框了。

咦，那这有什么好说的呢？

如果你来实现这一效果，你会怎么做呢？

初步的做法嘛，就是利用PS制作一张提示框内容区域的png图片和一张指向位置的箭头png图片，然后利用这张图片作为提示背景，里面输入指定内容呗。

恩，想法简单粗暴，那我们就来初步实现以下吧。

首先你得有两张上述说的图片，图片制作结果如下：

图一图二

好了，图片有了，接下来，就是将这两张图片作为背景。

我的想法是，两张图片利用两个div，将图二（三角形图片）嵌套在图一（矩形方框）里，然后达到这一提示框的效果。

<!DOCTYPE html>    <head>        <title>tip</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>            #liuTip {                background:url(img/title_back.png) 0 10px no-repeat;<!--图一：内容区-->                width:220px;                height:112px;                overflow:auto;                position:absolute;                display:block;            }            #liuTip div {                background:url(img/title_arrow.png) 0 0 no-repeat;<!--图二：箭头区-->                width:40px;                height:11px;            }        </style>    </head>    <body>        <!--提示框-->        <div id="liuTip">            <div></div>        </div>        <!--提示框结束-->    </body></html>

运行代码，效果如下：

图三

这样，一个简单的提示框就出来了。

但是，大家发现没，这样子的话，内容框（图一）是恒定不变的哦。

也就是说，你每次用一个提示框，你就得去制作一张单独的内容框（图一），以符合特定的内容。

哎，尼玛，是不是烦了点，如果我想写一个适合于所有内容的提示框呢？

那我们就一起来改善改善它。

还记得大明湖畔的薇薇么，background有个repeat呢。

是不是知道了点撒。

想法：将提示框拆分成上、中、下三个区域，上下区域不变，中间区域拆分成一个片段，高度随内容区域的多少，而自动变换。

尼玛，这到底是什么意思？

见下图：

图四

图五

图六

这样你就可以利用repeat-y实现解决不必为单独的内容制作单独的body框的问题了。

但是，有木有发现，如果我将其拆分成上中下三个区域，高度随内容变大后，会很难看滴。

所以，我将其拆分成左中右三个区域，这样不管内容变多少，宽度随之改变，一样美观的。

图片见下：

图七图八图九

哈哈，好了，拆分后，再组装的思想，就是这样了。最后利用repeat-x就可以实现宽度随内容而变。

下面是实现代码：

<!DOCTYPE html>    <head>        <title>tip2</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>            .tip {                overflow:hidden;            }            .tipHead {                height:77px;                width:16px;                background:url(localizerLeft.gif) no-repeat;<!--图七：头-->                float:left;            }            .tipBody {                height:77px;                width:200px;                background:url(localizerMid.gif) repeat-x;<!--图八：腰-->                float:left;            }            .tipTail {                height:77px;                width:10px;                background:url(localizerRight.gif) no-repeat;<!--图九：尾-->                float:left;            }        </style>    </head>    <body>        <div class="tip">            <div class="tipHead"></div>            <div class="tipBody"></div>            <div class="tipTail"></div>        </div>    </body></html>

运行上述代码，结果如下：

图十

不知道你有没有看上述的代码，建议你看一看，不然讲不下去咯。。。

上述代码看过后，发现有点不爽。

提示框应该会经常用吧，那干嘛不把它封装成一个插件呢！！这样就不必每次用它，都去写一遍或者copy一下，绝对影响效率，心情啊！！！

目前用的jQuery比较多，所以这里就初步讲讲jQuery插件封装咯。

思路：

1、提供相应属性，让操作者可以改变；如果操作者没有改变，使用默认属性。

2、利用提供的属性，绘制出相对应的提示框。

详情见下代码：

(function ($){　　var tip = function( p, ths ){　　var _$ths = $(ths);　　var _$parent = _$ths.parent();　　_$ths = _$ths.detach(); 　　/*　　　　p合并自定义属性,默认包括以下属性设置:　　　　　　width 提示框内容区域的宽度,number　　　　　　content 提示框中的提示内容　　*/　　p = $.extend({<br />　　　　　　width: 200,　　　　　　content:'sample'　　　　}, p);　　/*　　　　Draw:绘制提示框的函数　　　　param: ths --> 提示框this　　*/　　var Draw = function(){　　　　var children = '<div class="tipHead"></div>'　　　　　　　　　　　　+'<div class="tipBody">'+p.content+'</div>'　　　　　　　　　　　　+'<div class="tipTail"></div>';　　　　//将children加入到提示框中　　　　_$ths.append( children );　　　　//动态设置提示框的样式和内容区域的宽度　　　　_$ths.addClass('tip').find('.tipBody').width( p.width );　　　　_$parent.append(_$ths);　　};//End_Draw　　return (function(){　　　　　　Draw();　　　　　　_$parent = null;　　　　　　_$ths = null;　　　　})();　　};　　/*　　　　$.fn.tip:提示框插件，用于提示用户　　　　Param: property --> 自定义提示框的相关信息　　*/　　$.fn.tip = function( property ) {　　　　tip( property, this );        　　};//End_$.fn.timeProcess  <br />})(jQuery);

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

See all articles