Генерация кнопок в панели навигации для каждого существующего якоря
Всем привет! Помогите пожалуйста, если не решением, то хоть советом или литературой.
Как сделать так, чтоб кнопки в панели навигации создавались автоматически для каждого имеющегося на странице якоря? Якоря создаются сейчас автоматом для каждого тега <p>: http://jsfiddle.net/malefikus13/hwmj2m2o/ Заранее спасибо! |
malefikus13,
ваш макет непонятен, где якоря и что есть панель навигации и кнопка, её функции? |
Цитата:
Якоря присваиваются в таблице, к каждому тегу <p>, что находится в <td>'шке. Т.е. имеется некая страница, с n'ым кол-вом таких вот тегов <p>. В боевом варианте, их количество всегда разное. Сейчас на каждый такой тег, вешается якорь. <section class="zagol" id="link_1(на каждый последующий якорь цифра в этом поле увеличивается на один.)"></section> Имеется панелька, в правом верхнем углу. Мне необходимо, чтоб исходя из кол-ва сгенерированных <p> внутри таблицы, генерировалось такое же кол-во кнопок. Т.е. на каждый якорь по своей кнопке. Чтоб была возможность при клике по ним, переходить на нужный тег <p>. :) |
Генератор панели навигации
malefikus13,
курсор вправо вверх и нажать на любой заголовок в выпавшем меню, остальное добавить по вкусу.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Панель навигации по заголовкам в таблице - jsFiddle demo by malefikus13</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<style type='text/css'>
.box-crew{height:50px;position:fixed;right:0;top:0;width:430px}
.box-crew #slide_mnu_ul{margin:0;padding:0;position:absolute;text-align:center;top:-100px;transition-duration:0.6s;width:100%;border-radius:6px;background:#6A5ACD}
.box-crew:hover #slide_mnu_ul{top:0}
li{list-style:none;color:#FFF;cursor:pointer}
.link_group_header p{height:500px;background:#FFE4B5}
</style>
<script>
(function($) {
$.fn.scrollTo = function(speed, easing, callback) {
$("body,html").animate({
scrollTop: this.offset().top
}, speed, easing, callback);
return this
}
})(jQuery);
$(function() {
var p = $(".link_group_header p");
if (p.length) {
var div = $("<div/>", {
"class": "box-crew"
}).appendTo("#object_data_body");
var ul = $("<ul/>", {
"id": "slide_mnu_ul"
}).appendTo(div);
p.each(function(index, el) {
var li = $("<li/>", {
text: $(el).text(),
click: function() {
$(el).scrollTo(500)
}
}).appendTo(ul)
})
}
});
</script>
</head>
<body>
<div id="object_data_body">
<table>
<tr class="link_group_header"><td colspan="3"><p>Заголовок 1</p></td></tr>
<tr class="link_group_header"><td colspan="2"><p>Заголовок 2</p></td></tr>
<tr class="link_group_header"><td colspan="2"><p>Заголовок 3</p></td></tr>
<tr class="link_group_header"><td colspan="2"><p>Заголовок 4</p></td></tr>
</table>
</div>
</body>
</html>
|
Цитата:
|
Цитата:
|
malefikus13,
строка 34
html : $("<img/>", {"class" : "me", "src" : "http://javascript.ru/forum/images/smilies/smile.gif"})
или просто html : "всякая html только кавычки одинарные" или в тегах p <p data-title="всяка разна">Заголовок 1</p>тогда
html : $(el).data("title")
или html : "Секция " + ++index |
Цитата:
|
| Часовой пояс GMT +3, время: 05:21. |