手风琴与所有子标签单滚动条 [英] Accordion with single scrollbar for all its sub tabs
本文介绍了手风琴与所有子标签单滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要创建一个基于jQuery的UI，其中我将拥有下面的html
I need to create a jquery based UI, in which I will have the below html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
div .content
{
border: 2px solid black;
background-color: White;
}
div.content::-webkit-scrollbar{
display:none;
}
#container::-webkit-scrollbar{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btnPopup">
Show Popup</button>
<div id="container" style="display: none; border: 2px solid green; background-color: Blue;">
<h3>
DISTRIBUTION</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this: Using jQuery UI Resizable I'm trying to prevent resizing based on various
rules. The built-in containment feature doesn't seem to work properly with absolutely
positioned elements, and I would need something more flexible than that anyway.
Having something like this: Using jQuery UI Resizable I'm trying to prevent resizing
based on various rules. The built-in containment feature doesn't seem to work properly
with absolutely positioned elements, and I would need something more flexible than
that anyway. Having something like this: Using jQuery UI Resizable I'm trying to
prevent resizing based on various rules. The built-in containment feature doesn't
seem to work properly with absolutely positioned elements, and I would need something
more flexible than that anyway. Having something like this: Using jQuery UI Resizable
I'm trying to prevent resizing based on various rules. The built-in containment
feature doesn't seem to work properly with absolutely positioned elements, and I
would need something more flexible than that anyway. Having something like this:
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this: Using jQuery UI Resizable I'm trying to prevent resizing based on various
rules. The built-in containment feature doesn't seem to work properly with absolutely
positioned elements, and I would need something more flexible than that anyway.
Having something like this: Using jQuery UI Resizable I'm trying to prevent resizing
based on various rules. The built-in containment feature doesn't seem to work properly
with absolutely positioned elements, and I would need something more flexible than
that anyway. Having something like this:
</p>
</div>
<h3>
EXCEPTION</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
<h3>
ERROR</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
<h3>
MY NOTES</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
</div>
</body>
<script type="text/javascript">
$("#container").accordion({
collapsible: true,
heightStyle: "content",
beforeActivate: function (event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !
isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});
$(document).ready(function () {
$(".content").css('max-height', $("#container").height() - 150);
});
$(document).delegate("#btnPopup", "click", function () {
$("#container").dialog({
title: "jQuery Modal Dialog Popup",
resizable: false,
width: 800,
maxHeight: 800
//minHeight: 250,
//minWidth: 500,
//resize: function (event, ui) {
// $(".content").css('max-height', ($("#container").height() - 250));
//}
});
return false;
});
// $(document).bind('wheel mousewheel', function (e) {
//
// if (e.originalEvent.wheelDelta > 0) {
//
// }
// else {
// k = h = 0;
// $("div.content").each(function () {
// if ($(this).is(":focus")) {
// h = k;
// }
// k++;
// });
// if ($('.content')[h] != undefined && h != (k - 1)) {
// if ($('#container').children('div.content').eq(h).scrollTop() + $('#container').children('div.content').eq(h).innerHeight() >=
//$('.content')[h].scrollHeight) {
//
// if (!($('div.content').eq(h + 1).prev('h3').hasClass('ui-state-active'))) {
// var totalDiv = $('div.content').length;
// var h3Height = $('h3').height();
//
// $("#container").accordion({ active: h + 1 });
// var f = $('h3.ui-state-active').length;
// //if (f != 1) {
// $('div.content').each(function () {
// if ($(this).css('display') == 'block')
// $(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
// });
// $('div.content').eq(h + 1).focus();
//
// }
// }
// }
//
// }
// });
(function ($) {
$.fn.hasScrollBar = function () {
return this.get(0).scrollHeight > this.height();
}
})(jQuery);
// $(function () {
// $(".content").bind('scroll', function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// })
$('div.content').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
// $(this).text('scrolling up !');
}
else {
// if ($('div.content').hasScrollBar()) {
// if ($('div.content').scrollTop() == ($('div.content p').height() - $('div.content').height())) {
// alert('end!');
// }
// }
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//alert('end reached');
$(this).next('h3').click();
$(this).prev('h3').click()
// $(this).next('div.content').attr('display', 'block');
$(this).blur();
$(this).next('div.content').focus();
}
}
});
// $('.content').bind('mousewheel', function (e) {
// if ($('div.content').hasScrollBar()) {
// $(this).delegate(".content", "scroll", function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// }
// else {
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
$(document).delegate("h3", "click", function () {
var totalDiv = $('div.content').length;
var h3Height = $('h3').height();
var f = $('h3.ui-state-active').length;
// if (!($(this).hasClass('ui-state-active'))) {
if (f != 1) {
$('div.content').each(function () {
if ($(this).css('display') == 'block')
$(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
});
}
});
</script>
</html>
上面的html显示了一个手风琴。
我需要做的是为整个手风琴内容提供一个单独的滚动条，其工作方式如下：
当第一个div滚动到达结尾时，第二个div将打开，完成第二个div滚动（如果没有滚动显示，那么同样的事情会发生），第三格将打开。
现在，随着向下滚动，用户向上滚动时也一样。
The above html displays an accordion. What I need to do us have a single scrollbar for the entire accordion content which will work like follows: When 1st div scrolling is reached till end, second div will open up, on completion of second div scroll(if no scroll is present then too the same thing will happen), 3rd div will open up. Now, this goes with scrolling downwards, the same should work when user scrolls upwards.
请让我知道必须应用的解决方案来实现以上类型的功能。
Please let me know the solution which has to be applied to implement the above type of functionality.
推荐答案
$("#container").accordion({
collapsible: true,
heightStyle: "content",
beforeActivate: function (event, ui) {
// The accordion believes a panel is being opened
var currHeader ;
var currContent;
if (ui.newHeader[0]) {
currHeader = ui.newHeader;
currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
currHeader = ui.oldHeader;
currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !
isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected);
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});
$(document).ready(function () {
$(".content").css('max-height', $("#container").height() - 150);
});
$(document).delegate("#btnPopup", "click", function () {
$("#container").dialog({
title: "jQuery Modal Dialog Popup",
resizable: false,
width: 800,
maxHeight: 800
//minHeight: 250,
//minWidth: 500,
//resize: function (event, ui) {
// $(".content").css('max-height', ($("#container").height() - 250));
//}
});
return false;
});
// $(document).bind('wheel mousewheel', function (e) {
//
// if (e.originalEvent.wheelDelta > 0) {
//
// }
// else {
// k = h = 0;
// $("div.content").each(function () {
// if ($(this).is(":focus")) {
// h = k;
// }
// k++;
// });
// if ($('.content')[h] != undefined && h != (k - 1)) {
// if ($('#container').children('div.content').eq(h).scrollTop() + $('#container').children('div.content').eq(h).innerHeight() >=
//$('.content')[h].scrollHeight) {
//
// if (!($('div.content').eq(h + 1).prev('h3').hasClass('ui-state-active'))) {
// var totalDiv = $('div.content').length;
// var h3Height = $('h3').height();
//
// $("#container").accordion({ active: h + 1 });
// var f = $('h3.ui-state-active').length;
// //if (f != 1) {
// $('div.content').each(function () {
// if ($(this).css('display') == 'block')
// $(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
// });
// $('div.content').eq(h + 1).focus();
//
// }
// }
// }
//
// }
// });
(function ($) {
$.fn.hasScrollBar = function () {
return this.get(0).scrollHeight > this.height();
};
})(jQuery);
// $(function () {
// $(".content").bind('scroll', function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// })
$('div.content').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta == 120) {
// $(this).text('scrolling up !');
//alert("up scrolling");
try{
var x=$(this).prev('h3');
var y=x.prev('div.content');
$('.content').attr('display', 'none');
$(this).prev('div.content').focus();
if ( $(this).innerHeight() >= $(this)[0].scrollHeight) {
y.prev('h3').click();
x.click();
}
x.prev('div.content').attr('display', 'block');
}catch(err){alert(err.message);}
}
else {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//alert('end reached');
$(this).next('h3').click();
$(this).prev('h3').click();
// $(this).next('div.content').attr('display', 'block');
$(this).blur();
$(this).next('div.content').focus();
}
}
});
// $('.content').bind('mousewheel', function (e) {
// if ($('div.content').hasScrollBar()) {
// $(this).delegate(".content", "scroll", function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// }
// else {
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
$(document).delegate("h3", "click", function () {
var totalDiv = $('div.content').length;
var h3Height = $('h3').height();
var f = $('h3.ui-state-active').length;
// if (!($(this).hasClass('ui-state-active'))) {
if (f != 1) {
$('div.content').each(function () {
if ($(this).css('display') == 'block')
$(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
});
}
});
以下是更新后的javascript，当您向上滚动时也会起作用，即它将关闭当前窗格并打开前一个窗格。这里是工作JSBIN演示 http://jsbin.com/viwojelico/2/edit?html ，js
Here is the updated javascript which will also work when you scroll up i.e it will close the current pane and open the previous pane. Here is the working JSBIN demo http://jsbin.com/viwojelico/2/edit?html,js
这篇关于手风琴与所有子标签单滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
