JQtransform и свернутый DIV

Question

Я использую плагин jQuery под названием: jqtransform

Этот плагин использует JavaScript для применения стилей CSS к элементам формы.

У меня проблема в следующем сценарии:

Я создаю страницу поиска с возможностью расширенного поиска. Когда страница загружается, div, называемый «advancedSearch», скрывается, и он будет отображаться, только если пользователь щелкнет элемент. Внутри div # advancedSearch у меня есть несколько элементов формы.

Однако, если я скрываю div # advancedSearch в стиле CSS: «diplay: none;», плагин jqtransform не будет работать правильно со скрытыми элементами. Поэтому я решил скрыть div # advancedsearch с помощью JavaScript. Это на самом деле работает, и не имеет значения, сделано это после того, как документ готов или нет.

Но ... с помощью решения JavaScript div # advancedSearch остается видимым в течение нескольких миллисекунд ... что визуально раздражает.

Поэтому мне было интересно, будет ли решение этой проблемы в CSS, или в исправлении плагина jqtransform, или даже в том, чтобы найти способ немедленно скрыть div # advancedSearch с помощью JS, сделав его сразу скрытым.

---

ОБНОВЛЕНИЕ 1

После грубого комментария я решил разместить здесь свою функцию (обратите внимание, что <% =%> - это теги ASP.Net, которые я использую для получения пути к изображениям)

$('.toggleAdvancedSearch').click(function() {
    $('#advancedSearchWrap').slideToggle(250);
    $('form.jqtransform').jqTransform({ imgPath: '<%= ResolveClientUrl("~/masterpages/img/jqtransform/") %>' });
    return false;
});

---

ОБНОВЛЕНИЕ 2

Чтобы проверить проблему, я сделал следующее:

Добавлен еще один элемент на страницу с идентификатором «applyStyle», и на клике я вызываю $ («form»). JqTransform ();

Отключено $ ('form'). JqTransform (); от загрузки страницы.

Если я нажму a # applyStyle, перед расширением div # advancedSearch у меня возникнет та же проблема, что и у меня.

Но если я разверну div # advancedSearch и нажму после a # applyStyle, проблема будет решена.

Однако, если я запускаю страницу с помощью $ ('form'). JqTransform (); Функция на нагрузке, я не могу повторно применить его после нажатия a # applyStyle.

Я думаю, что решением может быть: отключение всех элементов, которые находятся внутри div # advancedSearch, и для той же функции, которая расширяет div, сделайте также применение стилей к элементам, которые находятся внутри div # advancedSearch.

Однако я не знаю, как это сделать (нет, если это будет работать).

---

PS: Кажется, это известная проблема с плагином, но я не могу ждать решения бесконечно.

Answer 1

У меня была совершенно другая проблема, поэтому я решил напечатать это вместе с решением, чтобы люди могли его найти ...

jqtransform применяет значения z-index ко всем выбранным выпадающим спискам (в данном случае к элементам, а не к опциям) и делает это, начиная с 10 и ниже. Это означает, что у 2-го поля выбора будет z-индекс 9, 3-го 8, 4-го 7 и т. Д. ... Если у вас больше 11, вы попадете в негативы. Это вызывает большие проблемы в случае, если ваши блоки выбора находятся в более сложном наборе div, где значения z-index имеют значение (они в основном исчезают на заднем плане).

Чтобы исправить эту проблему, вероятно, было бы неплохо изменить код jqtransform, чтобы он использовал атрибут tabindex selectbox в качестве z-индекса для нового создаваемого selecbox. Таким образом, все новые (временные и стилизованные) блоки выбора будут иметь значение z-index реального скрытого атрибута selectbox tabindex.

В основном код от строки 256 до 261 (или около того) должен выглядеть примерно так:

var $wrapper = $select
                .addClass('jqTransformHidden')
                .wrap('<div class="jqTransformSelectWrapper"></div>')
                .parent()
                .css({zIndex: $select.attr('tabindex')})
            ;

Чтобы использовать это, установите индекс вкладки в поле выбора. Например:

<select name="blah" id="blah" tabindex="33">...</select>

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

ключевые слова: выпадающие списки jqtransform выпадающий список выбора выбирает z-index невидимым

Answer 2

Я не уверен, что это исправление уже упоминалось, но при возникновении подобных проблем (а у меня их было много, не только с jqtransform), вместо display:none я использую position:absolute и left: -10000px, снова показывая его пользователю display:relative left:auto. Таким образом, элемент доступен для ориентации скрипта, но невидим для пользователя. В зависимости от структуры сайта может потребоваться указать фиксированные размеры его владельца, так как при использовании этого метода сам элемент удаляется из потока документа и макет может разрушиться.

