Показать общий контент на всех вкладках — Ionic

Я хочу отображать некоторый общий контент на всех вкладках ionic и на вкладках переключаться, я хочу переключать часть контента, а не весь контент.

В основном у меня есть изображение, на котором пользователь выполняет операции. Это изображение должно быть включено в шаблон только один раз.

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

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

<ion-tabs class="tabs-positive tabs-icon-only">
    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
        <!-- Tab 1 content -->
        <ion-content>
            <!-- common image -->
            <img src="tshirt.jpg">

            Dynamic Content Of Tab One
        </ion-content>
    </ion-tab>

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
        <!-- Tab 2 content -->
        <ion-content>
            <!-- common image -->
            <img src="tshirt.jpg">

            Dynamic Content Of Tab Two
        </ion-content>
    </ion-tab>

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
        <!-- Tab 3 content -->
        <ion-content>
            <!-- common image -->
            <img src="tshirt.jpg">

            Dynamic Content Of Tab Three
        </ion-content>
    </ion-tab>
</ion-tabs>

javascript jquery tabs ionic
person Kanav    schedule 14.04.2015    source источник
comment
Есть удача здесь? Если можно, поделитесь кодом. Спасибо!   -  person amcastror    schedule 08.02.2017

Ответы (1)


arrow_upward
0
arrow_downward

Создайте, как показано ниже:

<ion-content>
      <div class="abc">
        Dynamic Content Of Tab One
      </div>
</ion-content>

<script type="text/javascript">
$(function(){
    var common = $('.abc');
    $.each( common , function( key, value ) {
       $(this).prepend('<img src="tshirt.jpg">');
    });
});
</script>

Существует так много способов выполнить эту задачу: используйте .insertBefore().

Возможно, вам потребуется небольшая модификация.

person Shelim    schedule 14.04.2015
comment
Но это вставит 3 тега изображения в HTML. - person Kanav; 14.04.2015