javascript 使 jquery ui 手风琴水平
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11713002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make jquery ui accordion horizontal
提问by Samer El Gendy
I am using jquery ui accordion to view different data to user, it's working perfectly as described in jquery ui/demos, however what I want to achieve is to change the effect of the sliding effect such that instead of sliding up and down, i want to make it slide left and right (like image catalouges, visual design in this page http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1) so is it possible to do that? javascript:
我正在使用 jquery ui 手风琴向用户查看不同的数据，它按照 jquery ui/demos 中的描述完美地工作，但是我想要实现的是改变滑动效果的效果，而不是上下滑动，我想要使其左右滑动（如图像目录，此页面中的视觉设计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();
}
});
});
code:
代码：
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>";
采纳答案by Tats_innit
Hiya 2 Working demoswhich ever suits you for the cause: http://jsfiddle.net/g4NLf/
Hiya 2 工作演示适合您的原因：http: //jsfiddle.net/g4NLf/
-EDIT- 5th September:new demo:http://jsfiddle.net/g4NLf/orhttp://jsfiddle.net/g4NLf/show
-编辑- 9 月 5 日：新演示：http : //jsfiddle.net/g4NLf/或http://jsfiddle.net/g4NLf/show
one sues simple accordion and another use a a small lib for.
一个起诉简单的手风琴，另一个使用aa small lib for。
http://nicolahibbert.com/demo/liteAccordion/
http://nicolahibbert.com/demo/liteAccordion/
Hope this helps you! :)
希望这对你有帮助！ :)
HTML is in the demo link but of you want I can paste it in this post; Also please lemme know if it helps you!
HTML 位于演示链接中，但如果您愿意，我可以将其粘贴到这篇文章中；也请让我知道它是否对您有帮助！
code
代码
$('.accordion').accordion({collapsible:true,active:false});
or
或者
$(function(){
$('#one').liteAccordion({
containerWidth:400,
autoPlay : true,
pauseOnHover : true,
theme : 'dark',
rounded : true,
enumerateSlides : true
})
})
scripts
脚本
<script src="http://nicolahibbert.com/demo/liteAccordion/js/liteaccordion.jquery.js"></script>
<link href="http://nicolahibbert.com/demo/liteAccordion/css/liteaccordion.css" rel="stylesheet" />
?
回答by davidcondrey
Check out the full page demo here on Codepen.
var space = ($(window).width() - 100);
$('.column').width(space/4);
$(".column").click(function(){
if (!$(this).hasClass('animated')) {
$('.column').not($(this).parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'},1750,'easeInOutQuint', function () {
});
}
$(this).addClass('animated');
$('.column').not($(this,'.reveal').parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'},1750,'easeInOutQuint', function () {
});
$(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>