Изменить текст заголовка аккордеона jQueryUI

Я хотел бы изменить текст заголовка с помощью аккордеона jQueryUI. У меня это работает, но код действительно грязный... Я делаю это следующим образом. Я делаю это так, потому что хочу сохранить диапазон, который используется для отображения значка максимизации/минимизации. Здесь я изменяю первый проиндексированный текст заголовка.

var html = $('#selector-header-0').html().split('>');
var span = '';
for (var i = 0; i < html.length - 1; ++i)
    span += html[i] + '>';
$('#selector-header-0').empty();
$('#selector-header-0').append(span + 'New Header');

Я хотел бы сделать что-то вроде этого.

$(#selector 0).header = 'New Header';

Я знаю, что у аккордеона есть опция заголовка, но, похоже, она используется для изменения размера заголовка. http://api.jqueryui.com/accordion/#option-header


javascript jquery accordion jquery-ui-accordion
person Dehli    schedule 01.08.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Лучшее решение, которое я могу придумать, — это заблаговременно добавить диапазон вокруг вашего текста H3, чтобы вы могли легко нацеливаться на него напрямую, как только аккордеон добавит свои значки изображений рядом с ним. Было бы неплохо, если бы виджет пользовательского интерфейса сделал это за вас.

Ключ HTML:

<h3><span class="accordion-header">Section 1</span></h3>

Ключ javascript:

$("#accordion").find($("#accordion").accordion( "option", "header" ))
.eq(0) //which do you wish to target?
.find($("span.accordion-header")).text("Section " + Math.random());

Полурабочий JSFiddle (стиль не применяется): http://jsfiddle.net/8KANL/

Полный рабочий пример:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<input id="renamefirst" type="button" value="Rename First Accordion Header" min=0></input>
<input id="renamesecond" type="button" value="Rename Second Accordion Header" min=1></input>
<input id="renamelast" type="button" value="Rename Last Accordion Header" min=2></input>

<div id="accordion">
  <h3><span class="accordion-header">Section 1</span></h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
    Nam mi. Proin viverra leo ut odio.</p>
  </div>
  <h3><span class="accordion-header">Section 2</span></h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3><span class="accordion-header">Section 3</span></h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>

<script>
$( "#accordion" ).accordion();

$("input").click( function() {
   $( "#accordion" ).find($( "#accordion" ).accordion( "option", "header" )).eq(this.min).find($("span.accordion-header")).text("Section " + Math.random());
});

</script>

</body></html>
person James Daily    schedule 01.08.2013
comment
Спасибо за попытку... Я пытался сделать что-то подобное, но это привело к удалению диапазона (в котором хранится значок). - person Dehli; 02.08.2013
comment
Хорошо, предоставил новый блестящий ответ, который основан на переносе вашего текста в диапазон. - person James Daily; 02.08.2013
comment
Большое спасибо! Я согласен, что это должно быть инкапсулировано в виджет пользовательского интерфейса. - person Dehli; 02.08.2013