jQuery-ui嵌入jQuery选项卡时的手风琴高度问题

时间：2013-10-03 23:23:51

标签： jquery-ui accordion

我有一个jQuery选项卡，我有一些选项卡。我有一个带有两个面板的jquery-ui手风琴，第一个标签中的第1节和第2节。另一个手风琴在第二个标签中有两个面板。出于某种原因，第二个选项卡上的手风琴的面板'（在h3标签内的div）高度设置为0px并且显示：none和垂直滚动出现在两个面板上，就像我在Internet Explorer调试器中看到的那样（参见链接中附带的图像） ）：http://snag.gy/6pmYd.jpg

问题出在第二个标签上的手风琴：面板没有调整到最高的尺寸。它是jQuery选项卡的错误吗？

<style>
     /* IE has layout issues when sorting (see #5413) */
     .group { zoom: 1 }
</style>

<div id="tabs">
  <ul>
    <li><a href="#ComponentsTab">Components</a></li>
    <li><a href="#OthersTab">Capsules</a></li>
  </ul>
<div id="ComponentsTab">

    <div id="accordion"> <!-- style= "width: 790px;" -->

        <div class="group">
            <!-- First Panel 'Add Component' -->
            <h3>Add component</h3>                    
                     <div>
                         @using (Html.BeginForm("AddField", "Configure", FormMethod.Post))
                         {
                             <label id="NumberOfItems" for="amount">@Resource.ComponentNumberOfItems</label>
                             <input type="text" name="amount" id="amount" />

                             <div id="slider-range-max"></div>
                             <div id="componentId">
                                 @Html.LabelFor(m => m.ComponentViewModel.SelectedCompTypeId, new { @id = "componentIdLabel" })
                                 @Html.DropDownListFor(m => m.ComponentViewModel.SelectedCompTypeId,
                                                       Model.ComponentViewModel.CompTypeItems)
                             </div>
                             <div class="componentGroup">     
                                 <label id="NameCompLabel" for="NameComp">Name:</label>                     
                                 @Html.TextBox("NameComp", null, new { @class = "textStyle" })
                             </div>
                             <div class="componentGroup">
                                 <label id="DescCompLabel" for="DescComp">Description:</label> 
                                 @Html.TextBox("DescComp", null, new { @class = "textStyle" })
                             </div>
                             <div class="componentGroup">
                                 <input id="submitAddComp" type="submit" value="@Resource.ButtonTitleAddComponent" />
                             </div>
                         }
                     </div> <!-- end first panel 'Add Component' -->
       </div> <!-- end group -->

       <div class="group">
             <!-- Second Panel 'Filter' -->
             <h3>Filters</h3>                                   
                     <div>
                        @using (Ajax.BeginForm("Search", "Component",
                           new AjaxOptions
                           {
                               HttpMethod = "GET",
                               InsertionMode = InsertionMode.Replace,
                               UpdateTargetId = "jqGrid",
                               OnSuccess = "showGrid()"
                           }))
                        {
                        <!-- Drop down list for component types -->
                        <div id = "componentTypeFilter">                                        
                            @Html.LabelFor(m => m.ComponentViewModel.SelectedCompTypeId, new { id = "componentFilterLabel" })
                            @Html.DropDownListFor(m => m.ComponentViewModel.SelectedCompTypeId, Model.ComponentViewModel.CompTypeItems)
                        </div>
                        <!-- Apply filter button for components -->
                        <div id="ApplyFilterComponents" >
                            <input type="submit" name="_search" value="@Resource.CaptionComponentApplyFilter" />
                        </div>
                        }
                     </div>
        </div> <!--end group -->
    </div> <!-- end accordion -->
    <!--
    <div id="jqGrid">
        @Html.Partial("../Grids/_ComponentGrid")
    </div>
    -->
