我试图找到这样的例子，但没有找到任何（我的坏）。
让我解释一下我需要什么，我正在努力在 div 中显示大型日志文件内容（实时，有数千行）。div 是可滚动的（很明显），现在我添加了过滤器工具，使用的是：http: //johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
当用户搜索文本/正则表达式时，此工具将使用 <span class="highlight"> 包装匹配的文本
现在日志可能有许多匹配的项目，要找到它们，用户必须滚动并搜索所有突出显示的文本，我想要的是在滚动条附近添加一个小地图类型的面板，并带有快速导航标记到这些突出显示的项目。单击此标记时，div 将滚动到相关突出显示的文本。（就像我们在 SVN diff 工具中一样）
我搜索了小地图术语，但我发现的结果与我想要的无关。
如果没有现成的插件可用，任何人都可以建议我自己实现它的最佳方法是什么？
提前致谢
这并不容易，但我总是喜欢挑战。
我选择以滑块的形式实现“小地图”，发现我必须采用：
这是一个完整的工作页面：
<!DOCTYPE html>
<html>
<head>
<!-- fiddle http://jsfiddle.net/8KNZH/2/ -->
<style>
body {
margin: 20px;
}
#logWrapper {
position: relative;
}
#log {
width: 800px;
height: 400px;
overflow: auto;
border: 1px solid #000;
}
#log .highlight {
background-color: #FFFF00;
}
#log .selected {
background-color: #FF9900;
}
#controls {
position: absolute;
left: 810px;
top: 0px;
}
#hSlider {
height: 327px;
margin: 15px 0 15px 15px;
}
</style>
<link rel="stylesheet" href="jquery/jquery-ui-1.9.2.custom/css/le-frog/jquery-ui-1.9.2.custom.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- http://demos.flesler.com/jquery/scrollTo/ -->
<!-- http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js -->
<script type="text/javascript" src="jquery/scrollTo/jquery.scrollTo-1.4.3.1-min.js"></script>
<!-- http://remysharp.com/2009/01/26/element-in-view-event-plugin/ -->
<!-- http://remysharp.com/downloads/jquery.inview.js -->
<script type="text/javascript" src="jquery/inview/inview.js"></script>
<script type='text/javascript'>
$(function(){
var $log = $("#log"),
$hNext = $("#hNext"),
$hPrev = $("#hPrev"),
$hSlider = $("#hSlider"),
$h,
hMax,
tScroll = 300;
function setHighlights() {
return $log.find(".highlight").off('inview').on('inview', function (event, visible) {
var fn = visible ? 'addClass' : 'removeClass';
$(event.target)[fn]('inview');
});
}
function setSelected(h) {
return $h.removeClass('selected').eq(h).addClass('selected');
}
function goTo(h) {
h = Math.max(0, Math.min(hMax, h));//range check
$("#log").scrollTo(setSelected(h).get(0), tScroll);
}
//log scroll
function logScrollHandler() {
$(window).trigger('scroll');//for 'inview' functionality
var h = $h.index($h.filter('.inview').eq(0));
setSelected(h);
$hSlider.trigger('detachHandler')
.slider('option', 'value', hMax - h)
.trigger('attachHandler');
}
$log.on('attachHandler', function() {
$(this).on('scroll', logScrollHandler);
}).on('detachHandler', function() {
$(this).off('scroll');
});
//prev/next
$hNext.add($hPrev).on('click', function() {
var val = $hSlider.slider('value'),
delta = Number($(this).data('delta')),
h = Math.min(hMax, Math.max(0, val - delta));
$hSlider.slider('value', h);
$(window).trigger('scroll');//for 'inview' functionality
return false;
});
//slider
function sliderChangeHandler(event, ui) {
$log.trigger('detachHandler');
goTo(hMax - ui.value);
setTimeout(function() {//setTimeout is slightly messy but there appears to be no other option
$log.trigger('attachHandler');
}, tScroll + 100);
}
$hSlider.slider({
orientation: "vertical",
min: 0,
max: 1,//overridden later
step: 1,
disabled: true
}).on('attachHandler', function() {
$hSlider.slider('option', 'change', sliderChangeHandler);
}).on('detachHandler', function() {
$hSlider.slider('option', 'change', null);
}).trigger('attachHandler');
function setSliderMax(n) {
n = n - 1;
$hSlider.slider("option", {
max: n,
value: n,
disabled: false
});
return n;
}
$h = setHighlights();
hMax = setSliderMax($h.length);
$hPrev.trigger('click');//go to first highlight (optional)
});
</script>
</head>
<body>
<div id="logWrapper">
<div id="log">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non diam sed felis molestie sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum pharetra volutpat libero a <span class="highlight">posuere</span>. Etiam scelerisque lectus id tortor congue et facilisis est consequat. Integer facilisis euismod congue. In luctus, arcu bibendum vulputate mollis, est lacus consequat ligula, ac rutrum felis est vitae velit. Duis ornare molestie semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Ut placerat, eros quis dignissim iaculis, sem dui semper sapien, sit amet ullamcorper purus neque ac ligula. Sed vestibulum cursus lectus, nec consectetur neque tincidunt sed. Vivamus ultricies, est a dictum posuere, justo velit sodales odio, quis semper risus magna id mi. Cum sociis natoque penatibus et magnis dis parturient montes, <span class="highlight">nascetur</span> ridiculus mus. Etiam est risus, iaculis sed ultricies non, iaculis eu sapien. Nam vel lectus at libero porttitor mattis. Suspendisse potenti. Ut et nunc nec eros blandit pretium.</p>
<p>In hac <span class="highlight">habitasse</span> platea dictumst. Etiam scelerisque, mauris in lobortis fringilla, metus dui tincidunt sapien, quis iaculis velit augue a est. Quisque tortor urna, mattis ut vehicula sed, tempor nec dolor. Nulla sit amet tincidunt mauris. In eget nisl erat, eget fermentum justo. Nunc malesuada ultricies pulvinar. Aenean ut lacus ligula, quis egestas turpis. Phasellus placerat, nulla elementum consectetur pulvinar, purus lectus convallis justo, vitae elementum risus turpis et velit. Cras eu felis nec justo semper posuere. Sed rhoncus libero dui. Nunc condimentum laoreet tortor, ut ullamcorper nulla suscipit rhoncus.</p>
<p>Pellentesque varius massa in mi <span class="highlight">sagittis</span> pellentesque. Sed ut odio odio, nec rutrum ipsum. Vestibulum bibendum quam eu nulla lobortis viverra vel vitae tortor. Aliquam non facilisis nunc. Etiam et egestas sapien. Donec a velit erat. Vivamus commodo rhoncus dui, in ultrices nibh convallis quis. Phasellus tempus ultrices augue, at pretium leo tristique sed. Ut sit amet nisl massa. Vivamus consequat tincidunt odio at aliquam. Nunc arcu tortor, semper id elementum ac, porttitor sit amet tellus. Curabitur id ligula sed lacus mattis pellentesque sed vitae ipsum. Donec egestas lacus mauris. Quisque facilisis est non lectus cursus ac ullamcorper mi feugiat.</p>
<p>Suspendisse eu metus felis, eget porta mauris. Maecenas felis nibh, semper in consequat viverra, ornare et enim. In sit amet lectus magna, et pretium velit. Suspendisse ut neque urna. Aliquam ac turpis ligula, ut dignissim eros. Donec nisl mauris, rutrum quis feugiat ac, vehicula ac erat. Quisque vel mi purus. Etiam vitae tellus sit amet erat <span class="highlight">lacinia</span> pharetra. Aenean convallis hendrerit congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam vehicula eleifend tempor. Pellentesque scelerisque blandit cursus.</p>
<p>Donec eget nulla ante, eu faucibus est. In hac habitasse platea dictumst. <span class="highlight">Phasellus</span> sed dictum purus. Sed velit leo, imperdiet sit amet tristique at, consequat interdum diam. Integer euismod tristique ante, eget vehicula libero accumsan nec. Mauris semper convallis metus, quis placerat lacus accumsan iaculis. Integer dignissim vestibulum lacus, id consectetur risus sagittis vitae. Donec semper tortor sit amet justo suscipit at adipiscing leo mollis. Nulla mollis, turpis sed ornare feugiat, sapien nibh pulvinar libero, euismod sodales ipsum orci vitae felis.</p>
<p>Nulla turpis nibh, hendrerit sed faucibus ut, posuere in quam. Sed nec condimentum massa. Quisque viverra mi <span class="highlight">fermentum</span> urna lobortis vitae cursus purus tempus. Donec ut diam vitae diam pharetra porta quis non tellus. Sed tempor tincidunt ultrices. Curabitur eu molestie justo. Maecenas euismod bibendum purus sed lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas non dignissim sem. Donec non mauris non orci pellentesque iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec dui urna, quis tempor felis. In eu odio lectus. Fusce pharetra est et nisi vestibulum ut facilisis risus vulputate. Suspendisse vestibulum porttitor convallis. Maecenas sed aliquet urna. Phasellus facilisis, justo elementum pulvinar placerat, velit risus dictum urna, a molestie ipsum nulla a elit. Mauris malesuada nibh quis mi hendrerit <span class="highlight">cursus</span> eleifend est interdum. Vivamus fringilla venenatis dui, vehicula sollicitudin nisi iaculis eget. Suspendisse sit amet lorem tellus, et hendrerit nisi. Maecenas fermentum porttitor leo id viverra. Morbi et consequat ligula. Maecenas varius porta ante, bibendum ullamcorper tortor mollis nec. Curabitur dapibus purus quis quam pretium sit amet dictum diam euismod. Quisque sit amet risus sed libero rhoncus fermentum quis in nisl.</p>
<p>Phasellus lorem urna, semper eget lacinia ut, tristique ut sem. Ut diam erat, facilisis eget mollis quis, hendrerit nec elit. Sed libero augue, tempus nec suscipit a, pretium quis quam. Cras euismod, lacus commodo sodales dapibus, orci orci semper velit, quis ornare felis risus pellentesque enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis dapibus tortor. Fusce ut nulla <span class="highlight">sem</span>, vitae imperdiet est. Ut eu est a odio vehicula condimentum quis id nisl. Curabitur vitae enim at tellus dictum mattis. Aenean vehicula placerat orci ut placerat. Pellentesque lectus est, blandit ut eleifend varius, luctus eget justo. Proin adipiscing aliquam tellus a ornare.</p>
<p>Nunc ac suscipit ipsum. Praesent porta varius fermentum. Phasellus eleifend nisl sit amet lacus vehicula sed posuere libero molestie. Proin posuere lacinia ullamcorper. Morbi leo lectus, commodo eu tempus in, mattis eget massa. Sed imperdiet, nunc eget imperdiet eleifend, nunc ipsum ultricies velit, at aliquet metus neque nec ipsum. Sed rhoncus pulvinar orci pharetra convallis. <span class="highlight">Donec</span> tristique, ipsum a ultricies sodales, diam leo pretium augue, ut pellentesque sem est a nunc. Sed ornare scelerisque eros, nec iaculis velit tempus non. Ut fringilla vestibulum massa at mattis. Aenean cursus tellus id lacus malesuada ut sagittis nunc egestas. Morbi mauris justo, porttitor sed venenatis vitae, eleifend quis lorem. Quisque non sapien id felis placerat cursus.</p>
<p>Donec eu pellentesque nibh. Sed ac mauris erat, non egestas nulla. Nam eleifend congue rutrum. Aliquam ac sem eros, vitae vulputate dolor. Curabitur libero libero, ullamcorper sit amet suscipit ac, tempus hendrerit urna. Vestibulum at orci tellus. Nulla facilisi. Morbi placerat porttitor velit vitae aliquam. Cras eleifend, <span class="highlight">lectus</span> sed varius mollis, est nunc aliquam augue, eu accumsan leo lorem quis leo. Donec eget sollicitudin lacus. Nulla in iaculis velit. Integer tempus ullamcorper nunc, vitae suscipit neque congue a. Suspendisse molestie tincidunt dignissim. Morbi nec eros nunc.</p>
<p>Quisque ut nisi quis lorem condimentum tincidunt. Suspendisse vitae urna lorem. Vestibulum varius, velit at fringilla posuere, nunc felis condimentum libero, ac dignissim eros dui in risus. Integer est massa, suscipit in sollicitudin at, aliquam congue risus. Fusce pulvinar consectetur massa in pharetra. Sed pretium justo eget leo scelerisque sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vehicula, lacus ac ultricies adipiscing, neque eros faucibus mi, at euismod augue <span class="highlight">leo</span> id lorem. Quisque gravida, lectus sit amet malesuada pharetra, arcu turpis dapibus purus, vel posuere elit libero eget augue. Integer et justo nulla. Sed eu enim in metus venenatis gravida quis non risus. Ut nulla ligula, pretium eu tincidunt vitae, cursus id metus. Praesent porta varius tincidunt. In hac habitasse platea dictumst. Quisque non justo eget turpis scelerisque ullamcorper.</p>
<p>Vestibulum vel nisl sit amet nunc venenatis bibendum. Donec enim sem, ornare non dictum a, mollis sed quam. Aenean faucibus facilisis gravida. Quisque vitae nunc mi, sit amet hendrerit ante. Suspendisse sit amet mi tellus, dictum suscipit leo. Suspendisse molestie convallis odio ac egestas. Sed rutrum mattis sem a porttitor. Fusce adipiscing eros at massa ultricies vel dictum nisi imperdiet. Aenean rhoncus ornare sem, id iaculis <span class="highlight">tellus</span> accumsan vel. Curabitur tellus augue, mollis eget laoreet quis, imperdiet ac elit.</p>
<p>Fusce eleifend libero sed diam consectetur facilisis. Proin feugiat congue odio ac accumsan. Sed viverra urna at libero imperdiet tempor. Pellentesque habitant morbi <span class="highlight">tristique</span> senectus et netus et malesuada fames ac turpis egestas. Proin tempor, libero eleifend ultrices aliquet, orci ante euismod nunc, quis condimentum turpis nisl gravida tellus. In hac habitasse platea dictumst. Phasellus lacus tortor, condimentum nec auctor ut, tincidunt nec lacus. Fusce pulvinar eros et urna laoreet consectetur commodo ut purus. Sed et justo non purus placerat imperdiet. Pellentesque condimentum lobortis magna accumsan faucibus. Fusce porta elementum gravida. Sed ultricies ligula eget turpis sagittis et facilisis lectus adipiscing. Suspendisse luctus eros quis nibh cursus pulvinar. Aenean cursus risus in tortor sollicitudin nec tincidunt mi rutrum.</p>
<p>Integer mollis lorem <span class="highlight">semper</span> neque mattis vestibulum eu et diam. Proin tempus imperdiet hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id rhoncus sem. Sed <span class="highlight">consectetur</span>, purus non hendrerit <span class="highlight">consectetur</span>, est nulla fermentum leo, et ultrices dui turpis sit amet mi. Nullam varius convallis metus, a imperdiet nibh faucibus non. Aenean a diam nibh, at pulvinar sem. Proin consectetur hendrerit augue sit amet pretium. Integer tincidunt sollicitudin augue, id ullamcorper augue condimentum id. Nam hendrerit faucibus <span class="highlight">quam</span> et tempor. Etiam vel justo quis justo luctus adipiscing eget vel tortor. Cum sociis natoque penatibus et magnis dis <span class="highlight">parturient</span> montes, nascetur ridiculus mus. Donec commodo, arcu eu iaculis ultricies, eros sem consectetur magna, ac sodales magna magna quis dui.</p>
<p>Suspendisse viverra felis viverra orci luctus pulvinar. Sed laoreet eros ut risus aliquet blandit. Aenean ac elementum mi. Nam in condimentum enim. Nulla tincidunt consectetur tortor a pellentesque. Aliquam sit amet nunc quis arcu tempor viverra. Vivamus nec odio tortor, eget sollicitudin urna. Sed euismod iaculis libero id consectetur. <span class="highlight">Morbi</span> dolor ante, ultrices non commodo eu, elementum ac sem. In neque odio, commodo ac pharetra ut, consectetur ac ipsum.</p>
<p>Maecenas nec ante vel leo auctor sagittis. Morbi sit amet est nulla, et ullamcorper erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nunc nunc, pulvinar vel volutpat nec, cursus ac tellus. Ut sollicitudin quam a nisi mollis faucibus. Donec accumsan vestibulum nulla lobortis placerat. Nullam eleifend sem quam. Cras venenatis porta odio, a gravida lectus interdum pulvinar. Sed aliquet porta imperdiet. Aliquam erat volutpat. Nam pharetra, lacus sed sagittis rutrum, dolor neque imperdiet turpis, sit amet aliquam nibh nulla sed tellus. Vestibulum facilisis justo at magna pellentesque vulputate eget a mauris. Vestibulum urna ante, suscipit feugiat pulvinar sed, facilisis sed nunc. Nam pulvinar pellentesque mi eu <span class="highlight">ullamcorper</span>.</p>
<p>Duis lorem dui, condimentum at tempus eu, porttitor commodo nisi. Aliquam sit amet purus turpis. Quisque eu risus nulla, sit amet aliquam ante. Integer in dui dui. Ut eget ipsum dolor, a sodales neque. Nullam pretium pharetra urna, id accumsan sem <span class="highlight">dictum</span> eget. Fusce tincidunt mattis fringilla. Quisque condimentum dui non lorem eleifend non laoreet magna malesuada.</p>
<p>Nullam vitae <span class="highlight">mattis</span> leo. Sed eu orci nulla. Vivamus in est id leo auctor bibendum eu et nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nunc sed dui velit, eget mollis ligula. Cras volutpat egestas augue quis elementum. Sed id nulla elit, et feugiat eros.</p>
<p>Curabitur vel dolor vel sem aliquet luctus. Mauris hendrerit iaculis nisl, in placerat lacus dapibus ut. Vivamus sollicitudin luctus orci, at tincidunt mauris vestibulum sit amet. Curabitur dignissim, magna a adipiscing condimentum, <span class="highlight">velit</span> erat rutrum metus, elementum placerat libero nulla et ligula. Aenean in erat tortor, nec interdum ipsum. Curabitur vel turpis ut magna pharetra tincidunt quis et est. Curabitur eu mi odio, id interdum urna. Donec id egestas arcu. Aenean at purus purus.</p>
<p>Nam viverra orci a purus vestibulum condimentum. Duis rutrum neque sit amet nisi lobortis in consectetur enim interdum. Aenean justo felis, consequat eu rhoncus ac, pharetra tincidunt nisl. Pellentesque fringilla venenatis ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec facilisis risus ut purus <span class="highlight">molestie</span> sagittis. Etiam iaculis suscipit justo vitae posuere. Integer et urna enim, a elementum eros. Suspendisse auctor ultricies odio, ac hendrerit magna egestas ut. Nunc ac sodales elit. Sed eget tincidunt elit. Fusce id nulla sapien, sed commodo mauris. Aliquam erat volutpat. Aliquam tempor, turpis a sagittis feugiat, odio justo euismod odio, sit amet sollicitudin nibh nibh et diam. Cras at urna nunc, vulputate dapibus velit.</p>
<p>Morbi vulputate dignissim elit sit amet sollicitudin. Nullam quis risus sapien, eu tempor ipsum. Aliquam ultricies adipiscing dolor, at interdum elit eleifend ut. Quisque feugiat fringilla dolor et faucibus. Quisque viverra placerat metus, sed semper metus pellentesque eu. Praesent sagittis, neque vitae luctus lacinia, lectus dui tincidunt lacus, et <span class="highlight">commodo</span> ligula augue et lorem. Cras sagittis dolor vel diam commodo consequat. Fusce congue purus adipiscing lectus congue auctor. Sed elit ipsum, ultricies vitae malesuada in, faucibus sit amet massa. Curabitur vestibulum mauris vitae turpis laoreet vitae vulputate massa malesuada. Curabitur consequat lacus id massa venenatis ornare. Aenean pellentesque lorem at lacus rhoncus dignissim. Mauris accumsan neque id lorem convallis mattis. Vestibulum eget risus dolor, nec interdum eros.</p>
<p>Quisque fringilla consectetur dapibus. Vivamus pulvinar tortor in diam mattis eu interdum lorem viverra. Vestibulum aliquet tincidunt fermentum. In aliquet ligula ac sem vestibulum sed eleifend nibh dignissim. Sed <span class="highlight">sapien</span> ipsum, porttitor et tincidunt eu, convallis nec velit. Mauris lobortis sapien et leo ornare dictum. Duis pellentesque tincidunt urna, eget tristique turpis laoreet et. Praesent sit amet lacus magna.</p>
<p>Vestibulum porttitor fringilla pulvinar. Mauris sapien nulla, interdum at consectetur sit amet, lobortis quis elit. Morbi non risus sapien, eget pulvinar tellus. In at lacinia nisl. Vivamus vestibulum euismod libero, vel semper lorem tempus accumsan. Curabitur id diam risus. Ut sapien massa, lacinia non ultrices a, ullamcorper non lectus. <span class="highlight">Proin</span> lacinia elit et nisi semper quis pulvinar dolor rutrum. Donec faucibus quam tellus, at fringilla nisl.</p>
<p>Etiam eros massa, vulputate nec viverra ac, varius quis metus. Phasellus ultricies libero ut leo faucibus aliquet. In vel massa eleifend augue interdum tincidunt. Sed tortor diam, commodo in rhoncus in, adipiscing sed odio. Integer sed metus quam, vel dapibus neque. Nam quis dui mi, eu dignissim ante. Proin et tellus placerat libero vestibulum ornare sit amet pellentesque felis. Nunc quis tellus eu magna pharetra sodales at at mauris. <span class="highlight">Pellentesque</span> ornare scelerisque sagittis. Vivamus sit amet metus urna. Nulla fringilla orci sed leo dignissim congue. Vivamus vel tellus leo. Integer vitae odio sit amet nisi ornare placerat a imperdiet dolor. Aliquam sagittis mi non velit sagittis porttitor.
</div>
<div id="controls">
<button id="hPrev" data-delta="-1">Prev</button>
<div id="hSlider"></div>
<button id="hNext" data-delta="1">Next</button>
</div>
</div>
</body>
</html>
要使页面正常工作，您需要安装额外的脚本并相应地调整脚本/样式表路径。
或者，如果你只是想看看它是否正常工作，这里有一个DEMO
我认为适应不同形式的小地图会相当容易。