讓jquery ui手風琴橫向

Question

我正在使用jquery ui手風琴來查看不同的數據給用戶，它的工作原理與jquery ui/demo中所描述的完全一樣，但是我想要實現的是改變滑動效果的效果，上下滑動，我想使它左右滑動（如圖像catalouges，本頁面中的視覺設計http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1），那麼可以做到這一點？ 的javascript：

$(function() { 
       $("#accordion").accordion({autoHeight:false, collapsible: true, navigation: true, 
        clearStyle: true, 
        change: function(event, ui) { 
         resize_iframe(); 
        } 
       }); 
      }); 

代碼：

echo '<div id="accordion">'; 
     while ($r = mysql_fetch_assoc($get_role)) { 
      $role = $r['role']; 
      if ($role == 'author') { 
       echo '<h3><a href="#">Author</a></h3>'; 
       echo "<div>"; 
       AuthorView($member_id, $conference_id, $start, $end, $today); 
       echo "</div>"; 
      } else if ($role == 'organizer') { 
       echo '<h3><a href="#">Organizer</a></h3>'; 
       echo "<div>"; 
       OrganizerView($conference_id, $end); 
       echo "</div>"; 
      } else if ($role == 'reviewer') { 
       echo '<h3><a href="#">Reviewer</a></h3>'; 
       echo "<div>"; 
       ReviewerView($member_id, $conference_id, $start, $end, $today); 
       echo "</div>"; 
      } 
     } 
     echo "</div>"; 

Answer 1

你好2工作演示這曾經適合你的原因：http://jsfiddle.net/g4NLf/

- 編輯 - 9月5日：新演示：http://jsfiddle.net/g4NLf/或http://jsfiddle.net/g4NLf/show

一個起訴簡單的手風琴，另一個使用一個小的lib。

http://nicolahibbert.com/demo/liteAccordion/

希望這可以幫助你！ :)

HTML是在演示鏈接，但你想我可以粘貼在這篇文章;也請讓我知道它是否對你有幫助！

代碼

$('.accordion').accordion({collapsible:true,active:false}); 

或

$(function(){ 
    $('#one').liteAccordion({ 
         containerWidth:400, 
         autoPlay : true, 
         pauseOnHover : true, 
         theme : 'dark', 
         rounded : true, 
         enumerateSlides : true      
       }) 

}) 

腳本

<script src="http://nicolahibbert.com/demo/liteAccordion/js/liteaccordion.jquery.js"></script> 


<link href="http://nicolahibbert.com/demo/liteAccordion/css/liteaccordion.css" rel="stylesheet" /> 
​ 

Answer 2

時退房full page demo here on Codepen.

var space = ($(window).width() - 100); 
 
$('.column').width(space/4); 
 

 
$(".column").click(function(){ 
 
\t if (!$(this).hasClass('animated')) { 
 
\t \t $('.column').not($(this).parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'},1750,'easeInOutQuint', function() { 
 
     
 
    }); 
 
\t } 
 
    
 
    $(this).addClass('animated'); 
 
    \t $('.column').not($(this,'.reveal').parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'},1750,'easeInOutQuint', function() { 
 
     
 
\t }); 
 
    $(this).dequeue().stop().animate({ 
 
     width:(space/4) 
 
    },1400,'easeInOutQuint',function(){ 
 
     $(this).html('AGAIN'); 
 
    }); 
 
    $('.reveal').dequeue().stop().animate({ 
 
     width:'75vw' 
 
    },1400,'easeInOutQuint',function(){ 
 
    }); 
 
});

body { overflow:hidden;max-width:100vw; } 
 
header { position:absolute;left:0;top:0;width:200px;height:100vh;color:#ffffff;font-size:2em;} 
 
.columns { position:absolute;left:100px;top:0;height:100vh;background:green;width:100%;} 
 
.column { height:100vh;float:left;color:#ffffff;font-size:2em;text-align:center;display:block;opacity:0.75;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} 
 
.reveal { background:rgba(0,0,0,0.5);height:100vh;-webkit-transition: all 2s; 
 
    -moz-transition: all 2s; 
 
    -o-transition: all 2s; 
 
    transition: all 2s linear;left:200px;color:#ffffff; }

<div class="container"> 
 
    
 
    <header style="background:#333333;"> 
 
    
 
    </header> 
 
    
 
    <div class="columns" style="background-image:url('http://placekitten.com/800/300');background-size:cover;background-repeat:no-repeat;background-position:center top;"> 
 
    
 
    <div class="column" style="background:blue;">DOUBLE<br>CLICK</div> 
 
    <div class="column" style="background:green;">ANY<br>OF</div> 
 
    <div class="column" style="background:orange;">THESE COLUMNS</div> 
 
    <div class="column" style="background:pink;">TO REVEAL</div> 
 
    <div class="column reveal">THIS</div> 
 
    </div> 
 
</div>