Форум

malefikus13 · #1 (**permalink**) 12.10.2015, 09:55

Всем привет! Помогите пожалуйста, если не решением, то хоть советом или литературой.

Как сделать так, чтоб кнопки в панели навигации создавались автоматически для каждого имеющегося на странице якоря?

Якоря создаются сейчас автоматом для каждого тега <p>:

http://jsfiddle.net/malefikus13/hwmj2m2o/

Заранее спасибо!

рони · #2 (**permalink**) 12.10.2015, 10:41

malefikus13,
ваш макет непонятен, где якоря и что есть панель навигации и кнопка, её функции?

malefikus13 · #3 (**permalink**) 12.10.2015, 11:17

Сообщение от рони

malefikus13,
ваш макет непонятен, где якоря и что есть панель навигации и кнопка, её функции?

панель навигации появляется при наведении курсора в правом верхнем углу. Сейчас там всего одна кнопка.
Якоря присваиваются в таблице, к каждому тегу <p>, что находится в <td>'шке. Т.е. имеется некая страница, с n'ым кол-вом таких вот тегов <p>. В боевом варианте, их количество всегда разное. Сейчас на каждый такой тег, вешается якорь.

<section class="zagol" id="link_1(на каждый последующий якорь цифра в этом поле увеличивается на один.)"></section>

Имеется панелька, в правом верхнем углу. Мне необходимо, чтоб исходя из кол-ва сгенерированных <p> внутри таблицы, генерировалось такое же кол-во кнопок. Т.е. на каждый якорь по своей кнопке. Чтоб была возможность при клике по ним, переходить на нужный тег <p>.

рони · #4 (**permalink**) 12.10.2015, 12:28

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 · #5 (**permalink**) 12.10.2015, 13:23

Цитата:

курсор вправо вверх и нажать на любой заголовок в выпавшем меню, остальное добавить по вкусу.

Вооооо - то что нужно! Спасибо большое!

malefikus13 · #6 (**permalink**) 12.10.2015, 13:32

Цитата:

курсор вправо вверх и нажать на любой заголовок в выпавшем меню, остальное добавить по вкусу.

а не подскажите еще такой момент, как мне в панельке вместо текста вставить простые картинки в виде точек, или чего либо еще? Сейчас они полностью дублируют содержание заголовка. Заранее огромнейшее спасибо!

рони · #7 (**permalink**) 12.10.2015, 13:52

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

malefikus13 · #8 (**permalink**) 12.10.2015, 13:54

Сообщение от рони

malefikus13,
строка 34

html : $("<img/>", {"class" : "me", "src" : "http://javascript.ru/forum/images/smilies/smile.gif"})

или просто

html : "всякая html только кавычки одинарные"

Спасибо огромное!

Форум

Справочник

Discord чат

Курсы javascript