</div> <!-- End First tab -->
<div id="OthersTab">
    <div id="accordion2"> <!-- style ="width: 790px;" -->
        <div class="group">
                 <h3>Add others</h3>                     
                     <div>
                         @using (Html.BeginForm("AddOthers", "Configure", FormMethod.Post))
                         {
                             <div id="itemId">
                                 @Html.LabelFor(m => m.ItemViewModel.SelectedItemTypeId, new { @id = "itemIdLabel" })
                                 @Html.DropDownListFor(m => m.ItemViewModel.SelectedItemTypeId,
                                                       Model.ItemViewModel.TypeItems)
                             </div>
                             <div class="itemGroup">     
                                <label id="NameItemLabel" for="NameItem">Name:</label>                     
                                @Html.TextBox("NameItem", null, new { @class = "textStyle" })
                             </div>
                             <div class="itemGroup">
                                <label id="DescItemLabel" for="DescItem">Description:</label> 
                                @Html.TextBox("DescItem", null, new { @class = "textStyle" })
                             </div>
                             <div class="itemGroup">
                                <input id="submitAddItem" type="submit" value="@Resource.ButtonTitleAddItem" />
                             </div>
                         }
                     </div>
         </div>  <!--end group -->
         <div class="group">
                  <h3>Filters</h3>                     
                     <div>
                        @using (Ajax.BeginForm("Search", "Items",
                           new AjaxOptions
                           {
                               HttpMethod = "GET",
                               InsertionMode = InsertionMode.Replace,
                               UpdateTargetId = "jqGridItems",
                               OnSuccess = "showGridItems()"
                           }))
                        {
                        <!-- Drop down list of item types -->
                        <div id = "itemTypeFilter">
                            @Html.LabelFor(m => m.ItemViewModel.SelectedItemTypeId, new { id = "itemFilterLabel" })
                            @Html.DropDownListFor(m => m.ItemViewModel.SelectedItemTypeId,
                                                  Model.ItemViewModel.TypeItems)
                        </div>
                        <!-- Apply filter button for items -->
                        <div id="ApplyFilterItems" >
                            <input type="submit" name="_search" value="@Resource.CaptionItemsApplyFilter" />
                        </div>
                        }
                     </div>
          </div> <!-- end group -->
  </div> <!-- end accordion -->
  <!--
  <div id="jqGridItems">
    @Html.Partial("../Grids/_ItemsGrid")
  </div>
  -->
 </div> <!-- end second tab -->
</div> <!-- End tabs -->

