Zh YandexMap PlacemarkGroupControl/ru: Difference between revisions

From Documentation
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:




Открываем слайдер '''Placemark Groups'''
Открываем слайдер '''Groups'''


Для начала определим положение списка сверху, причем это будет div-верстка.
Для начала определим положение списка сверху, причем это будет div-верстка.
Line 10: Line 10:
Для этого указываем для расположения списка групп '''Placemark Control''' значение '''Group-Map'''
Для этого указываем для расположения списка групп '''Placemark Control''' значение '''Group-Map'''


Указываем для поля '''Placemark Group CSS''', что будем использовать '''External''' стиль, т.е. стиль будем определять в своем шаблоне.
Указываем для поля '''Group CSS''', что будем использовать '''External''' стиль, т.е. стиль будем определять в своем шаблоне.


После чего внешний вид списка будет приблизительно таким
После чего внешний вид списка будет приблизительно таким
Line 82: Line 82:
{{Languages|Zh_YandexMap_PlacemarkGroupControl}}
{{Languages|Zh_YandexMap_PlacemarkGroupControl}}


[[Category:Zh YandexMap|Map]]
[[Category:Zh YandexMap|PlacemarkGroup]]
[[Category:Zh YandexMap Tutorial|Map]]
[[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  • русский