В настоящее время я работаю над созданием интерфейса с вкладками, который имеет одну вкладку с богатым флэш-содержимым, а остальные вкладки заполнены простым текстом. Немного длинно, но я исчерпал свои возможности и хочу рассказать, что я пробовал. Я чувствую, что должно быть решение моей проблемы, которое не похоже на ужасный взлом, но я не уверен, что еще попробовать.
Испытания
Для создания своих вкладок я решил использовать jQuery для удобства и с радостью подключился к созданию обычной структуры с вкладками без UI / Tools. То есть, вот так:
<div class="page">
<div class="tabs">
<ul class="nav">
<li href="#tab_1">Tab one</li>
<li href="#tab_1">Tab one</li>
</ul>
</div>
<div class="content">
<div id"tab_1">Stuff</div>
<div id"tab_2">Words</div>
</div>
</div>
Отсюда у меня все обычные дела с CSS и jQuery, и я был доволен результатами. То есть, пока я не попытался добавить богатый контент. Он загружается просто отлично, и я не могу пожаловаться на это, но меня попросили сделать так, чтобы богатый контент не перезагружался при выходе на другую вкладку и возвращении.
Это озадачило меня некоторое время, но после прочтения документации jQuery по функциям .hide () и .show () стало слишком ясно, что происходит. hide () и show () эквивалентны display = "none" display = "block", и поэтому каждый раз, когда я совершал эти вызовы, мой контент уничтожался и нуждался в перезагрузке.
Ради ясности я покажу вам, как выглядел мой jQuery:
$(document).ready(function() {
var tabContainers = $('div.content > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.nav a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
//selected is a CSS attribute to highlight the tabs
$('div.tabs ul.nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
В этот момент я внес некоторые изменения в приведенный выше код, и вместо использования show () и hide () для расширенного содержимого я начал устанавливать видимость. Так что теперь мой простой контент использовал .hide () и .show (), поскольку его не нужно было сбрасывать, а мой богатый контент использовал видимость. К сожалению, теперь все это исчезало и снова появлялось красиво, но с большим отрывом от страницы с богатым контентом, поскольку видимость не удаляет физически контент со страницы, а только видимость.
Затем я исследовал еще несколько вопросов, обнаружил вызов .height () в jQuery и решил попробовать его использовать. Это сработало. Мне удалось вызвать height (), чтобы раздавить div, а затем снова развернуть его, чтобы соответствовать текущему содержимому.
Я был рад увидеть эту работу как в FF, так и в Chrome, но затем открыл ее в IE8. Ничего такого. Гигантский разрыв все еще был там. Crestfallen Я снова обратился к Интернету и обнаружил, что это потому, что мне не хватало стандартного вызова DOCTYPE в верхней части моей страницы, и поэтому IE работал в режиме Quirks. Я сделал изменения и бац, это сработало.
Теперь самое интересное, это на самом деле предназначено для запуска в Facebook. У меня уже был какой-то HTML в php-файле из тестового прогона, и я заменил его для этого нового кода. Я открыл Chrome, FF и IE, и вот, Chrome и FF работают; IE, с другой стороны, имеет тот же старый гигантский пробел, от которого я только что избавился.
Вопрос
На данный момент я не уверен, что еще попытаться. Я надеялся, что вкладки jQuery Tools или jQuery UI могут быть полезны, но, похоже, они оба уничтожают контент и перезагружают его. Что бы я больше всего обрадовал, так это создание интерфейса, который не требовал бы такого изменения размера div, но на данный момент я просто хочу, чтобы с ним работало что-то функциональное.
Есть ли способ заставить изменение размера работать или заставить вкладки не разрушать содержимое при переключении друг на друга? Если вы посмотрите на различные игры на Facebook, то, похоже, у некоторых из них поведение интерфейса с вкладками, которое я ищу, но я просто не знаю, как его воспроизвести. Кто-нибудь может указать мне новое направление или предложить исправление?