脚本： 

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
<script type="text/javascript">
    // -------------------------------------------------------------------------------------------------
    // Slider functionality
    // -------------------------------------------------------------------------------------------------
    $(function () {
        $("#slider-range-max").slider({
            range: "max",
            min: 1,
            max: 255,
            value: 1,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
            }
        });
        $("#amount").val($("#slider-range-max").slider("value"));
    });

    function showTabs() {
        $("#tabs").tabs ();
    };

    $(document).ready(function () {
        showTabs();
    });

        // Below makes tabs sortable (Their position can be altered)
    $(function () {
        var tabs = $("#tabs").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            }
        });
    });

        $(function () {
        function subscribe_accordion_to_hoverintent_event(accordionId) {
            $(accordionId).accordion({
                header: "> div > h3",
                event: "click hoverintent"
            });
        }

        subscribe_accordion_to_hoverintent_event("#accordion");
        subscribe_accordion_to_hoverintent_event("#accordion2");
    });

    // Collapse content
    $(function () {
        function set_accordion_as_collapsible(accordionId) {
            $(accordionId).accordion({
                collapsible: true//,
                //eightStyle: "auto"
            });
        }

        set_accordion_as_collapsible("#accordion");
        set_accordion_as_collapsible("#accordion2");
    });

    // Sortable functionality
    $(function () {
        function set_accordion_as_sortable(accordionId) {
            $(accordionId).sortable({
                  axis: "y",
                  handle: "h3",
                  stop: function (event, ui) {
                             // IE doesn't register the blur when sorting
                             // so trigger focusout handlers to remove .ui-state-focus
                             ui.item.children("h3").triggerHandler("focusout");
                  }
            });
        }

        set_accordion_as_sortable("#accordion");
        set_accordion_as_sortable("#accordion2");
    });

    /*
    * hoverIntent | Copyright 2011 Brian Cherne
    * http://cherne.net/brian/resources/jquery.hoverIntent.html
    * modified by the jQuery UI team
    */
    $.event.special.hoverintent = {
        setup: function () {
            $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
        },
        teardown: function () {
            $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
        },
        handler: function (event) {
            var currentX, currentY, timeout,
                args = arguments,
                target = $(event.target),
                previousX = event.pageX,
                previousY = event.pageY;
            function track(event) {
                currentX = event.pageX;
                currentY = event.pageY;
            };
            function clear() {
                target
                  .unbind("mousemove", track)
                  .unbind("mouseout", clear);
                clearTimeout(timeout);
            }
            function handler() {
                var prop,
                orig = event;
                if ((Math.abs(previousX - currentX) +
                    Math.abs(previousY - currentY)) < 7) {
                    clear();
                    event = $.Event("hoverintent");
                    for (prop in orig) {
                        if (!(prop in event)) {
                            event[prop] = orig[prop];
                        }
                    }
                    // Prevent accessing the original event since the new event
                    // is fired asynchronously and the old event is no longer
                    // usable (#6028)
                    delete event.originalEvent;
                    target.trigger(event);
                } else {
                    previousX = currentX;
                    previousY = currentY;
                    timeout = setTimeout(handler, 100);
                }
            }
            timeout = setTimeout(handler, 100);
            target.bind({
                mousemove: track,
                mouseout: clear
            });
        }
    };

</script>

CSS： 

.elementStatus
{
    visibility: hidden;
}

.image{
    /*float: left;
    margin-top: 2px;
    padding-top: 1px; 
    padding-left: 10px;
    width: 35px;*/
    margin-top: 5px;
    text-align: center;
    vertical-align: middle;
}
.text{
    /*float: left;
    margin-top: 1px;
    padding-left: 14px;
    padding-bottom: 2px;
    width: 35%;*/
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 2px;
}

#accordion2 .ui-accordion-content 
{
    max-height: 400px;
    overflow-y: auto;
}

#accordion, #accordion2
{
    width: 790px;
    padding-top: 10px;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
}

#ComponentTypeFilterLabel
{
    font-size: 1em;
    margin-top: 11px;
    float: left;
}

#componentTypeFilter, #itemTypeFilter
{
    margin-top: 10px; 
    margin-left: 12px; 
    float: left;
}

#ApplyFilterComponents, #ApplyFilterItems
{
    padding-left: 20px; 
    float: left;
}

#ApplyFilterComponents input, #ApplyFilterItems input
{
    margin-top: 22px;
    font-size: 1em;
}

#NumberOfItems
{
    text-align: left; 
    width: 150px; 
    float: left; 
    margin-right: 1px; 
    padding-top: 5px;
    font-size: 1em;
}

#amount
{
    text-align: left; 
    color: #f6931f; 
    font-weight: bold; 
    border-top-color: currentColor; 
    border-right-color: currentColor; 
    border-bottom-color: currentColor; 
    border-left-color: currentColor; 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
    margin-top: 0px; 
    margin-left: 1px; 
    width: 555px; 
    padding-top: 5px; 
    padding-left: 5px; 
    padding-right: 1px;
    margin-right: 1px;
}

#componentFilterLabel, #itemFilterLabel
{
    font-size: 1em;
}

#componentId, #itemId
{
    height: 55px;
    font-size: 1em;
    float: left;
    text-align: left;
    font-weight: 600;
}

