Zh YandexMap PlacemarkGroupControl/ru: Difference between revisions

From Documentation
Jump to navigation Jump to search
(Created page with "== Расположение списка групп горизонтально == В ряде случаев возникает желание при управлении м...")
 
mNo edit summary
Line 80: Line 80:




{{Languages|PlacemarkGroupControl}}
{{Languages|Zh_YandexMap_PlacemarkGroupControl}}


[[Category:Zh YandexMap|Map]]
[[Category:Zh YandexMap|Map]]
[[Category:Zh YandexMap Tutorial|Map]]
[[Category:Zh YandexMap Tutorial|Map]]

Revision as of 08:46, 18 May 2012

Расположение списка групп горизонтально

В ряде случаев возникает желание при управлении метками через список групп расположить список групп горизонтально.


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

Для начала определим положение списка сверху, причем это будет div-верстка.

Для этого указываем для расположения списка групп Placemark Control значение Group-Map

Указываем для поля Placemark 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  • русский