`
rybby
  • 浏览: 19505 次
  • 性别: Icon_minigender_1
  • 来自: 玉林
最近访客 更多访客>>
tidelee
社区版块
存档分类
最新评论

锐拜：用在 Ajax 流行时！动态消息弹窗之 Dmwindow

AjaxjsonCSS应用服务器网络应用
阅读更多

锐拜：用在 Ajax 流行时！动态消息弹窗之 Dmwindow

作者：Rybby  E-mail：rybby@163.com   完稿时间：2009-07-24

说 起 Ajax（阿贾克斯），很多人都喜欢拿 Google Maps 来说事。那是以前的事，现在，Ajax 还真不算回事。也许，还有些人不知道它；可能，也还有些人不认识它；大概，还有不少人尚未了解它；或者，还有很多人没听说过它。但，确实我们天天都在接触 它，使用它。“不就是阿贾克斯嘛，偶天天都看他们踢球”。有谁会这样说也无可厚非，但锐拜我今天说的不是足球阿贾克斯，而是异步阿贾克斯。异步 Ajax 发展到今天可真不易，作为 web 编程很牛B的技术，在开始时也只有很牛B的网站使用它；可是现在大大小小的并不是很牛B的网站都在使用它，可见牛B的技术并不牛B。相信，只要会上网的人 都有用过百度搜索，在输入关键词时弹出的相关关键词下拉列表框就是 Ajax 的应用。我们并没有单击链接请求服务器，但它确实从服务器返回数据显示给我们，这就是所谓的异步请求。说到异步，肯定会有某个家伙，在某个时候冒出来 说：“既然有异步，那应该也有同步吧！” A ，您怎么就这样聪明呢！这都让您想到了。好，现在来看看同步请求与异步请求的区别。同步请求是指当我们单击一个链接时，网页界面被冻结了，在服务器老练地 处理数据的同时我们也在沉闷地等着它将数据返回给我们，而且整个页面将全部更新。而所谓的异步是指像小偷似的偷偷在背后背着人干着不相干的事，在单击链接 之后页面没有被冻结，我们还可以在页面上执行某些操作，而服务器正在处理数据，然后将一小部分数据返回来，这样的好处是访问速度明显加快了，感觉像使用桌 面程序一样。可以预见，Ajax 将成为未来网络的主流，同时，我们也可预见到某个东西因为某个东西而成为主流的东西，那就是即时消息弹窗。弹窗，终于说到今天的主题弹窗了。好，下面就来 看看如今网络上都流行哪些消息弹窗。

见过 windows 系统下的消息提示框吗？现在咱也来制作这种效果的消息窗口，并命名为 Dmwindow（Dynamic Message Window）。实现的原理与制作方法锐拜只说一下，详细具体的操作步骤限于篇幅在这里估计啰嗦不下，您要是感兴趣的话把源码下载回去研究一下，然后脑袋 思考一下，最后动手修改一下，相信您也能鼓捣出自己喜欢的效果。不要跟我说您看不懂源码，整个程序，该注的，可注的，需注的，锐拜都注了个释，只差没将自 己“住”进去了（笑）。对于尚未接触过 CSS 与 JavaScript 的朋友，等哪年哪月哪日哪时，锐拜有时间有能力有心情有感觉的时候，再写一篇入门教程。OK！啰嗦的言语就此打住，无聊的话题停止放肆，实际的行动现在行 事。go-->

圆角，又是圆角。前辈后辈讨论的话题，专家行家议论的问题，菜鸟老鸟辩论的难题，高手老手陈论的主题，老生小生评论 的课题。关于矩形圆角之实现原理在锐拜的上一篇博文“css实现圆角矩形之函数版”中已经说过了，忘了的朋友请回翻查阅。偷偷地透露一下，实现圆角其实还 有一个很简单的方法，那就是 -moz-border-radius ,相信有朋友已经看出来了，这是 Mozilla Firefox 的专有属性。-moz-border-radius 的使用方法与 margin、padding 相同，如：-moz-border-radius:10px;（四个角弧化） -moz-border-radius:5px（左上角） 5px（右上角） 8px（右下角） 8px（左下角）; 注意，当只使用两个参数时 -moz-border-radius:5px 10px;（左上角与右下角5px,右上角与左下角10px） 这与 margin:5px 10px; 代表上下左右是不一样的。到这里可能又有人会说：“靠！这么方便的属性我怎么就不知道呢！”嘿嘿！锐拜在这里说一句话打击您一下，这个属性只适用于 FF，IE 下是没有效果的。唉！本来想直接进入主题的，结果“费”话还是扯了一箩筐，倘若您的性子急了一点点，或者您的节奏快了一点点，又假如您的技术高超了一点 点，您完全无需在这里听锐拜胡扯，请到后面下载源码自个研究去。很有耐性，很有热情，很有精神的朋友，请竖高您的耳朵，睁大您的眼睛，放松您的思维，悠闲 地，自如地，轻松地继续听锐拜我胡扯。下一节将要讲解怎样用 CSS 实现三角形。

“三角形？！还用 CSS 实现？你就吹吧！”
我不吹，将方法抛出来后自然会有人捧着追，然后参与讨论批评的人肯定一大堆，我要是闪躲起来便是乌龟。
    宽
    宽宽
    宽宽宽
    宽宽宽宽
    宽宽宽宽宽宽
看懂了吗？这就是原理，将十几个高1像素的 DIV 堆叠起来，然后逐渐放大宽度就出来了三角形。下面抛一下源码：

<html>
<head>
<style type="text/css">
.dmw_box {/*min-width:85px; max-*/width:300px; border:0px; text-align:left; position:absolute; clear:both;}
.dmw_ctt {/*min-height:20px; max-height:240px; */padding:0px 10px; line-height:22px; border:solid #3F556F; border-width:0px 1px; background:#CFD0FF; text-align:center; overflow:auto;}
.dmw_tl,.dmw_tr,.dmw_bl,.dmw_br {width:17px; display:inline; position:relative;}
.dmw_tl,.dmw_tr {margin-bottom:-1px; border-bottom:solid 1px #CFD0FF;}
.dmw_bl,.dmw_br {margin-top:-1px; border-top:solid 1px #CFD0FF;}
.dmw_tl,.dmw_bl {float:left; margin-left:20px;}
.dmw_tr,.dmw_br {float:right; margin-right:20px;}
.dmw1,.dmw2,.dmw3,.dmw4,.dmw5,.dmw6,.dmw7,.dmw8,.dmw9,.dmw10,.dmw11,.dmw12,.dmw13,.dmw14,.dmw15,.dmw16 {margin:0px; padding:0px; height:1px; border:solid #3F556F; border-width:0px 1px; overflow:hidden; background:#CFD0FF; clear:both;}
.dmw_top .dmw1,.dmw_bottom .dmw4 {margin:0px 5px; border-width:1px 0px 0px 0px; height:0px;}
.dmw_top .dmw2,.dmw_bottom .dmw3 {margin:0px 3px; border-width:0px 2px;}
.dmw_top .dmw3,.dmw_bottom .dmw2 {margin:0px 2px;}
.dmw_top .dmw4,.dmw_bottom .dmw1 {margin:0px 1px; height:2px;}
.dmw_tl .dmw1,.dmw_tr .dmw1,.dmw_bl .dmw16,.dmw_br .dmw16 {width:0px;}
.dmw_tl .dmw2,.dmw_tr .dmw2,.dmw_bl .dmw15,.dmw_br .dmw15 {width:1px;}
.dmw_tl .dmw3,.dmw_tr .dmw3,.dmw_bl .dmw14,.dmw_br .dmw14 {width:2px;}
.dmw_tl .dmw4,.dmw_tr .dmw4,.dmw_bl .dmw13,.dmw_br .dmw13 {width:3px;}
.dmw_tl .dmw5,.dmw_tr .dmw5,.dmw_bl .dmw12,.dmw_br .dmw12 {width:4px;}
.dmw_tl .dmw6,.dmw_tr .dmw6,.dmw_bl .dmw11 ,.dmw_br .dmw11 {width:5px;}
.dmw_tl .dmw7,.dmw_tr .dmw7,.dmw_bl .dmw10,.dmw_br .dmw10 {width:6px;}
.dmw_tl .dmw8,.dmw_tr .dmw8,.dmw_bl .dmw9,.dmw_br .dmw9 {width:7px;}
.dmw_tl .dmw9,.dmw_tr .dmw9,.dmw_bl .dmw8,.dmw_br .dmw8 {width:8px;}
.dmw_tl .dmw10,.dmw_tr .dmw10,.dmw_bl .dmw7,.dmw_br .dmw7 {width:9px;}
.dmw_tl .dmw11,.dmw_tr .dmw11,.dmw_bl .dmw6,.dmw_br .dmw6 {width:10px;}
.dmw_tl .dmw12,.dmw_tr .dmw12,.dmw_bl .dmw5,.dmw_br .dmw5 {width:11px;}
.dmw_tl .dmw13,.dmw_tr .dmw13,.dmw_bl .dmw4,.dmw_br .dmw4 {width:12px;}
.dmw_tl .dmw14,.dmw_tr .dmw14,.dmw_bl .dmw3,.dmw_br .dmw3 {width:13px;}
.dmw_tl .dmw15,.dmw_tr .dmw15,.dmw_bl .dmw2,.dmw_br .dmw2 {width:14px;}
.dmw_tl .dmw16,.dmw_tr .dmw16,.dmw_bl .dmw1,.dmw_br .dmw1 {width:15px;}
.dmw_tr .dmw1,.dmw_tr .dmw2,.dmw_tr .dmw3,.dmw_tr .dmw4,.dmw_tr .dmw5,.dmw_tr .dmw6,.dmw_tr .dmw7,.dmw_tr .dmw8,.dmw_tr .dmw9,.dmw_tr .dmw10,.dmw_tr .dmw11,.dmw_tr .dmw12,.dmw_tr .dmw13,.dmw_tr .dmw14,.dmw_tr .dmw15,.dmw_tr .dmw16,.dmw_br .dmw1,.dmw_br .dmw2,.dmw_br .dmw3,.dmw_br .dmw4,.dmw_br .dmw5,.dmw_br .dmw6,.dmw_br .dmw7,.dmw_br .dmw8,.dmw_br .dmw9,.dmw_br .dmw10,.dmw_br .dmw11,.dmw_br .dmw12,.dmw_br .dmw13,.dmw_br .dmw14,.dmw_br .dmw15,.dmw_br .dmw16 {float:right;}
<style>
</head>
<body>
<div id="iddmw" class="dmw_box">
  <div id="iddmwtop" class="dmw_tl">
    <div class="dmw1"></div>
    <div class="dmw2"></div>
    <div class="dmw3"></div>
    <div class="dmw4"></div>
    <div class="dmw5"></div>
    <div class="dmw6"></div>
    <div class="dmw7"></div>
    <div class="dmw8"></div>
    <div class="dmw9"></div>
    <div class="dmw10"></div>
    <div class="dmw11"></div>
    <div class="dmw12"></div>
    <div class="dmw13"></div>
    <div class="dmw14"></div>
    <div class="dmw15"></div>
    <div class="dmw16"></div>
  </div>
  <div class="dmw_top">
    <div class="dmw1"></div>
    <div class="dmw2"></div>
    <div class="dmw3"></div>
    <div class="dmw4"></div>
  </div>
  <div id="iddmwctt" class="dmw_ctt">
    这个盒子是存放内容的
  </div>
  <div class="dmw_bottom">
    <div class="dmw1"></div>
    <div class="dmw2"></div>
    <div class="dmw3"></div>
    <div class="dmw4"></div>
  </div>
  <div id="iddmwbtm" class="dmw_bl">
    <div class="dmw1"></div>
    <div class="dmw2"></div>
    <div class="dmw3"></div>
    <div class="dmw4"></div>
    <div class="dmw5"></div>
    <div class="dmw6"></div>
    <div class="dmw7"></div>
    <div class="dmw8"></div>
    <div class="dmw9"></div>
    <div class="dmw10"></div>
    <div class="dmw11"></div>
    <div class="dmw12"></div>
    <div class="dmw13"></div>
    <div class="dmw14"></div>
    <div class="dmw15"></div>
    <div class="dmw16"></div>
  </div>
</div>
</body>
</html>

当然，上面的代码是用程序代替手工输入的，要不然您以为 JS 是当宠物一样观赏的吗？相信眼睛睁得大大的朋友已经看到（耳朵竖得高高的不知听不听得到），有四个类别选择器名 称：.dmw_tl,.dmw_tr,.dmw_bl,.dmw_br 。这是为对象布局的不同位置而设置的，比如有四个文本框，分别为tl，tr，bl，br；它们分布在页面的左上角，右上角，左下角，右下角；当鼠标移上去 时就弹出相关的提示消息，如移到左上角的文本框时就应该显示三角形指向左上角的消息窗口，而其它的 tr，bl，br 应该将之隐藏。于是为 tr，bl，br 添加 display:none; tl 设置 display:; 空值。这样我们就可以为页面中不同位置的对象分配不同的消息提示窗，还有一个需要解决的问题就是消息窗显示的位置。可以用 offsetTop 与 offsetLeft 来获取当前对象的顶、左坐标赋给消息窗口即可，限于篇幅就不在这里抛出源码啦，请自行下载查阅。现在我们来看看效果：

效果还不赖吧？下面讲如何发送 Ajax 请求。什么是 Ajax ？Ajax 就是阿假可死，它不会是阿甲可活。等一下我还要说 Json ，那您可又要问什么是 Json 了，是呀！什么是 Json ？锐拜我也不知道呢。我只知道 Json 是用来干什么的，如何使用，这就够了。这就好比您问我什么是汽车？我也不知道什么是汽车，我只知道有四个轮子的会跑的并且烟囱会冒气的就叫汽车，这也难怪 没有烟囱不会冒气并且用电能驱动的所谓的电动车不能被人称之为汽车的缘故了。我也只知道汽车是用来载东西的，这就够了，没有必要搞得那样复杂。您要是去问 十个司机汽车是如何制造的，肯定有十一个不知道的。“啊！11个？怎么会有11个？”怎么就没有11个，10个司机加您一个不就11个了。可见，问题刨起 根来可是没完没了的。的确，敏而好学，不耻下问的求学精神是好的，但将问题弄得太复杂太深奥可就不好了。话题转回 Ajax ，咱接着说。下面看一下如何发送 Ajax 请求，也就是传说中的异步请求。

<script type="text/javascript">
request = new XMLHttpRequest();//创建 XMLHttpRequest 对象。
request.open("GET","dmwmsg.txt",true);//打开请求
request.onreadystatechange = function() {//当请求状态改变时要执行的指令
document.getElementById("dmw_ctt").innerHTML = request.responseText;
//将请求返回的数据（dmwmsg.txt 中的内容）写进消息窗口中
}
request.send(null);//发送请求
<script>
/*然后在同目录下建一个文本文档 dmwmsg.txt ，用于存放提示消息，注意保存时选择编码 utf-8 ，您要是乱来的话显示中文时可是会乱码的。
上面只是简单的代码，用于说明原理的，实际应用中要稍微复杂一点点，您要想知道方法请自个去研究源码*/

Ajax 说完了，现在说 Json 。上面的异步请求（不得已，还得接着说 Ajax）目标是 dmwmsg.txt ，就是存放消息的文本，那么当有多个不同的消息时应该如何处理呢？写进同一个文本中它们岂不是一起显示出来！解决的办法是用 Json 。上面锐拜已经说过了，我只知道 Json 是用来干什么的，如何使用，所以请不要问我什么是 Json ？“那这个杰什么深是用来干什么的呀？”“它是用来存放数据的。”我这样说您应该想到它和文本文档一样只是一种数据载体。说到数据载体，应该又会有哪个家 伙跳出来将 xml 搬出来说事，在锐拜看来，xml 它什么都不是，徒有虚名而已。关于 xml ，有人说它灵活，我看它是零活！所有数据都是零零碎碎地一块一块存放；有人说它简洁，我看它太不节俭！所有标记必须成对出现，开始标记有多长结尾标记就得 有多长；也有人说它方便，我看它是善变！格式太严格，只要某个标记有点异常就报错；还有人说它快速，我用它累得快死！包容数据的标记一大堆，我们编辑它所 费的气力一大吨，服务器解析它生成它所耗的时间一大段，如此占空间费气力耗时间的东西，试问，它快在哪里？速在何处？相反，我们使用它累得死快一点倒是真 的。Json 的数据格式，这样的：{"objid":"idtxt1", "objmsg":"这是第一个文本框！"}，花括号表示的是一个对象，怎样读取数据？简单呢：
var backdata = {"objid":"idtxt1", "objmsg":"这是第一个文本框！"};
alert(backdata.objmsg);
于是就弹出了 objmsg字段 的值“这是第一个文本框！”。
当有多个对象时就用数组表示，
[
{"objid":"idtxt1", "objmsg":"这是第一个文本框！"},
{"objid":"idtxt2", "objmsg":"这是第二个文本框！"},
{"objid":"idtxt3", "objmsg":"这是第三个文本框！"},
{"objid":"idtxt4", "objmsg":"这是第四个文本框！"}
];
数组用方括号来表示，读数据：
var backdata = [
{"objid":"idtxt1", "objmsg":"这是第一个文本框！"},
{"objid":"idtxt2", "objmsg":"这是第二个文本框！"},
{"objid":"idtxt3", "objmsg":"这是第三个文本框！"},
{"objid":"idtxt4", "objmsg":"这是第四个文本框！"}
];
alert(backdata[0].objmsg);
于是就弹出了第一个对象 objmsg字段 的值“这是第一个文本框！”。
假如要取第三个文本框的提示消息，如此这番：
for (var i=0;i<backdata.length;i++) {
if (backdata[i].objid == "idtxt3") {
alert(backdata[i].objmsg);
}
}
基 本格式：字段与值用引号包含，用冒号表示它们的父子关系，当字段的值是数字、布尔值、对象或数组时不需要引号，如："objid":8, "objid":false, "objmsg":{"objmsg1":"消息的第一条消息。", "objmsg2":"消息的第二条消息。"}；字段之间用逗号分隔，逗号前后的空格不限；对象用花括号表示，当它成为数组的一个元素时，元素之间用逗号 分隔，对象内的字段数量不限；数组用方括号表示，数组的元素数量不限。
这就是 Json ，很简单，很明了，很实用，很强大。

关于 Ajax 与 Json 的使用方法锐拜我已经讲得很仔细了，不，应该是简单地讲了，大家复杂地懂了。到这里，动态消息弹窗已经讲完了，确切地说是限于篇幅只能讲到这 里，Dmwindow 精彩的还在后头。如果我们仅仅需要当鼠标移到某某身上时显个框框，提个醒醒，通个信信等诸如此类的小儿科，用 Ajax 就有点小题大作了，我们只需为某某添加 title 属性就可以，如 title="这里是提示消息。" 只不过当一个页面有十几个甚至是几十个地方需要提示消息时就显得太麻烦了。若我们用 Ajax 的话，只需在一个叫做的 Josn 的家伙里面为所有的 ID 设置各自的提示消息即可。但 Ajax 的强大远不止这些，下面看看 Ajax 最适合用在哪些地方。经常地，我们要在某某网站注册一个名为某某某的会员，然后修改基本资料，里面有很多下拉列表框，像什么省呀市呀年呀月呀日呀学呀历呀 职呀业呀……总之就是呀不完的一大堆。这些对于访客来说当然没什么可说的呀，但对于服务器来说可就太痛苦了。从客户端请求一个页面开始，就得一次性地将这 些鸭什么鸭之类的全部载过去，而且还像哑巴似的文雅得不敢吭吧一声，可怜哪！倘若我们用 Ajax ，当鼠标移上去时再将它里面的什么鸭“宰”过去再显示过来，那简直就快如闪电，可能比光速还快（好像夸张了一点的说）。甚至，我们还设计一个智能化的东东 来高超一下，比如我要输入“广东省”，现在只要输入字母“G”，然后就只剩下“广东省”和“广西省”这两条选择了，将那些什么广北省广南省之类的全都抹了 去；再比如，我要选择8X年代的年代，现在只需输入一个“8”，然后只剩下 80-89 或者有“8”的年份，让那些没有“疤”的XX年代都见鬼去罢。够高超了罢！“那这个高超的、牛逼的、方便的、实用的、强大的……暂且不管它什么的，这个东 东如何实现？”嘿嘿，我不说。您自个看，在源码有。Ajax 的出现，让我们有机会、有条件、有选择，郑重地、尊重地、沉重地，对列表框说：“ByeBye！见鬼去罢你！”当然，我们还无法让文本框去见鬼，虽然我们 可以肯定不会有某个家伙从甲骨文时代追奔过来注册一个会员，但我们不敢肯定不会有哪个家伙坐时空机从未来飞奔过来注册会员，如果将XX年代到XX年代的年 代一次性地写进数据库，那是不可能的，不现实的，不理想的。那就只好让他们自个输入自个的出生年代的年代了。
本来呢，都是要说完了的，结果“费”话还是啰嗦出来两大箩筐，是否已经有人觉得锐拜我是婆婆大学啰嗦系毕业的？嘿嘿！俺是家庭大学物理（屋里）系毕业的，读的是伽里顿（家里蹲）学校。

尾声。倘若，您觉得本文给您幽了一默，那锐拜可就抹了一忧。如果，您觉得本文让您爆了一笑，那锐拜可要偷偷提醒您， 请小心抱好您的肚皮，万一笑破了，锐拜可不负责。假如，您觉得本文糟蹋了您的宝贵时间，那锐拜可就太对您不住了，请将它从您的眼中拔了罢，如还不解气，请 把电脑屏幕给砸了。

锐拜我开发此程序的目的在于经验分享与技术交流！若您有任何意见或者建议请 E-mail：rybby@163.com 联系锐拜。
程序名称：Dmindow（动态消息窗口）
目前版本：v1.0
程序编辑：Rybby
下载地址：http://rybby.blog.hexun.com/35381241_d.html
程序交流讨论地址：http://rybby.blog.hexun.com/35383349_d.html

转载需知！如需转载本文，请在标题前加上“[转载]”，并在文章开头或结尾加上本文链接地址，谢谢！
生活因分享而快乐！欢迎转载。

分享到：
| 锐拜：CSS实现圆角矩形之函数版
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics