手风琴在表格中并不令人耳目一新

时间:2013-04-30 01:22:13

标签: jquery user-interface tabs accordion

我无法在选项卡中获得手风琴的大小。我看到这篇文章,并认为单击选项卡时可以通过简单的刷新来完成:http://bugs.jqueryui.com/ticket/3905。我已经尝试了几种方法来获取隐藏的选项卡以显示手风琴,第一个H3的大小与内容相关但我无法使其工作。

谢谢!

<div class="tab-set" style="display:none;">  
<ul> 
    <li><a href="#States">States</a></li> 
    <li><a href="#Trending">Trending</a></li>
    <li><a href="#Map" onclick="setTimeout(function() {initialize();}, 100);">Map</a></li>    
    <li><a href="#Cities">Cities</a></li>
    <li><a href="#NationalPark">National Parks</a></li>
    <li><a href="#StatePark">State Parks</a></li>
    <li><a href="#Information" onclick="$('#accordion').accordion.refresh()">Information</a></li>
</ul>
<!-- Hot Locations -->
<div id="Trending">
</div>
<!-- States -->
<div id="States">
</div>
<!-- Map -->
<div id="Map">    
</div>  
<!-- Cities -->      
<div id="Cities"> 
</div>
<!-- National Parks -->
<div id="NationalPark">
</div>
<div id="StatePark">
</div>
<div id="Information">
    <div id="accordion">
        <h3>Description</h3>
        <p>
        Almost 70 miles (113 km) west of Key West lies the remote Dry Tortugas National Park. The 100-square mile park is mostly open water with seven small islands.  Accessible only by boat or seaplane, the park is known the world over as the home of magnificent Fort Jefferson, picturesque blue waters, superlative coral reefs and marine life,  and the vast assortment of bird life that frequent the area.                
        </p>
        <h3>Operating Hours</h3>
        <p>
        Dry Tortugas National Park is open year-round
        The following limitations apply to specific areas within the park boundary:
        Garden Key is open year round 24 hours a day.
        Ft. Jefferson, on Garden Key, is open year-round from sunrise to sunset.
        Loggerhead Key is open to day visitors year round from sunrise to sunset. All other facilities on the island, including Loggerhead Lighthouse are closed to the public.
        Bush Key is open to visitors October 15th to January 15th from sunrise to sunset.
        Hospital Key, and Long Key are closed year round and visitors should remain 100 feet offshore of all closed islands.
        Middle and East Keys are open to visitors October 16 to March 31 from sunrise to sunset.                
        </p>
        <h3>Fees</h3>
        <p>
        Entrance Fee
        The entrance fee for the park is $5.00 for visitors 16 and older. This fee covers entrance to the park for 7 days.
        Entrance Fee Collection
        Currently, the Yankee Freedom Ferry and Key West Seaplane Adventures collect the park entrance fee from their passengers. If you are the proud owner of a National Parks Pass, Golden Eagle, Golden Age, and Golden Access Passports honored, show your pass at check-in and the entrance fee will be deducted from your transportation cost.
        If you arrive by private boat, fees are collected through a self service fee area on the main dock at Garden Key. Please note that the park does not have the ability to process credit cards at this fee station.
        Camping
        The campground is a self-service fee area with a nightly fee of $3 per person. A 50% discount applies to holders of the Golden Age or Golden Access Pass. No other discounts apply.
        Camping fees are collected only at the park, seaplane or ferry concessions do not collect camping fees. Please note that the park does not have the ability to process credit cards at this fee station.                </p>   
        </p>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

fiddle

的javascript

首先你需要初始化手风琴,这将在'div'部分设置大小,然后初始化选项卡。信息标签将是一个不错的大小。

我还将你的onclick内容更改为标签提供的activate事件。我不确定#map初始化调用应该去哪里,但是如果你只需要运行一次,那么你可以注册其他事件来启动初始化方法

$('#accordion').accordion( {heightStyle: "content"});
$(".tab-set").tabs({"activate":function(evt,ui){
    if(ui.newPanel){
        if( ui.newPanel.attr("id")=="Information"){
            ui.newPanel.find("#accordion").accordion("refresh");
        }else if(ui.newPanel.attr("id")=="Map"){
            //you'll need some check to make sure this hasn't fired already
            //if t/his is an ajax call, move this into a "load":function(evt,ui){} 
            //initialize();
        }
    } 
}});

的HTML

我改变了你的html。我通过将<p>包裹在<div>

中来清理手风琴html
<div class="tab-set">  
<ul> 
    <li><a href="#States">States</a></li> 
    <li><a href="#Trending">Trending</a></li>
    <li><a href="#Map">Map</a></li>    
    <li><a href="#Cities">Cities</a></li>
    <li><a href="#NationalPark">National Parks</a></li>
    <li><a href="#StatePark">State Parks</a></li>
    <li><a href="#Information">Information</a></li>
</ul>
<!-- Hot Locations -->
<div id="Trending">
</div>
<!-- States -->
<div id="States">
</div>
<!-- Map -->
<div id="Map">    
</div>  
<!-- Cities -->      
<div id="Cities"> 
</div>
<!-- National Parks -->
<div id="NationalPark">
</div>
<div id="StatePark">
</div>
<div id="Information">
    <div id="accordion">
        <h3>Description</h3>
        <div><p>
        Almost 70 miles (113 km) west of Key West lies the remote Dry Tortugas National Park. The 100-square mile park is mostly open water with seven small islands.  Accessible only by boat or seaplane, the park is known the world over as the home of magnificent Fort Jefferson, picturesque blue waters, superlative coral reefs and marine life,  and the vast assortment of bird life that frequent the area.                
        </p></div>
        <h3>Operating Hours</h3>
        <div><p>
        Dry Tortugas National Park is open year-round
        The following limitations apply to specific areas within the park boundary:
        Garden Key is open year round 24 hours a day.
        Ft. Jefferson, on Garden Key, is open year-round from sunrise to sunset.
        Loggerhead Key is open to day visitors year round from sunrise to sunset. All other facilities on the island, including Loggerhead Lighthouse are closed to the public.
        Bush Key is open to visitors October 15th to January 15th from sunrise to sunset.
        Hospital Key, and Long Key are closed year round and visitors should remain 100 feet offshore of all closed islands.
        Middle and East Keys are open to visitors October 16 to March 31 from sunrise to sunset.                
        </p></div>
        <h3>Fees</h3>
        <div><p>
        Entrance Fee
        The entrance fee for the park is $5.00 for visitors 16 and older. This fee covers entrance to the park for 7 days.
        Entrance Fee Collection
        Currently, the Yankee Freedom Ferry and Key West Seaplane Adventures collect the park entrance fee from their passengers. If you are the proud owner of a National Parks Pass, Golden Eagle, Golden Age, and Golden Access Passports honored, show your pass at check-in and the entrance fee will be deducted from your transportation cost.
        If you arrive by private boat, fees are collected through a self service fee area on the main dock at Garden Key. Please note that the park does not have the ability to process credit cards at this fee station.
        Camping
        The campground is a self-service fee area with a nightly fee of $3 per person. A 50% discount applies to holders of the Golden Age or Golden Access Pass. No other discounts apply.
            Camping fees are collected only at the park, seaplane or ferry concessions do not collect camping fees. Please note that the park does not have the ability to process credit cards at this fee station.                </p></div>   
    </div>
</div>