Answer 3

У меня была похожая проблема с z-индексом в выпадающих списках и относительно позиционированным набором полей ниже моего последнего выпадающего списка. Любой выпадающий список с отрицательным z-индексом был скрыт относительно позиционированным набором полей под ним.

Чтобы «исправить» проблему, я просто увеличил z-index с 10 до 100.

        var $wrapper = $select
            .addClass('jqTransformHidden')
            .wrap('<div class="jqTransformSelectWrapper"></div>')
            .parent()
            .css({zIndex: 100-index})

Answer 4

Я сделал это, и он прекрасно работает:

$(document).ready(function () {
$('p.panel_class').click(function () {                     
    $('form.jqtransform').jqTransform(
        $('form#panel').slideToggle('fast'))    
    }); });

Надеюсь, это поможет; -)

Answer 5

Вы всегда можете пересчитать высоту неупорядоченного списка, содержащего ваши элементы, выполнив следующее:

$(".open_my_popup").click(function(){
    $(".popup").fadeIn(200); //the popup part

//the recalculation part for jqtransform
    $(".jqTransformSelectWrapper").each(function(){ //remember to relaculate for each select! not for all at once, cause this will return problems
        var items = $(this).find("li").length
        var height = $(this).find("ul li > a").height(); //corresponds with css .jqTransformSelectWrapper ul a height
        var list = $(this).find("ul");
        list.css("height",(items*height)+"px");
    });
});

Вам также нужно помнить, что в jqtransform.css элемент привязки должен быть описан так:

.jqTransformSelectWrapper ul a {
    display: block;
    padding: 0 5px;
    text-decoration: none;
    color:#333;
    background-color: #FFF;
    font-size: 12px;
    line-height:22px !important;
    height:22px !important;
}

По умолчанию в стилях jqTransform есть: padding: 5px; - и благодаря этому заполнению текст центрируется по вертикали в элементе li, это нужно изменить, как я, используя высоту и высоту строки, потому что в противном случае вы не пересчитаете правильную высоту для неупорядоченного списка, который содержит все элементы.

Answer 6

есть новая библиотека, которую я создал - csTransPie - основываясь на jqtransform - jqtransform - отличная библиотека, но у нее действительно много проблем, сегодня css3 решает многие из этих проблем, и мне нравится идея, что элементы управления являются обычными элементами управления то же самое в каждом браузере https://github.com/pkoretic/csTransPie

Это работа, но даже сейчас она лучше, чем jqtransform (переписано больше половины css, исправлено много ошибок, чистая css…)

теперь вы можете использовать его для каждого элемента только с одним классом!

все предложения приветствуются!

Answer 7

Я знаю, что это старый вопрос, но вот как я решил эту проблему на моем сайте.

Вместо использования display:none в CSS, чтобы скрыть форму, которую я использую height:0;overflow:hidden.

Далее, в моем js я использую animate вместо slideToggle, который я использовал раньше для отображения формы. В моем случае код выглядит так:

$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

Примечание: #showAdvaced - это идентификатор кнопки для отображения расширенных параметров, а #sfBlock03 - это идентификатор элемента, содержащего расширенную форму.

Надеюсь, это поможет.

Answer 8

Как насчет того, чтобы вместо display:none установить visibility:hidden.

Answer 9

У меня была та же проблема без времени, потраченного на разработку полного исправления, но сейчас, если вы добавите код, чтобы закрыть панель, которую вы хотите скрыть, в конец файла jquery.jqtransform.js, то код создать все выпадающие и т. д. до того, как div будет скрыт.

Используя jquery, я добавил следующее, чтобы скрыть мой div с вызовом filterContents.

$(".filterContents").hide(); 
}); /* End Form each */

Надеюсь, это поможет сейчас.

Answer 10

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

$('#advanceSearchButton').click(function(){    
    $('#AdvanceSearch').show('slow', function(){
        $('form.jqtransform').jqTransform(); 
    });
});

Таким образом, вы можете начать с вашего #AdvanceSearch div, установленного для отображения: нет и избежать мгновенного отображения элемента.

Обновление: Чтобы было понятно, вы добавили его в качестве функции обратного вызова? Это обеспечит срабатывание после завершения эффекта.

$('#advancedSearchWrap').slideToggle(250, function(){
    $('form.jqtransform').jqTransform({ imgPath: 'asp path' }); 
    return false; 
}); 

Это войдет в ваш обработчик кликов.