ссылка в JQuery-UI аккордеоне - PullRequest
Новая
       6

ссылка в JQuery-UI аккордеоне

1 голос
/ 01 ноября 2010

У меня есть ссылка в содержании аккордеонного дивизиона jquery-ui.Это работает, но не отформатировано, как остальные мои ссылки.Я нашел это на странице аккордеона jquery-ui :

Если у вас есть ссылки внутри содержимого аккордеона и вы используете a-элементы в качестве заголовков, добавьте к ним класс и используйте егов качестве заголовка, например.header: 'a.header'.

Однако я не совсем уверен, как это сделать.Я предполагаю, что мне нужно изменить .css для аккордеона, чтобы использовать этот новый класс a.header для заголовков, и тогда мои обычные элементы a будут использовать css, который используют остальные элементы a на моем сайте?

Вот .css для аккордеона: 

    /* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a { zoom: 1; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }

Ответы [ 3 ]

3 голосов
/ 01 ноября 2010

Я рекомендую использовать что-то вроде firebug для проверки вашего элемента. Отсюда вы можете точно определить, какая часть этого CSS влияет на вашу ссылку, чтобы вы могли стилизовать ее таким образом. Это или дать ссылку свое собственное имя класса, чтобы стилизовать его так, как вы хотите. Если вы хотите перейти непосредственно к CSS пользовательского интерфейса jquery, возможно, обратите внимание на стилизацию тегов с символом «a» и посмотрите, приведет ли это вас куда-либо.

е: 

.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a { zoom: 1; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }

те

1 голос
/ 02 ноября 2010

Вы можете изменить свои заголовки, чтобы использовать что-то кроме тега, а затем установить свойство при создании аккордеона: 

<div id="accordion">
  <h3>My Header</h3>
     <div>My content with a <a href="#">link</a></div>
  <h3>Header Two</h3>
     <div>Some more stuff...</div>
</div>


$("#accordion").accordion({ header: 'h3' });
0 голосов
/ 02 ноября 2010

У меня есть веб-сайт, где мне нужно это сделать, и я использую приведенный ниже код для различения ссылок и заголовков в аккордеоне:

Разметка: 

<div id="accordion">
  <h3>
    <a href="MyNewPage.aspx" rel="newpage">Link To a New Page</a>
  </h3>
  <h3>
    <span class="name">Dental Providers</span>
  </h3>
    <div>
        Some Content with a <a href="#">Link to more stuff</a></div>
    </div>
</div>

JQuery: 

     //redirect headers that link to new pages
     $('A[rel="newpage"]').click(function () {
         window.location=$(this).attr('href');
         return false;
     });
     //set up the accordion to use the h3 header
      $("#accordion").accordion({
         header: 'h3', 
         autoHeight: false,
         collapsible: true,
         fillSpace: false,
         icons: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
     });
...