Как я могу создать красивые полосы прокрутки, используя HTML / CSS / JScrollPane
-
18-09-2019 - |
Вопрос
Я разрабатываю веб-страницу html, которая имитирует встроенные панели, определяя этот класс css:
.paneSection{
display: block;
border-width: 1px;
border-style: solid;
margin: 2px;
padding:0px;
height:200px;
width:200px;
overflow: auto
}
и применение к тегу span.Результирующий код выглядит примерно так:
<table>
<tr valign=top>
<td>
<span class="paneSection">
... A long piece of text here that will inevitably overflow the block ...
</span>
</td>
<td>
<span class="paneSection">
... More text, may or may not overflow, etc...
</span>
</td>
</tr>
</table>
Проблема в том, что появляющиеся полосы прокрутки являются уродливыми, серыми, квадратными.Мне действительно нужна "более красивая" полоса прокрутки.Я осматривался в течение пары часов, и кажется, что почти все указывает на использование плагина jQuery JScrollPane.Однако, хотя я разработчик (на самом деле я использую Java для генерации HTML-кода для веб-страницы), я никогда раньше не использовал jQuery или плагины.
Я немного поиграл с исходным кодом с других страниц и получил что-то минимально рабочее, но все равно ничего привлекательного.Возможно, я ошибаюсь, говоря это, но, похоже, мне нужны реальные файлы изображений, чтобы сделать полосы прокрутки красивее.
Примером одной полосы прокрутки, которая мне нравится, является панель 2 на этой странице:http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html
Где я могу получить изображения, на которые есть ссылки в источнике?Действительно ли мне нужно создавать эти изображения, или они доступны где-то для скачивания?
Приветствуется любая другая помощь по созданию красивых полос прокрутки (я НЕ графический дизайнер, пожалуйста, имейте это в виду) или по использованию плагинов jQuery в целом.
Добавленное Примечание Мне также нужно, чтобы полосы прокрутки работали горизонтально, а не только вертикально.Подходит ли JScrollPane по-прежнему для этого?
Решение
Нет, вы должны быть в состоянии захватывать изображения.Например, одна из стрелок находится здесь: http://www.kelvinluck.com/assets/jquery/jScrollPane/images/osx_arrow_up.png.
Самый простой способ найти это - использовать инспектор вашего браузера (в Chrome и Safari он встроен, в Firefox используется Firebug, в IE комментариев нет).Просто щелкните правой кнопкой мыши на полосе прокрутки или той части полосы прокрутки, которая вас интересует для изображения, и выполните команду "Проверить элемент". Оттуда вы можете увидеть css для этого элемента, и в данном случае они используют свойство background-image, и вы можете просто взять URL отсюда.
Если вы не графический дизайнер, я бы просто нашел уже существующие изображения в Интернете (при условии, что создатель разрешает это).Для jQuery в целом я бы посоветовал ознакомиться с документацией http://api.jquery.com/ чтобы увидеть, что вам доступно (я предполагаю, что вы знаете Javascript), и просто начать его использовать.Опыт - отличный учитель в этом случае.