У меня есть этот вопрос в одном из моих предыдущих блогов, опубликованных здесь (этот же блог размещен и на codeasp.net ), посвященном jQuery UI Accordion, и я подумал, что было бы приятно повторить его в посте блога, чтобы он у меня был. задокументировано для дальнейшего использования.
В предыдущем блоге я создавал вкладки для навигации по контенту с помощью jQuery UI Accordion. Итак, это довольно простой код, и все, что я делаю, это вызывает функцию accordion ().
<script language="javascript" type="text/javascript"> $(function() { $("#products").accordion(); });</script>
Значками изображений по умолчанию для каждого элемента является стрелка. Аккордеон использует стрелки вправо и стрелки вниз. Итак, что мы должны сделать, чтобы изменить их?
JQuery UI Accordion содержит опцию с иконками имен, которые имеют свойства header и headerSelected . Мы можем переопределить их либо с существующими классами из тем jQuery UI, либо с нашими собственными.
1. Использование существующих классов JQuery UI Theme
— Откройте следующую ссылку: http://jqueryui.com/themeroller/#icons
Вы увидите значки, доступные в теме пользовательского интерфейса jQuery. Наведите курсор мыши на каждый значок, и вы увидите название класса для каждого значка. Как видите, каждый значок имеет имя класса, построенное следующим образом: ui-icon- <name>
Все иконки в одном изображении
— В нашем примере я буду использовать ui-icon-circle-plus и ui-icon-circle-minus (плюс и минус иконки).
— Позволяет установить значки
<script language="javascript" type="text/javascript"> $(function() { //initialize accordion $("#products").accordion(); //set accordion header options $("#products").accordion("option", "icons", { 'header': 'ui-icon-circle-plus', 'headerSelected': 'ui-icon-circle-minus' }); });</script>
Из приведенного выше кода видно, что я сначала инициализировал плагин accordion, а после переопределил значки по умолчанию с помощью ui-icon-circle-plyus для header и ui-icon-circle-minus для headerSelected.
Вот конечный результат:
Итак, теперь вы видите, что у нас есть значки со знаком плюс / минус для состояния заголовка по умолчанию и выбранного состояния заголовка.
2. Добавить мои собственные значки
— Если вы хотите добавить свои собственные значки, вы можете сделать это, создав свои собственные классы CSS.
— Позволяет создавать классы для обоих, состояние заголовка по умолчанию и состояние выбранного заголовка
<style type="text/css"> .defaultIcon { background-image: url(images/icons/defaultIcon.png) !important; width: 25px; height: 25px; } .selectedIcon { background-image: url(images/icons/selectedIcon.png) !important; width: 25px; height: 25px; }</style>
Как видите, я использую свои собственные изображения, размещенные в папке images / icons /
— значок по умолчанию
— выбранный значок
Здесь следует отметить одну очень важную вещь — ключ ! Important, добавляемый к каждому свойству background-image. Это похоже на то, чтобы придать нашему изображению наибольшую важность, чтобы изображения значков темы пользовательского интерфейса jQuery по умолчанию имели меньшую важность и не использовались.
И код jQuery:
<script language="javascript" type="text/javascript"> $(function() { //initialize accordion $("#products").accordion(); //set accordion header options $("#products").accordion("option", "icons", { 'header': 'defaultIcon', 'headerSelected': 'selectedIcon' }); });</script>
Примечание. Для случаев № 1 и № 2 мы используем имена классов без добавления. (точка) в начале имени (как мы делаем с селекторами). Это потому, что свойства header и headerSelected принимают классы только в качестве значения, поэтому все остальное делает сам плагин.
Полный код с моими собственными изображениями:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>jQuery Accordion</title> <link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/blitzer/jquery-ui.css" rel="Stylesheet" /> <style type="text/css"> .defaultIcon { background-image: url(images/icons/defaultIcon.png) !important; width: 25px; height: 25px; } .selectedIcon { background-image: url(images/icons/selectedIcon.png) !important; width: 25px; height: 25px; } </style> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script> <script language="javascript" type="text/javascript"> $(function() { //initialize accordion $("#products").accordion(); //set accordion header options $("#products").accordion("option", "icons", { 'header': 'defaultIcon', 'headerSelected': 'selectedIcon' }); }); </script></head><body> <form id="form1" runat="server"> <div id="products" style="width: 500px;"> <h3> <a href="#"> Product 1</a></h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in tortor metus, a aliquam dui. Mauris euismod lorem eget nulla semper semper. Vestibulum pretium rhoncus cursus. Vestibulum rhoncus, magna sit amet fermentum fringilla, nunc nisl pellentesque libero, nec commodo libero ipsum a tellus. Maecenas sed varius est. Sed vel risus at nisi imperdiet sollicitudin eget ac orci. Duis ac tristique sem. </p> </div> <h3> <a href="#"> Product 2</a></h3> <div> <p> Aliquam pretium scelerisque nisl in malesuada. Proin dictum elementum rutrum. Etiam eleifend massa id dui porta tincidunt. Integer sodales nisi nec ligula lacinia tincidunt vel in purus. Mauris ultrices velit quis massa dignissim rhoncus. Proin posuere convallis euismod. Vestibulum convallis sagittis arcu id faucibus. </p> </div> <h3> <a href="#"> Product 3</a></h3> <div> <p> Quisque quis magna id nibh laoreet condimentum a sed nisl. In hac habitasse platea dictumst. Proin sem eros, dignissim sed consequat sit amet, interdum id ante. Ut id nisi in ante fermentum accumsan vitae ut est. Morbi tellus enim, convallis ac rutrum a, condimentum ut turpis. Proin sit amet pretium felis. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> </form></body></html>
Конечный результат: