используя Control.tabs для prototype.js в Rails

Question

Я пытался использовать http://livepipe.net/control/tabs

, чтобы получить несколько закладок javascript и запустить мои рельсы.

Я просто пытаюсь выяснить, как установить это ... и я не вижу, как у меня вообще возникают проблемы.

Вот шаги, которые я предпринял:

1. положить tabs.js в мою папку скриптов
2. убедился, что макет включает все файлы JavaScript
3. затем я скопировал код для примера 1, а также CSS из таблицы стилей страницы.

Я не получаю ошибку, но она просто не работает. Обе вкладки отображаются ...

Есть идеи?

Обновлено с кодом с моей точки зрения:

<%= javascript_include_tag :all %>

(в том числе:

<script src="/javascripts/prototype.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/effects.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/controls.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/application.js?1268618965" type="text/javascript"></script>

<script src="/javascripts/swfobject.js?1268618965" type="text/javascript"></script>
<script src="/javascripts/tabs.js?1272670452" type="text/javascript"></script>

)

У меня тогда (в шапке):

<script>
        document.observe('dom:loaded',function(){

    //example 1
    new Control.Tabs('tabs_example_one');

</script>

Тогда у меня есть CSS:

#main ul.subsection_tabs {
border-bottom:1px solid #CCCCCC;
clear:both;
height:20px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 0 5px;
padding:0;
}
#main ul.subsection_tabs li.tab {
float:left;
margin-right:7px;
text-align:center;
}
#main ul.subsection_tabs li.tab a {
background-color:#FFFFFF;
color:#666666;
display:block;
height:20px;
padding:0 6px;
width:80px;
}
#main ul.subsection_tabs li.tab a:hover {
color:#666666;
}
#main ul.subsection_tabs li.tab a.active {
background-color:#DDDDDD;
}
#main ul.subsection_tabs li.source_code {
float:right;
}

Тогда у меня есть HTML:

<div id="main">
 <!-- example 1 -->  
    <ul id="tabs_example_one" class="subsection_tabs">
        <li class="tab"><a href="#one">One</a></li>
        <li class="tab"><a href="#two">Two</a></li>
    </ul>
    <div id="one"><p>This is the simplest example of a set of tabs.</p></div>
    <div id="two"><p>Note that the styling for the tabs is done with CSS, not the Control.Tabs script.</p></div>
</div>

Я что-то упустил?

Answer 1

У меня была точно такая же проблема. Вам нужно только включить следующие файлы JavaScript:

1. Включить prototype.js , затем
2. Включите livepine.js и tabs.js из здесь

В этом точном порядке.

Например:

<script src="prototype.js" type="text/javascript"></script>
<script src="livepipe.js" type="text/javascript"></script>
<script src="tabs.js" type="text/javascript"></script>

Я обнаружил, что это работает точно так же, как демо.

Answer 2

В итоге я включил файлы прямо из демо-версии, и это помогло.

Answer 3

С tab.js голова

/**
 * @author Ryan Johnson 
 * @copyright 2008 PersonalGrid Corporation >
 * @package LivePipe UI
 * @license MIT
 * @url http://livepipe.net/control/tabs
 * @require prototype.js, livepipe.js
 */

Требуется prototype.js и livepipe.js

Answer 4

Вы включили его после включения прототипа?

<%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "tabs" %>

Вставьте код просмотра макетов. Ваш вопрос расплывчат.

Редактировать: Не кажется ли вам, что ваш скрипт-тег неполон?

<script>
        document.observe('dom:loaded',function(){

    //example 1
    new Control.Tabs('tabs_example_one');

</script>

Вам необходимо добавить }); после инициализации вкладки.

т.е.

<script>
  document.observe('dom:loaded',function(){
    new Control.Tabs('tabs_example_one');
  });
</script>

Даже если это не сработает, попробуйте следующее:

<script>
  document.observe('dom:loaded',function(){
    new Control.Tabs('tabs_example_one',{ linkSelector: 'div#main div'});
  });
</script>