#componentIdLabel, #itemIdLabel
{
    margin-bottom: 5px; 
    height: 21px; 
    margin-top: 25px;/*0px; */
    padding-bottom: 0px;
    font-size: 1em;
}

#NameCompLabel, #NameItemLabel
{
    margin-left: 0px; 
    margin-top: 25px; 
    padding-left: 14px;
    font-size: 1em;
}

#DescCompLabel, #DescItemLabel 
{
    margin-left: 5px;
    margin-top: 25px;
    padding-left: 10px;
    font-size: 1em;
}

#NameComp, #NameItem
{
    float: left;
    margin-left: 15px; 
    margin-top: 0px;
    font-size: 1em;
}

#DescComp, #DescItem
{
    float: left; 
    margin-top: 0px; 
    margin-left: 15px;
    font-size: 1em;
}

#submitAddComp, #submitAddItem
{
    margin-top: 40px;
    margin-left: 15px;
    font-size: 1em;
}

.componentGroup, .itemGroup
{
    float: left;
}

.textStyle
{
    width : 150px;
}

这导致在每个面板中制作我不想要的可见垂直滚动条。

所以如果我从ie工具（调试器）中取消选中那些属性，那么所有面板都将被设置为我想要的最高面板的高度。那么如何在div中设置呢？内联样式还是css？

几乎正常工作： 我已经更新了我的脚本，现在它几乎正常工作。我所做的是修改$（document）.ready（...）中的代码，见下文：

$(document).ready(function () {
    var tabs = $("#tabs").tabs({
        activate: function (event, ui) {            
            $("#accordion2").accordion({
                activate: function (event, ui) {
                    $(ui.newPanel).css('height', '100');
                    $(ui.newPanel).css('min-height', '100');
                    $(ui.newPanel).css('max-height', '400');
                }             
            }); // End Accordion
        } // End Activate tab
    }); // End tabs

    tabs.find(".ui-tabs-nav").sortable({
        axis: "x",
        stop: function () {
            tabs.tabs("refresh");
        }
    });
});

其余代码保持与上面发布的相同。

现在的问题如下：最初第一个标签处于活动状态，因此显示第一个手风琴，其第一个面板已激活并展开。然后当我切换到第二个标签时，只有第一个时间，第二个手风琴（accordion2）显示并且它的第一个面板被激活，但面板没有调整到它的内容：它显示垂直滚动条，我不想要那个。然后，如果我切换到第一个选项卡，然后再切换到第二个选项卡，然后它工作，accordion2被激活，其第一个面板被激活并显示，没有垂直滚动条出现，面板正在完美调整其内容。问题是我第一次从第一个标签切换到第二个标签，其中是accordion2。那么如何强制将accordion2的面板调整到其内容呢？

最终解决方案 

$(document).ready(function () {

    $("#accordion2").accordion({
        header: "> div > h3",
        event: "click hoverintent",
        collapsible: true
    });

    var tabs = $("#tabs").tabs();
});

并在css文件中：

#accordion2 .ui-accordion-content
{
    height: 100px;
    max-height: 400px;
}

请，不要downvote！

2 个答案:

答案 0 :(得分：8)

$("#DivName" ).accordion({
        heightStyle: "content"
    });

这肯定是你和我正在寻找的。设置为'content'的HeightStyle解决了我的问题。

答案 1 :(得分：0)

将高度设置为0的原因是因为隐藏了其他选项卡，并且在构建手风琴插件时动态计算高度。解决问题的一种方法是使用tab activate事件，并仅在选项卡处于活动状态时才构造手风琴，以正确设置hight。 [的jsfiddle] http://jsfiddle.net/8tBtR/ 

$(function(){
    $( "#tabs" ).tabs({
      activate: function( event, ui ) {
          if((ui.newPanel.attr('id') === 'tabs-2') && (checkIfNotAccordion) )
          {
              $('#accordion2').accordion();
          }
       }
    });
});
相关问题
最新问题