Открыть главное меню

CP.Content.Zakladki

Алгоритм самостоятельного создания закладок на странице

1. Создать заявку с темой "Самостоятельное создание закладок в ПУ" (это служит нам сигналом для добавления Вам на сайт класса class="devsite_subtabs_autoslovar clearfix")

2. Создать новую страницу в контрольной панели (раздел "Управление контентом", вкладка "Страницы", ссылка "Создать новую страницу"). Для примера пусть название страницы будет autoslovar (http://ААААА.ВВ/?page=virtual&pageName=autoslovar , где ААААА.ВВ - Ваш сайт)

3. Аналогично п.2 создать новые страницы для необходимых вкладок. Для примера str1, str2, и str3 (http://ААААА.ВВ/?page=virtual&pageName=str1 , http://ААААА.ВВ/?page=virtual&pageName=str2 , http://ААААА.ВВ/?page=virtual&pageName=str3 , где ААААА.ВВ - Ваш сайт)

4. Перейти в редактирование ред.блока на странице autoslovar. Добавить маркированный список на страницу, где пунктами данного списка будут названия нужных Вам вкладок (названия, которые будут отображаться на сайте, например "Вкладка1", "Вкладка2" и "Вкладка3"). Сохранить изменения.

5. Перейти в html-редактирование ред.блока на странице autoslovar. (При html-редактировании ред.блока на странице autoslovar необходимо использользовать стили, прописанные для Вашего сайта, стили содержат классы. Это именно тот класс, который мы прописываем для Вас в п.1 - class="devsite_subtabs_autoslovar clearfix".) Вместо <ul> прописываем первой строкой <ul class="devsite_subtabs_autoslovar clearfix"> .

6. Продолжаем html-редактирование ред.блока на странице autoslovar. Вместо <li>Вкладка1</li> прописываем <li><a href="?page=virtual&pageName=str1">Вкладка1</a></li> и так для каждой вкладки, т.е. в нашем примере вместо <li>Вкладка2</li> прописываем <li><a href="?page=virtual&pageName=str2">Вкладка2</a></li> и вместо <li>Вкладка3</li> прописываем <li><a href="?page=virtual&pageName=str3">Вкладка3</a></li>

Итого получаем:

<ul class="devsite_subtabs_autoslovar clearfix">

<li><a href="?page=virtual&pageName=str1">Вкладка1</a></li>

<li><a href="?page=virtual&pageName=str2">Вкладка2</a></li>

<li><a href="?page=virtual&pageName=str3">Вкладка3</a></li>

</ul>

7. Сохранить изменения.


Приступаем к html-редактированию каждой страницы-вкладки.

8. Перейти в html-редактирование ред.блока на странице (например) str1. Полностью копируем текст со страницы autoslovar в html-редактировании (см. выше).

9. Вместо <li><a href="?page=virtual&pageName=str1">Вкладка1</a></li> прописываем <li class="active"><a href="?page=virtual&pageName=str1">Вкладка1</a></li>

10. Аналогично п.9 меняем код в html-редактировании в ред.блоках на страницах остальных вкладок

11. Не забываем сохранять изменения. Просмотреть результаты работы можно по ссылке http://ААААА.ВВ/?page=virtual&pageName=autoslovar , где ААААА.ВВ - Ваш сайт.

12. Когда изменения будут закончены, создаете заявку по размещению виртуальной страницы на сайте