Как заставить работать вкладки jquery ui?
В http://docs.jquery.com/UI/Tabs#Example есть краткий HTML-пример использования вкладок пользовательского интерфейса JQuery.
- Я помещаю HTML в локальный файл index.htm.
- Я загрузил все файлы CSS и Javascript и сохранил их в локальных файлах:
- но самое близкое, что я могу найти, - это тот же пример без какого-либо цвета на вкладках.
- Я поискал изображения и т. д., Но не нашел их.
- У меня даже может быть все локально, ЗА ИСКЛЮЧЕНИЕМ файла CSS, который я получаю с их сервера, и ТОГДА он работает, так что это что-то в файле CSS, которое я не получаю.
Что я не копирую локально из онлайн-файла CSS? Кто-нибудь получил эти вкладки пользовательского интерфейса JQuery для работы и имеет zip-файл, который работает локально?
Ответы 3
Чтобы вкладки пользовательского интерфейса работали, вам НЕОБХОДИМО немного CSS. В документации указывается необходимый минимум.
Проблема с темой примера заключается в том, что используемый файл css ссылается на другие файлы CSS. Вам нужно скопировать их все локально. Вам также понадобится изображение в папке themes / Флора / i.
Если ваша проблема в том, что все работает, но DIV не исчезают, как должны, то вы, вероятно, столкнулись с той же проблемой, что и я.
Вам нужно определить класс .ui-tabs-hide, чтобы он скрывал элемент. В основном jQuery использует это, чтобы скрыть элементы, а не делать это вручную с помощью display: none. Причина этого в том, что он не влияет на настройки вашего дисплея по умолчанию, которые могут быть блочными, встроенными или чем-то еще. Добавляя и удаляя класс, вы получаете больший контроль.
.ui-tabs-hide
{
display: none
}
У меня была такая же проблема, поэтому я здесь, и мне потребовалось время, чтобы найти проблему. Благодаря ответу kgiannakakis с помощью CSS, я нашел на странице JqueryUI этот CSS в исходном коде:
<link rel = "stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type = "text/css" media = "all" />
Добавьте его ПЕРЕД вашим основным CSS, например:
И тогда все будет в порядке - у меня это работает.
да, вот и все, я скачал этот образ и теперь все работает, спасибо: ui.jquery.com/latest/themes/flora/i/tabs.png