论坛首页 Web前端技术论坛

BeautyTips异步获取tooltip内容

浏览 2952 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-08-11  

话说上个月客户提出需求,希望输入铃音编号时能够即时返回该编号对应的详细信息。顺带要求两条:一是页面无刷新、二是要显示在气球提示框里。接到case之后,本着能不改就不改、能少改就少改的原则,跟人家解释说:首先,这个tooltip(甲方:说中文。偶:就是您提到的气球提示框)一般来说是光标悬停在某个控件上才会显示的;其次,每次按键都会发送新的请求,会对服务器造成很大压力滴。。。

 

挂上电话,我在google中敲入关键字jquery tootip,耳边回荡着你的声音——“需求不变,周五之前完成”,按下回车:恩,jquery的插件果然怒多,试了几个,果然不出我之所料,只支持mousehover事件,而且可配置性不高。最后,我找到了BeautyTips(以下简称bt)。

 

根据BeautyTips项目主页 上的介绍:该插件高度可配置,并能被多种事件所触发。在线Demo 很有诚意,22个例子外加源码和讲解,基本涵盖了所有的功能。

 

回到本文的主题,对实际项目进行抽象后,我写了一个小demo,与官方demo 12 中的异步获取静态页面不同,我这里接收server生成的动态页面。

 

IDE我用的是netbeans 6.7,对jquery(应该说是所有的js类库)的支持相当好。将附件中的beautytips_demo.zip 解压后,netbeans打开该项目,按F6键运行,在“铃音编号”中随便输入点东西,弹出提示框,如图:


除了页面中引入的js文件外,项目中就两个jsp而已。一个index.jsp就是前台页面啦,再一个data.jsp生成并提供前台异步获取所需的动态内容。我们先来看index.jsp的核心部分:

$(document).ready(function () {
    jQuery.bt.defaults.ajaxCache = false;
    $("#ringindex").bt({
        ajaxPath: "${pageContext.request.contextPath}/data.jsp",
        trigger: ["keypress", "blur"],
        spikeLength: 40,
        spikeGirth: 40,
        cornerRadius: 40,
        fill: "rgba(0, 0, 0, .8)",
        strokeWidth: 3,
        strokeStyle: "#CC0",
        cssStyles: {color: "#FFF", fontWeight: "bold"}
    })
 });
  • 第2行的jQuery.bt.defaults.ajaxCache是一个预设的全局变量,默认值是true,在这里为了避免ajax请求同一个url时从缓存中取值,我们把它置为false。从这一点可以看出bt作者还是很体贴的,有了这个参数我们就不用在url后面挂上一堆随机数了。需要指出的是,像ajaxCache这样全局变量的详细列表,都可以在jquery.bt.js(不要去看无注释压缩版的jquery.bt.min.js阿)文件的结尾部分查到。
  • 第4行的ajaxPath所对应的data.jsp就是我们之前提到的数据源。
  • 第5行的trigger表示keypress事件使tooltip显示,blur事件使其隐藏。
  • 第6-12行定义tooltip的外观,从官方demo 6抄过来的。

下面我们来看看data.jsp的源码:

<%
            Object[][] data = new Object [][] {
                { "630565", "相识非偶然", "谭咏麟", 200 },
                { "630566", "上街", "蔡依林", 200 },
                { "630567", "芥末不辣", "江美琪", 200 },
                { "630568", "没道理", "刘若英", 200 },
                { "630569", "一生所爱", "徐小凤", 200 },
                { "630571", "风的季节", "黎瑞恩", 200 },
                { "630572", "风中有朵雨做的云", "孟庭苇", 200 },
                { "630573", "秋天以后的故事", "侯湘婷", 200 },
                { "630575", "带我去寻找", "王啸坤", 200 },
                { "630576", "齐齐唱首歌", "许冠杰", 200 },
                { "630578", "明天话今天", "叶丽仪", 200 },
                { "630579", "迫我绝情", "张学友", 200 },
                { "630580", "走不掉", "张学友", 200 },
                { "630581", "旧情绵绵", "张学友", 200 },
                { "630582", "珍重", "谭咏麟", 200 },
                { "630583", "天使之恋", "黄莺莺", 200 },
                { "630585", "瞬间移动", "方力申", 200 },
                { "630586", "抵抗夜寒", "张学友", 200 },
                { "630587", "不像个大人", "张惠妹", 200 },
                { "630588", "解药", "陈奕迅", 200 }
            };
            java.util.Random random = new java.util.Random();
            int index = random.nextInt(data.length);
            StringBuffer result = new StringBuffer("<div id=\"content\">");
            result.append("<h4>铃音编号:");
            result.append(data[index][0]);
            result.append("</h4><hr/><ul><li>铃音: ");
            result.append(data[index][1]);
            result.append("</li><li>歌手: ");
            result.append(data[index][2]);
            result.append("</li><li>价格: ");
            result.append(data[index][3]);
            result.append("</li></ul>");
            result.append("</div>");
            response.reset();
            response.setContentType("text/html;charset=UTF-8");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write(result.toString());
%>
 

赫赫,大家都看出来了,我这个数据源完全是糊弄事儿,根本就无视来自客户端的输入,先定义了一堆Object二维数组,然后随机取一个向量中的各个字段,拼出一个div来写响应,这个div就是tooltip中要显示的内容,既包含了数据、也有结构、还有样式。根据bt作者的说法,严格的讲,这里使用的技术不是AJAX,而是AHAH(Asynchronous HTML and HTTP )。也有用户给作者留言,要求提供AJAX方式以方便使用handler,但被婉拒。

 

 

 

  • 大小: 14.8 KB
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics