Угловые элементы в аккордеонном списке jQuery? - PullRequest
Новая
       25

Угловые элементы в аккордеонном списке jQuery?

0 голосов
/ 06 января 2010

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

Несколько не идеальных идей:

  1. Иди олдскул и работай с изображениями карт. Хотя я годами не использовал карту изображений, так что потребовалось бы немного проверить, чтобы увидеть, возможно ли это вообще.
  2. Используйте несколько целевых областей для каждого элемента навигации и расположите их в шахматном порядке. Довольно хакерский и раздутый.
  3. Используйте функцию поворота модных браузеров. На самом деле это не так уж и плохо, но, очевидно, не доступно для просмотра большинству пользователей. Также не уверен, как это повлияет на области содержимого, но можно изучить.

Дайте мне знать, если потребуется какое-либо разъяснение.

Вот эскиз концепции: концептуальный эскиз http://img158.yfrog.com/img158/3122/slgu.jpg

Ответы [ 2 ]

0 голосов
/ 06 января 2010

Я только что указал на плагин jQuery, который хорошо справляется с этой задачей ( Diagonal Accordion ). Я еще не протестировал его, но похоже, что он ограничен углами 45 °, что немного обидно, но все равно довольно круто.

0 голосов
/ 06 января 2010

Да, я верю, что это можно сделать. Думая о моей голове, это то, что вы будете делать. Сначала создайте угловые изображения для кнопок. Расположите эти изображения по порядку в разметке HTML, с элементом div между ними. Таким образом, разметка будет выглядеть примерно так: 

<img id="bttnOne" src="buttnImg1" onclick="openContent('bttnContentOne');" />
<div id="bttnContentOne" style="display: none">
   content1 content1 content1
</div>

<img id="bttnTwo" src="buttnImg2" onclick="openContent('bttnContentTwo');" />
<div id="bttnContentTwo" style="display: none">
   content2 content2 content2
</div>

Вам нужно будет отрегулировать CSS, чтобы они правильно подходили. Поплавок, оставленный на элементах, будет работать хорошо. Теперь, когда у вас есть HTML, вам нужно будет создать функцию, которую я назвал openContent выше. Вы можете передать идентификатор нажатой кнопки этой функции, если хотите, или можете придумать лучший способ сделать это.

Функция openContent будет выглядеть примерно так: 

function openContent(eleId) {
   $('.activeContent').slideUp('fast');                           //Close the currently opened content tab
   $('#' + eleId).slideDown('slow').class('activeContent');       //Open the new one and set the class
}

Теперь я не уверен, что slideDown будет выглядеть правильно, если ему нужно будет сдвинуть вправо или влево. Если это не так, то вы можете попробовать использовать функцию анимации, чтобы получить слайд влево и вправо. Это ОЧЕНЬ грубый пример того, как это можно сделать, поэтому не ожидайте, что этот код будет работать, но основной мыслительный процесс правильный.

Надеюсь, это поможет!

Метрополис



(Edited)

Единственное, что мне лично не нравится в этом примере, это то, как текст также отображается по диагонали. Я считаю, что на самом деле было бы лучше использовать прямоугольники, которые «выглядят» по диагонали. Вот грубый набросок ascii:) 

---------------------------
|      /| content content |
|     / | content content |
|    /  | content content |
|   /   |                 |
|  /    |                 |
| /     |                 |
|/      |                 |
---------------------------

Еще одна вещь, которая мне не нравится в этой конкретной реализации, это все теги div, которые расширение создает для вас. Это очень неэффективно на данный момент. Надеемся, что в будущем мы сможем делать такие вещи легко. Хотя сейчас, если вы хотите, чтобы контент был фактически диагональным, как эта реализация, вам понадобятся все эти теги div, чтобы получить его.

...