介绍
在web应用的很多场合，需要让浮动窗口跟随鼠标而动。比如这儿举的一个例子：当用户选中网页上一段内容时，弹出工具条让用户进行标记。可以想象一下，有一个在线看书的应用，支持读者在阅读的时候随时做笔记。当读者选中一段文字时，弹出一个小工具条，让用户保存成笔记标题或笔记内容。在这种场景下，让小工具条出现在选中文字的旁边是必要的用户体验。在实际应用场合，还必须确保在不同的浏览器中、当文字内容有滚动条时，小工具条的位置都不错。
下面就来看看如何实现这种效果（代码已经在Firefox 17.0.9，Chrome 30.0.1599.101，IE 10下面测过）。
首先用Dojo widget（Dojo 1.7.3）搭建一个网页框架。在主模块中放入文字内容。接下来要做的就是创建一个浮动窗口，让它在用户选中一段文字内容的时候出现。
代码实现
test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import "../js/dijit/themes/tundra/tundra.css";
@import "../css/main.css";
</style>
</head>
<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
style="width: 100%; height: 100%; margin: 0px; padding: 0px; ">
<div data-dojo-type="dojox.layout.ContentPane"
data-dojo-props="region:'top'"
style="height:38px;width:100%;background-color: black; color: white;font-family: arial;font-size: 28px;">
在线阅读器
</div>
<div data-dojo-type="dojox.layout.ContentPane"
data-dojo-props="region:'center', splitter: true"
style="width: 100%; height: 100%; border: none; padding: 0px; background-color: #ffffff;">
<div style="width: 99%; margin: -3px 0px -2px 2px;">
<button id="open_model_btn" data-dojo-type="dijit.form.Button"
class="menu_button" type="button">打开文章</button>
</div>
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true"
style="width: 100%; height: 300px;">
<div data-dojo-type="dojox.layout.ContentPane" data-dojo-props="splitter:true,region:'left'"
style="width: 300px;">
<div style="background-color: lightgray;">笔记列表</div>
</div>
<div data-dojo-type="dojox.layout.ContentPane" style="font-size: 16px;"
data-dojo-props="splitter:true,region:'center'">
<div id="resource_text_container">
<div>阅读 reading</div>
<div>1、从书面材料中获取信息的过程。书面材料主要是文字，也包括符号、公式、图表等。首先是把文字符号变成声音，后达到对书面材料的理解。阅读是一种主动的过程，是由阅读者根据不同的目的加以调节控制的。</div>
<div>2、朗读是一种阅读方式。朗读是指出声诵读，默读则指没有明显发声的诵读。在某些情况下，如诗词欣赏。朗读有特殊功用，可高度集中注意力，但就从书面材料中获取知识而言，默读更为重要，理解文字材料主要靠默读。阅读时的眼动是一系列的跳动，跳动本身历时很短，而且不能产生对文字的清晰视觉。对文字的清晰视觉都是在注视时得到的。</div>
<div>3、影响阅读理解的外部因素包括文字材料和情境的物理特点，如照明条件，文字的字体、型号等；文字材料的易读度，如字词的常用程度
，句子的长短与结构的繁简
，命题密度（即在一定长度的材料中出现的概念数）等；材料的概括与抽象的程度；由外部确定的阅读目的等等。影响阅读理解的内部因素主要是阅读者的知识基础。此外，阅读者的注意、记忆和思维也都是重要的内部因素。</div>
<div>阅读可以分成四种情况。第一种是信息式阅读法。这类阅读的目的只是为了了解情况。我们阅读报纸、广告、说明书等属于这种阅读方法。对于大多数这类资料，读者应该使用一目十行的速读法，眼睛象电子扫描一样地在文字间快速浏览，及时捕捉自己所需的内容，舍弃无关的部分。任何人想及时了解当前形势或者研究某一段历史，速读法是不可少的，然而，是否需要中断、精读或停顿下来稍加思考，视所读的材料而定。</div>
<div>第二种是文学作品阅读法。文学作品除了内容之外，还有修辞和韵律上的意义。因此阅读时应该非常缓慢，自己能听到其中每一个词的声音，嘴唇没动，是因为偷懒。例如读“压力”这个词时，喉部肌肉应同时运动。阅读诗词更要注意听到声音，即使是一行诗中漏掉了一个音节，照样也能听得出来。阅读散文要注意它的韵律，聆听词句前后的声音，还需要从隐喻或词与词之间的组合中获取自己的感知。文学家的作品，唯有充分运用这种接受语言的能力，才能汲取他们的聪明才智、想象能力和写作技巧。这种依赖耳听—一通过眼睛接受文字信号，将它们转译成声音，到达喉咙，然后加以理解的阅读方法，最终同我们的臆想能力相关。</div>
<div>第三种是经典著作阅读法，这种方法用来阅读哲学、经济、军事和古典著作。阅读这些著作要象读文学作品一样的慢，但读者的眼睛经常离开书本，对书中的一字一句都细加思索，捕捉作者的真正的用意。从而理解其中的深奥的哲理。值得注意的是，如果用经典著作阅读法阅读文学作品，往往容易忽略文学作品的特色，以
使读者自己钻进所谓文学观念史的牛角尖中去。</div>
<div>第四种阅读方法是麻醉性的阅读法。这种阅读只是为了消遣。如同服用麻醉品那样使读者忘却了自己的存在，飘飘然于无限的幻想之中。这类读者一般对自己的经历和感受不感兴趣，把自己完全置身于书本之外。如果使用麻醉性的阅读方法阅读名著，读者只能得到一些已经添加了自己的幻想的肤浅的情节，使不朽的名著下降到鸳鸯蝴蝶派作家的庸俗作品的水平。如果漫不经心地阅读《安娜•卡列尼娜》，犹如读一本拙劣的三角恋爱小说。麻醉性的阅读在将进入成年的时候达到顶峰。年轻人的麻醉阅读是造成大量的文学作品质量低劣的原因。</div>
</div>
<div id="resource_text_floating_pane"
style="border: 1px solid #BBBBBB;position: absolute;width: 85px;z-index: 10;display:none;">
<div data-dojo-type="dijit.Toolbar" style="padding: 3px 0 0 3px;">
<div id="add_paragraph" data-dojo-type="dijit.form.Button" data-dojo-props="showLabel:true">
段落
</div>
<div id="add_content" data-dojo-type="dijit.form.Button" data-dojo-props="showLabel:true">
内容
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
dojoConfig = {
isDebug : false,
parseOnLoad : true,
async : true
};
</script>
<script type="text/javascript" src="../js/dojo/dojo.js"></script>
<script>
require([ "dojo/parser", "dijit/form/Button", "dijit/Toolbar",
"dijit/layout/BorderContainer", "dojox/layout/ContentPane"]);
</script>
<script>
require(
[ "dojo/ready",
"dijit/registry",
"dojo/dom",
"dojo/on"
],
function(ready, registry, dom, on) {
ready(function() {
var resource_text_container = dom.byId("resource_text_container");
on(resource_text_container, "mouseup", function(e){
//拿到鼠标位置
var selection = document.getSelection();
var start = selection.anchorOffset;
var end = selection.focusOffset;
var fp = dom.byId("resource_text_floating_pane");
if(start-end != 0){
//根据鼠标位置，计算浮动窗口的位置
if(dojo.isChrome != undefined){//Chrome
var cx = e.layerX;
var cy = resource_text_container.parentElement.scrollTop + e.layerY;
}else if(dojo.isIE != undefined){//IE
var cx = e.layerX - resource_text_container.parentElement.offsetLeft;
var cy = resource_text_container.parentElement.scrollTop + e.layerY;
}else {//Firefox
var cx = e.layerX;
var cy = e.layerY;
}
fp.style.left = (cx + 0) + "px";
fp.style.top = (cy + 0) + "px";
fp.style.display = "block";
}else{
fp.style.display = "none";
}
});
on(registry.byId("add_paragraph"), "click", function(e){
alert("新建段落");
});
on(registry.byId("add_content"), "click", function(e){
alert("新建内容");
});
});
});
</script>
</body>
</html>总结
在确定浮动窗口位置时，我们主要使用了鼠标事件的layerX和layerY属性。关于Event对象与定位相关的属性，和浏览器的版本密切相关。想支持其他版本的，可以参考这篇文章。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
