Zh YandexMap PlacemarkGroupControl/ru: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
(One intermediate revision by the same user not shown) | |||
Line 4: | Line 4: | ||
Открываем слайдер ''' | Открываем слайдер '''Groups''' | ||
Для начала определим положение списка сверху, причем это будет div-верстка. | Для начала определим положение списка сверху, причем это будет div-верстка. | ||
Line 10: | Line 10: | ||
Для этого указываем для расположения списка групп '''Placemark Control''' значение '''Group-Map''' | Для этого указываем для расположения списка групп '''Placemark Control''' значение '''Group-Map''' | ||
Указываем для поля ''' | Указываем для поля '''Group CSS''', что будем использовать '''External''' стиль, т.е. стиль будем определять в своем шаблоне. | ||
После чего внешний вид списка будет приблизительно таким | После чего внешний вид списка будет приблизительно таким | ||
Line 82: | Line 82: | ||
{{Languages|Zh_YandexMap_PlacemarkGroupControl}} | {{Languages|Zh_YandexMap_PlacemarkGroupControl}} | ||
[[Category:Zh YandexMap| | [[Category:Zh YandexMap|PlacemarkGroup]] | ||
[[Category:Zh YandexMap Tutorial| | [[Category:Zh YandexMap Tutorial|PlacemarkGroup]] |
Latest revision as of 11:59, 10 October 2019
Расположение списка групп горизонтально
В ряде случаев возникает желание при управлении метками через список групп расположить список групп горизонтально.
Открываем слайдер Groups
Для начала определим положение списка сверху, причем это будет div-верстка.
Для этого указываем для расположения списка групп Placemark Control значение Group-Map
Указываем для поля Group CSS, что будем использовать External стиль, т.е. стиль будем определять в своем шаблоне.
После чего внешний вид списка будет приблизительно таким
Далее идем в стили шаблона (template.css или другой используемый файл стилей).
Добавляем стили для ul и li тегов.
#YMapsMenu-external #zhym-menu-external li { list-style-type: none; display: inline; } #YMapsMenu-external ul { margin-left: 0; padding: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; }
Смотрим, что получилось
Далее попробуем немного 'оживить' внешний вид
Добавляем следующий код
#YMapsMenu-external a { padding: 3px; background-color: #369; border-bottom: 1px solid #fff; display: inline; } #YMapsMenu-external a:link, #zhym-menu-external a:visited { color: #fff; text-decoration: none; } #YMapsMenu-external #zhym-menu-external a.active { background-color: #035; color: #bbb; } #YMapsMenu-external a:hover { background-color: #036; color: #eee; }
Ну а теперь список групп вот такой
Language: | English • русский |
---|