Tab как кнопка jquery UI

0

У вас есть вкладка и 5 вкладок для показа содержимого и 1 вкладка для печати страницы, как использовать кнопку печати только для onclick без обновления страницы.

<div id="maintab">
    <ul>
        <li><a href="#HATPRO">HATPRO</a></li>
        <li><a href="#summary">Summary</a></li>
        <li><a href="#modules">Module List</a></li>
        <li><a href="#computer">Computer Infrastructure</a></li>
        <li><a href="#all">All (Raw Data)</a></li>
        <li class="myTab"><a href="#" onclick="printData()">Print</a></li>
    </ul>

$("#maintab").tabs();

И 5 div

<div class="ui-widget-content" 
<div class="ui-widget-content" 
<div class="ui-widget-content" 
<div class="ui-widget-content" 
<div class="ui-widget-content" 

ОБНОВЛЕНИЕ 1

Извините за все решения, но он не работает, потому что он помещает все содержимое всех вкладок в текущую вкладку при нажатии кнопки печати

UPDATE 2 Я добавил ui-widget-content для вкладки print. Теперь он показывает пустую страницу

  • 0
    В вашем методе onclick выполните event.preventDefault()

3 ответа

0

Хм, я просто добавил простую кнопку

 var textElement = $("<span></span>");
    textElement.append('<button id="printBtn" onclick="window.print(); return false;">Print</button>')
    textElement.css('position', 'absolute');
    textElement.css('right', '20px');
    textElement.css('top', '5px');
    $("#maintab").append(textElement);

Но это уродливое решение :( Спасибо всем за усилия, если есть какие-то разные решения, просто напишите или прокомментируйте :)

0

Добавьте это в свой код jquery

$(".myTab a").click(function(e){
    e.stopPropagation();
});
  • 0
    Извините, но это не работает, потому что при нажатии на кнопку печати он помещает все содержимое всех вкладок в текущую вкладку.
0

Есть много способов приблизиться к этому. На мой взгляд, это самый элегантный, потому что он не требует какого-либо JQuery или каких-либо модификаций вашей функции printData().

+ Изменить

<a href="#" onclick="printData()">Print</a>

в

<a href="#" onclick="printData(); return false;">Print</a>

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

  • 0
    Извините, но это не работает, потому что при нажатии на кнопку печати он помещает все содержимое всех вкладок в текущую вкладку.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню