Здравствуйте, пытался самостоятельно освоить как добавить кнопку помощи, увы, не взлетает, вот код
1 что не так?
2 так и не понял, это делается на стороне клиента?
PS Пришлось писать Кнопка помощ$и - чтобы пропустило название темы
Код:
<html>
<head>
<!--Подключаем библиотеку jQuery, в области head-->
<!--js/jquery.min.v1.4.2.js - это адрес и файл библиотеки-->
<script src="js/jquery.min.v1.4.2.js"></script>
<!--Добавляем стили, в области head-->
<style type="text/css">
a {
outline: none;
}
#help {
display: block;
font-size: 12px;
position: fixed;
right: 0;
top: 250px;
width: 279px;
z-index: 5;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
}
#help img{
border: 0px;
}
#help-panel {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
display: none;
float: right;
width: 240px;
}
#help-panel .collapse {
display: none;
float: left;
padding: 15px 10px;
font-size: 12px;
line-height: 15px;
}
#help-panel .collapse a {
font-size: 11px;
color: black;
text-decoration: underline;
font-size: 12px;
}
#support-header {
background: url("/images/24-7-bg.gif") repeat-x scroll 0 0 transparent;
height: 17px;
padding: 2px 0 0 10px;
}
#help-panel .main {
background: url("/images/item-bg.gif") repeat-x scroll 0 0 transparent;
float: left;
height: 37px;
width: 240px;
}
#help-panel a.title {
background: url("/images/but-right.gif") no-repeat scroll 10px 15px transparent;
color: #444;
display: block;
font-weight: bold;
padding: 12px 10px 12px 22px;
font-size: 12px;
}
#help-panel a.title span {
color: #666;
display: block;
font-weight: bold;
font-size: 12px;
}
#help-panel a.selected {
background: url("/images/but-down.gif") no-repeat scroll 10px 15px transparent;
}
#help a {
text-decoration: none;
}
#help-button {
float: right;
}
</style>
</head>
<body>
<!--Прописываем перед закрытием тэга </body> следующий код:-->
<div id="help">
<div id="help-panel" style="display: none;">
<!-- Блок перехода к форме заказа -->
<div class="main"><a class="title" title="Перейти к форме заказа" href="#zakaz">Перейти к форме заказа</a></div>
<!-- Блок перехода к частым вопросам -->
<div class="main"><a class="title" title="Частые вопросы" href="#faq_block">Частые вопросы</a></div>
<!-- Блок телефонов -->
<div class="main"><a class="title" href="javascript:void(0);">Телефоны</a></div>
<div class="collapse">
<strong>8-911-301-0-987</strong><br />
ПН-ПТ с 9.00 до 17.00,<br />
СБ с 10.00 до 15.00,<br />
ВС - выходной,<br />
время указано московское.
</div>
<!-- Блок службы поддержки -->
<div class="main"><a class="title" href="javascript:void(0);">Служба поддержки</a></div>
<div class="collapse">
<a href="http://www.evgeniypopov.ru/index.php?_m=knowledgebase&_a=view" target="_blank">Ответы на частые вопросы</a><br />
<a href="http://www.evgeniypopov.ru/index.php?_m=tickets&_a=submit" target="_blank">Задать свой вопрос</a>
</div>
</div>
<a id="help-button" href="javascript:void(0);"><img alt="" src="/images/button.png"/></a>
</div>
<script type="text/javascript">
$(function(){
var current_index = null;
$('#help-button').click(function(){
$('#help-panel').toggle(300);
});
$('a.title').click(function(){
if(current_index != $('a.title').index(this)){
$('.collapse:visible').slideUp(500);
$('a.title').removeClass('selected');
}
if($(this).parent().next().attr('class') == 'collapse'){
if($(this).parent().next().is(":hidden")){
$(this).addClass('selected');
} else if($(this).parent().next().is(":visible")) {
$(this).removeClass('selected');
}
$(this).parent().next().slideToggle(500);
}
current_index = $('a.title').index(this);
});
});
</script>
</body>
</html>
02.01.2012, 10:26
Кнопка помощ$и
Похожие темы
