Question

我正在使用一个名为jqtransform

的jQuery插件

此插件使用JavaScript将CSS样式应用于表单元素。

我遇到的问题包括以下情况：

我正在使用高级搜索选项构建搜索页面。当页面加载时，隐藏了名为“advancedSearch”的div，它只显示用户是否单击了一个元素。在div＃advancedSearch中我有几个表单元素。

但是，如果我使用CSS样式隐藏div＃advancedSearch：“diplay：none;”，则jqtransform插件无法与隐藏的元素一起正常工作。所以我的解决方案是用JavaScript隐藏div＃advancedsearch。这实际上是有效的，如果在文档准备好之后完成它并不重要。

但是......使用JavaScript解决方案，div＃advancedSearch保持可见几毫秒......这在视觉上很烦人。

所以我想知道这个问题的解决方案是在CSS中，还是纠正jqtransform插件，或者甚至找到一种方法来立即隐藏div＃advancedSearch with JS使其立即隐藏。

更新1

在发表评论后，我决定将此功能放在此处 （请注意，＆lt;％=％＆gt;是用于获取图片路径的ASP.Net标记）

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

更新2

为了测试问题，我执行了以下操作：

在页面中添加了另一个元素，ID为“applyStyle”，onClick我调用了$（'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开始向下执行此操作。这意味着第二个选择框的z-index为9，第3，第8，第4等等......如果你的数量超过11，你就会产生负数。如果你的选择框处于一个更复杂的div集合中，这会导致很大的问题，其中z-index值很重要（它们在背景中基本消失）。

要解决此问题，修改jqtransform代码可能是一个好主意，因此它使用selectbox tabindex属性作为它创建的新selecbox的z-index。这样，所有新的（临时和样式）选择框都将具有真正隐藏的选择框tabindex属性的z-index值。

基本上，第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>

这很漂亮，因为您可以控制哪个选择框出现在其他选项框上方。因此，使tabindex减少页面。您不希望下拉列表出现在其他选择框下方。

关键字：jqtransform下拉列表选择框下拉框选择z-index不可见

Answer 2

我做到了这一点，效果很好：

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

我希望这会有所帮助; - ）

Answer 3

我在选择下拉菜单上的z-index和我上一次下拉列表下方相对定位的字段集有类似的问题。任何具有负z-index的下拉列表都被其下方相对定位的字段集隐藏。

为了“解决”问题，我只是将z-index从10增加到100。

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

Answer 4

我不确定是否已经提到过此修复程序，但遇到类似这样的启动问题（我有很多，而不仅仅是jqtransform），而不是使用display:none，我使用{ {1}}和position:absolute，left: -10000px display:relative再次向用户显示。这样，该元素可用于脚本定向，而对用户不可见。根据网站的结构，可能需要为其固定尺寸，因为元素本身会从文档流中移除，使用此方法时布局可能会崩溃。

Answer 5

我假设你有一个功能，当用户选择高级选项并显示这些新元素时。在这种情况下，你可以再次调用插件初始化程序吗？

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

这样你可以从#AdvanceSearch div开始显示：none并避免元素的瞬时显示。

<强>更新要清楚，您是否已将其添加为回调函数？这将确保在效果完成后它将会触发。

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

这将进入您的点击处理程序。

Answer 6

没有时间实际花费在完成修复程序上有同样的问题，但是现在如果你添加代码来关闭你希望隐藏到实际jquery.jqtransform.js文件结尾的面板那么代码到创建所有下拉列表等在div被隐藏之前完成。

使用jquery我添加了以下内容来隐藏我的div，调用“filterContents”。

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

希望现在有所帮助。

Answer 7

如何设置display:none而不是设置visibility:hidden。

Answer 8

我知道这是一个老问题，但这是我在网站上解决问题的方法。

而是在CSS中使用display:none来隐藏我正在使用height:0;overflow:hidden的表单。

接下来，在我的js中，我使用的是animate而不是slideToggle我以前用来显示表单。在我看来，代码如下所示：

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

注意： #showAdvaced是显示高级选项的按钮的ID，#sfBlock03是包含高级表单的div的ID。

我希望这会有所帮助。

Answer 9

我创建了新的库 - csTransPie - 基于jqtransform - jqtransform是一个很棒的库，但它确实有很多问题，今天css3解决了很多这些问题，我喜欢控件是正常控件和看的想法每个浏览器都一样 https://github.com/pkoretic/csTransPie

这是一项正在进行中的工作，但即使现在它也比jqtransform更好（超过一半的css被重写，许多错误解决了，干净的css ......）

现在你只需要一个类就可以在每个元素上使用它！

欢迎所有建议！

Answer 10

您始终可以通过执行以下操作重新计算包含元素的无序列表的高度：

$(".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元素中以verticaly为中心，这需要像使用行高和高度一样进行更改，否则您将不会重新计算包含所有元素的无序列表的正确高度。

jqtransform和折叠DIV

更新1

更新2

10 个答案: