Экскурсия по сайту на JQuery
Новый плагин – это простой тур по сайту, а если конкретнее, то по одной странице сайта. Подсказки появляются в нужном углу экрана, а возле нужны элементов появляются тултипы. Плагин использует JSON, поэтому его работа такая простая. Вы легко можете настроить угол экрана для блока экскурсии и легко можете установить положение для тултипов. В примере кода все интуитивно понятно. В дополнение идет плагин скроллинга на JQuery, который позволяет прокручивать страницу к нужному элементу.
Подключение JQuery и плагина экскурсии по сайту (в секцию HEAD)
Вызов экскурсии
element - элемент, к которому нужно отобразить тултип (обязательно)
tooltip - текст тултипа (обязательно)
position - это положение тултипа, относительно элемента
controlsPosition - положение блока тура
Код CSS
Подключение JQuery и плагина экскурсии по сайту (в секцию HEAD)
Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script src="jquery.aSimpleTour.js" type="text/javascript"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script src="jquery.aSimpleTour.js" type="text/javascript"></script>
Вызов экскурсии
Code
<script type="text/javascript">
$(document).ready(function(){
options = {
data : [
{ element: '.top', 'tooltip' : 'Автор и название ', 'position' : 'L', 'controlsPosition' : 'TR' },
{ element: '.content', 'tooltip' : 'Текст произведения', 'position' : 'L', 'controlsPosition' : 'TR' },
{ element: '.bottom', 'tooltip' : 'Полное название источника', text: 'Другой текст для блока', 'position' : 'T', 'controlsPosition' : 'TR' }
],
controlsPosition : 'TR'
}
$.aSimpleTour(options);
});
</script>
$(document).ready(function(){
options = {
data : [
{ element: '.top', 'tooltip' : 'Автор и название ', 'position' : 'L', 'controlsPosition' : 'TR' },
{ element: '.content', 'tooltip' : 'Текст произведения', 'position' : 'L', 'controlsPosition' : 'TR' },
{ element: '.bottom', 'tooltip' : 'Полное название источника', text: 'Другой текст для блока', 'position' : 'T', 'controlsPosition' : 'TR' }
],
controlsPosition : 'TR'
}
$.aSimpleTour(options);
});
</script>
element - элемент, к которому нужно отобразить тултип (обязательно)
tooltip - текст тултипа (обязательно)
position - это положение тултипа, относительно элемента
controlsPosition - положение блока тура
Код CSS
Code
#tourText {font-size:14px;}
#tourText {margin-top:10px}
#tourText h2 {margin:0;padding:0;font-size:16px;margin-bottom:10px}
#tourText p {margin:0;padding:0}
#tourButtons {margin-top:20px}
#tourButtons button {
margin:0;
margin-right:5px;
padding:5px 10px;
color:#FFFFFF;
background:#4892EC;
border:0px;
border-radius:3px;
cursor:pointer
}
#tourEnd, #tourEnd:hover {
margin:0;
margin-right:5px;
padding:5px 10px;
color:#FFFFFF;
text-decoration: none;
background:#4892EC;
border-radius:3px;
}
#tourText {margin-top:10px}
#tourText h2 {margin:0;padding:0;font-size:16px;margin-bottom:10px}
#tourText p {margin:0;padding:0}
#tourButtons {margin-top:20px}
#tourButtons button {
margin:0;
margin-right:5px;
padding:5px 10px;
color:#FFFFFF;
background:#4892EC;
border:0px;
border-radius:3px;
cursor:pointer
}
#tourEnd, #tourEnd:hover {
margin:0;
margin-right:5px;
padding:5px 10px;
color:#FFFFFF;
text-decoration: none;
background:#4892EC;
border-radius:3px;
}
Создать сайт в uKit
Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (4)
0
0
0
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Легко! Если пользоваться нашими советами.
