[Помощь] Webasyst Shop-Script и jQuery UI 1.9

mytrance

Постоялец
Регистрация
15 Дек 2007
Сообщения
347
Реакции
120
Столкнулся с неожиданной проблемой при обновлении jQuery UI с версии 1.8.24 до версии 1.9. Accordion и Tabs стали работать "криво". С аккордеоном разобрался быстро, нужно было подправить вызывающий функцию яваскрипт и подкорректировать css. А вот глюк с Tabs вводит в ступор. При вставке в ВебАсист он вместе с табами начинает выдавать полностью страницу сайта вместе с дизайном. Кто нибудь догадывается, почему это происходит и как это побороть?

jQuery UI интегрирован в сайт добавлением в HEAD:
<script type="text/javascript" src="Для просмотра ссылки Войди или Зарегистрируйся"></script>
<script type="text/javascript" src="Для просмотра ссылки Войди или Зарегистрируйся"></script>
<link rel="stylesheet" href="Для просмотра ссылки Войди или Зарегистрируйся" type="text/css" media="all" />

{literal}
<script>
$(function() {
$( "#accordion" ).accordion({heightStyle: "content",navigation: true});
$( "#tabs" ).tabs({event: "mouseover"});
});
</script>
{/literal}
 
Столкнулся с неожиданной проблемой при обновлении jQuery UI с версии 1.8.24 до версии 1.9. Accordion и Tabs стали работать "криво". С аккордеоном разобрался быстро, нужно было подправить вызывающий функцию яваскрипт и подкорректировать css. А вот глюк с Tabs вводит в ступор. При вставке в ВебАсист он вместе с табами начинает выдавать полностью страницу сайта вместе с дизайном. Кто нибудь догадывается, почему это происходит и как это побороть?

jQuery UI интегрирован в сайт добавлением в HEAD:
<script type="text/javascript" src="Для просмотра ссылки Войди или Зарегистрируйся"></script>
<script type="text/javascript" src="Для просмотра ссылки Войди или Зарегистрируйся"></script>
<link rel="stylesheet" href="Для просмотра ссылки Войди или Зарегистрируйся" type="text/css" media="all" />

{literal}
<script>
$(function() {
$( "#accordion" ).accordion({heightStyle: "content",navigation: true});
$( "#tabs" ).tabs({event: "mouseover"});
});
</script>
{/literal}

тоже сталкивался с таким, решил просто поставить другой скрипт по табам

Код:
<div id="tabbs">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr><td class='name'>
    <div id="tab_1" onclick="showtab('1')" class="active"><u>Информация о товаре</u></div>
    <div id="tab_2" onclick="showtab('2')" class="nonactive"><u>Фото</u></div>
    <div id="tab_3" onclick="showtab('3')" class="nonactive"><u>Отзывы</u></div>
    <div id="tab_4" onclick="showtab('4')" class="nonactive"><u>Сопутствующие товары</u></div>
    <div id="tab_5" onclick="showtab('5')" class="nonactive"><u>Задайте вопрос</u></div>
</td></tr>
<tr><td class='content'>
    <div id="tabcontent_1" class="show"><!-- cpt_container_start -->{cpt_product_description overridestyle=''}<!-- cpt_container_end --></div>
    <div id="tabcontent_2" class="hide">{cpt_product_images}</div>
    <div id="tabcontent_3" class="hide"><!-- cpt_container_start -->{cpt_product_discuss_link overridestyle=''}<!-- cpt_container_end --></div>
    <div id="tabcontent_4" class="hide"><!-- cpt_container_start -->{cpt_product_related_products overridestyle=''}<!-- cpt_container_end --></div>
    <div id="tabcontent_5" class="hide"><!-- cpt_container_start -->{cpt_product_details_request overridestyle=''}<!-- cpt_container_end --></div>
</td></tr>
</table>
</div>

в head
Код:
<script type="text/javascript" src="{$smarty.const.URL_JS}/tab.js"></script>

содержимое tab.js (залить в директорию published\SC\html\scripts\js\)
Код:
function showtab(id){
    names = new Array ("tab_1","tab_2","tab_3","tab_4","tab_5"); 
    conts= new Array ("tabcontent_1","tabcontent_2","tabcontent_3","tabcontent_4","tabcontent_5"); 
    for(i=0;i<names.length;i++) {
        document.getElementById(names[i]).className = 'nonactive';
    }
    for(i=0;i<conts.length;i++) {
        document.getElementById(conts[i]).className = 'hide';
    }
    document.getElementById('tab_' + id).className = 'active';
    document.getElementById('tabcontent_' + id).className = 'show';
}

в css
Код:
#tabbs { position:relative; padding:20px; margin:0 auto; background-color:#fff; width: 100%px;}
#tabbs div{ font-family:verdana; font-size:11px;}
#tabbs .content { border: solid 1px #e7e7e7; padding: 5px;}
#tabbs .content div{ padding: 0px; color:black; background-color:#fdfdfd;}
#tabbs .name div{ float:left; height: 23px; padding: 7px 25px 0px 25px; margin-right:2px; border-bottom: solid 1px #9F0D0B;}
#tabbs .hide{display:none;}
#tabbs .show{display:block; color:red;}
#tabbs .nonactive{ /* неактивная вкладка */ background-color:f7f7f7; border-top:#fff 3px solid; cursor:pointer; color:#3794DA;}
#tabbs .active{ /* активная вкладка */ background-color:#f0f0f0; border-top:#02A305 3px solid; cursor: pointer; color:#000; font: bold 11px Tahoma;}
 
Подсказку нашел на форуме jQuery UI. Причина глюка: наличие в Head тега <base>. Если из /published/SC/html/scripts/templates/frontend/frame.html удалить строчку <base href="{$smarty.const.CONF_FULL_SHOP_URL}">, то табсы работают корректно.
Интересно, а удаление <base> влияет на какой-либо функционал Shop-Script?
 
Назад
Сверху