Настройка вкладок пользовательского интерфейса jQuery для многих вкладок - PullRequest
0 голосов
/ 19 марта 2010

Я хотел бы реализовать панель вкладок, используя jquery-ui-tabs, которые были настроены для работы так же, как и в HootSuite. Попробуйте это на HootSuite, чтобы понять, что я имею в виду:

  1. Войдите в свою учетную запись hootsuite.com
  2. Нажмите значок + справа от вкладок
  3. Добавляйте вкладки с именем «MMMMMMMMMMMMMMMMM», пока не появится вкладка «Еще ...»

Вы увидите это: Переполнение панели вкладок hootsuite http://issues.tauren.com/hootsuite-sample.png

HootSuite включает в себя следующие функции, которые я бы хотел сделать:

  1. Установите на экран как можно больше вкладок. Пользователи с большими экранами увидят больше вкладок.
  2. Если им не хватает места, появится вкладка «Еще ...» с раскрывающимся списком
  3. При нажатии на вкладку «Дополнительно» выпадающий список дополнительных вкладок
  4. Вкладки можно перетаскивать и переставлять.
  5. Вкладки в раскрывающемся списке Больше можно перетащить на панель вкладок
  6. Удалить вкладки с маленьким крестиком рядом с именем вкладки
  7. Добавление вкладок со значком + справа от последней вкладки

У меня уже есть панель вкладок, которая работает 4 и 6. Я нашел Плагин вкладок , который довольно крутой, но работает по-другому. Кто-нибудь знает плагины или методы, которые помогли бы мне выполнить вышеупомянутое?

Моя мысль состоит не в том, чтобы сделать вкладку «Дополнительно» настоящей вкладкой, а просто в виде объекта, который выглядит как вкладка. Я бы добавил логику в метод tabs.add, чтобы вычислить, может ли подойти другая вкладка. Если этого не произойдет, я добавлю детали вкладки в отдельный список «Дополнительно». Было бы достаточно усилий, чтобы все это заработало, поэтому, если есть какие-либо плагины, которые бы мне помогли, я хотел бы услышать о них.

Кстати, при дальнейшем рассмотрении не похоже, что HootSuite использует для этого вкладки пользовательского интерфейса. Я хотел бы избежать создания решения для домашнего пивовара, если уже существует плагин jquery, который делает это.


ОБНОВЛЕНИЕ: я потратил еще немного времени на это, и теперь мое собственное решение выполняет 1, 4, 6 и 7. Однако, если им не хватает места, происходит поведение пользовательской вкладки по умолчанию и вторая строка вкладок появляется. Я также нашел другое решение прокрутки , с которым я мог бы пойти, пока не найду время для создания решения, похожего на hootsuite. Тем не менее, если кто-нибудь знает о других подобных плагинах, пожалуйста, дайте мне знать!

Ответы [ 2 ]

0 голосов
/ 28 июля 2012

Я еще не сделал этого, но я думаю об использовании Twitter Bootstrap для решения этой проблемы. Похоже, пример Tabs with Dropdowns может работать. http://twitter.github.com/bootstrap/components.html#navs

Однако я не думаю, что он поддерживает перетаскивание вкладок.

0 голосов
/ 19 марта 2010

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

...