Как заправить HTML для использования с аккордеонным эффектом JS? - PullRequest
Новая
       13

Как заправить HTML для использования с аккордеонным эффектом JS?

0 голосов
/ 13 ноября 2009

У меня есть веб-сайт с хорошо структурированными страницами, например. <h1> для имени веб-сайта, <h2> для имени страницы и <h3> для различных разделов на странице.

Во всяком случае, я хотел настроить кучу действительно длинных страниц (например, страницу часто задаваемых вопросов) с эффектом «аккордеона», с элементами <h3>, являющимися переключателем, и содержимым, непосредственно следующим за переключением. Но свертываемый контент должен быть в своем собственном <div class="draw"> (или подобном), и это не то, как контент настраивается в настоящее время. Я надеялся, что это возможно, не затрагивая существующий HTML и просто как-то изменив DOM с помощью JS (с помощью jQuery?).

Я подумал, что, возможно, упаковка содержимого между элементами <h3> в классифицированном <div> может сработать, но я не знаю, как это сделать. Помощь

Ответы [ 5 ]

0 голосов
/ 13 ноября 2009

У Дэйва Уорда из Encosia есть отличное 10-минутное руководство по jQuery, Firebug и селекторам , которое создает именно то, что вы ищете.

0 голосов
/ 13 ноября 2009

Полагаю, это выглядит так: 

<html>
    <h1>site name</h1>
    <h2>page name</h2>
    <h3>section</h3>
    <p>some stuff</p>
    <p>different paragraph</p>
    <ul><li>a list</li></ul>
    <h3>next section</h3>
    <p>different stuff</p>
    ...
</html>

Вы можете перебрать все прямые потомки html. На первом h3 вы начинаете собирать все последующие предметы до следующего h3. если наступает следующий h3 или конец страницы, вы создаете div и добавляете его после начального h3, все собранные элементы должны быть удалены из их родителя (html) и добавлены как потомки div.

глядя на http://docs.jquery.com/Traversing это должно быть легко. Я не эксперт по jquery, но это должно быть выполнимо.

0 голосов
/ 13 ноября 2009

Вот один из способов сделать это, не полагаясь на проходимые элементы DOM между тегами h3. Я не уверен, насколько эффективно выгружать все содержимое тега body, как это, при каждой загрузке ... 

$(document).ready(function(){
    var content = $('body').html();
    content = content.replace(/(<\/h3>)((.|\n|\r)*?)(<h\d>|$)/gi, "$1<div class=\"draw\">$2</div>$4");
    $('body').html(content);
});

Я проверил это на контенте, отформатированном так: 

<body>
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content

<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
...
</body>
0 голосов
/ 13 ноября 2009

Если вы готовы рассмотреть альтернативы, отличные от JS, у Stu Nicholls есть несколько интересных вариантов html / css (без js) на его CSS Play сайте:

  1. http://www.cssplay.co.uk/menu/gallery3l
  2. http://www.cssplay.co.uk/menus/tabmenu.html

(среди прочих)

0 голосов
/ 13 ноября 2009

Документация jQuery для виджета аккордеона очень проста в использовании. http://docs.jquery.com/UI/Accordion. Но использование метода jQuery работает только при наличии структуры, которую они описывают в документах. Другими словами (насколько я знаю) невозможно использовать аккордеонный виджет jQuery, не касаясь вашего HTML. Это структура: 

<div id="accordion">
    <h3><a href="#">Tab 1</a></h3>
    <div>
        First tab content
    </div>
    <h3><a href="#">Tab 2</a></h3>
    <div>
         Tab two content
    </div>
    <h3><a href="#">Tab 3</a></h3>
    <div>
         Tab three content
    </div>
</div>

Тогда вы бы создали виджет, используя строку javascript: 

$("#accordion").accordion();

Если вы хотите использовать jQuery для форматирования вашего HTML, вам все равно нужен способ выбрать и проанализировать ваш HTML. Содержание каждой вкладки должно быть доступно для выбора. Если ваш HTML-код уже каким-то образом разделил вкладки, вам нужно взглянуть на эту страницу http://docs.jquery.com/Manipulation. Она должна быть довольно простой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...