Как программно создать dojox.mobile.TabBar?

Question

Я хочу создать dojox.mobile.TabBar сегментированного типа элемента управления, например, в верхней части этой страницы:

http://download.dojotoolkit.org/release-1.6.0/dojo-release-1.6.0/dojox/mobile/tests/test_iPhone-TabBar.html

Глядя на источник, я вижу, как это сделать декларативно:

   <ul dojoType="dojox.mobile.TabBar" barType="segmentedControl">
   <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-16.png" icon2="images/tab-icon-16h.png" moveTo="view1" selected="true">New</li>
   <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-15.png" icon2="images/tab-icon-15h.png" moveTo="view2">What's Hot</li>
    <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-10.png" icon2="images/tab-icon-10h.png" moveTo="view3">Genius</li>
    </ul>

Но я не смог понять, как сделать то же самое программно. TabBar является новым в Dojo 1.6, но описан в документации на http://dojotoolkit.org/api/1.6/dojox/mobile/TabBar

Но моя новичок все еще не знает, как программно создавать TabBarButtons и связывать их с TabBar. Я могу найти несколько примеров в Интернете, которые показывают, как сделать это декларативно, но не программно.

Кто-нибудь знает какие-либо программные примеры или может привести их здесь?

Answer 1

Чтобы архивировать тот же результат создания виджетов декларативно в вашем вопросе, вы можете использовать следующий код JavaScript для их программного создания.

var tabBar = new dojox.mobile.TabBar({barType : "segmentedControl"}, node1);
var button1 = new dojox.mobile.TabBarButton({icon1 : "", icon2 : ""}, node2);
var button2 = ...;
var button3 = ...;
tabBar.addChild(button1);
tabBar.addChild(button2);
tabBar.startup();

Таким образом, правила преобразования декларативного создания в программное создание могут быть простыми. Используйте new, чтобы создать новый экземпляр класса dijit и указать два параметра. Первый параметр - это объект JavaScript, содержащий свойства для запуска виджета, взятые из атрибутов DOM в декларативном синтаксисе. Второй параметр - это узел DOM, связанный с виджетом.

Виджеты типа dojox.mobile.TabBar являются контейнерными виджетами, которые могут содержать другие виджеты. Эти виджеты наследуются от dijit._Container и могут использовать функцию addChild для добавления дочерних виджетов.

Не забудьте использовать startup для запуска виджета контейнера. Эта функция сообщает контейнеру, что вы завершили работу с контейнером и его дочерними элементами. Контейнерный виджет обычно выполняет некоторую работу по изменению размера в функции startup. startup вызывается автоматически при декларативном создании.