Как я могу создать красивые полосы прокрутки, используя HTML / CSS / JScrollPane

StackOverflow https://stackoverflow.com/questions/2209824

Вопрос

Я разрабатываю веб-страницу 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), и просто начать его использовать.Опыт - отличный учитель в этом случае.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top