[英]Place a button when text is overflowing
So say i have a <div>
with a long text inside and defined height, and when text overflows that div height i want to display ...
at the end of the text, so this is easy with a little css, but i want something a bit more advanced. 所以说我有一个
<div>
,里面有一个长文本和定义的高度,当文本溢出我要显示的div高度时...
在文本的末尾,所以这很容易用一点css,但我想要有点先进的东西。
What i want is to have that ...
and a button (Show more)
, and i kind of made it, but it's quite a dirty hack and i know there should be better solution, anyways please take a look a this fiddle: http://jsfiddle.net/DgBR2/1/ 我想要的是
...
和一个按钮(Show more)
,我有点做,但它是一个非常肮脏的黑客,我知道应该有更好的解决方案,反正请看看这个小提琴: http ://jsfiddle.net/DgBR2/1/
Basically i just floated another div with white background on top of the text, but if i would want to change that text height or something else this would create problems in the future, so i want something better. 基本上我只是在文本顶部浮动另一个白色背景的div,但如果我想要改变文本高度或其他东西,这将在未来产生问题,所以我想要更好的东西。
Revised 11/07/2012 修订于11/07/2012
Robust Text Overflow Slider 强大的文本溢出滑块
Features: 特征:
1. Auto adjusts for font size 1.自动调整字体大小
2. Auto Adjusts for 'Show More / Show Less' Buttons 2.自动调整“显示更多/显示更少”按钮
3. Easily Change Animation Speed 3.轻松改变动画速度
4. Easily Change 'Show More / Show Less' Button Spacing 4.轻松更改“显示更多/显示更少”按钮间距
5. Easily Choose Which side the 'Show More / Show Less' Displays On 5.轻松选择“显示更多/显示更少”显示在哪一侧
6. Easily Set how many Lines of Text should initially appear 6.轻松设置最初应显示的文本行数
JQuery JQuery的
//Editable Values
var lines = 5; //Choose how many lines you would like to initially show
var buttonspacing = 7; //Choose Button Spacing
var buttonside = 'right'; //Choose the Side the Button will display on: 'right' or 'left'
var animationspeed = 1000; //Choose Animation Speed (Milliseconds)
//Do not edit below
var lineheight = $('.text').css("line-height").replace("px", "");
startheight = lineheight * lines;
$('.text_container').css({'height' : startheight });
var buttonheight = $('.button').height();
$('div.container').css({'padding-bottom' : (buttonheight + buttonspacing ) });
if(buttonside == 'right'){
$('.button').css({'bottom' : (buttonspacing / 2), 'right' : buttonspacing });
}else{
$('.button').css({'bottom' : (buttonspacing / 2), 'left' : buttonspacing });
}
$('.open').on('click', function(){
var newheight = $(this).parent('div.container').find('div.text').height();
$(this).parent('div.container').find('div.text_container').animate({'height' : newheight }, animationspeed );
$(this).hide().siblings('.close').show();
});
$('.close').on('click', function(){
var h = $(this).parent('div.container').find('div.text').height();
$(this).parent('div.container').find('div.text_container').animate({'height' : startheight }, animationspeed );
$(this).hide().siblings('.open').show();
});
$('div.container').each(function(){
if( $(this).find('div.text').height() >= $(this).find('div.text_container').height() ){
$(this).find('.button.open').show();
}
});
HTML HTML
<div class="container">
<div class="text_container">
<div class='text'>
// Text goes Here
</div>
</div>
<div class='button open'>...Show More</div>
<div class='button close'>...Show Less</div>
</div>
CSS CSS
.button {position:absolute; z-index:5; display:none; cursor:pointer; color:#555555;}
.close {display:none; }
.open {display:none;}
.container{
width:200px;
overflow:hidden;
border:1px solid #cacaca;
border-radius:5px;
font-size:12px;
position:relative;
margin:auto;
padding:10px 10px 0px 10px;
float:left;
margin:5px;
}
.text_container{
height:105px;
overflow:hidden;
}
.text {}
To make it more robust, you can simply remove the set height, rather than setting a new height. 为了使其更加健壮,您可以简单地移除设定高度,而不是设置新的高度。 This will allow the container to grow to however big its contents are.
这将使容器生长到其内容的大小。
Also, I'd recommend using a separate class like .collapsed
or similar, and just toggling that class instead of setting the CSS height value back and forth between some value and auto
. 另外,我建议使用像
.collapsed
或类似的单独的类,只是切换该类而不是在某个值和auto
之间来回设置CSS高度值。
Here's a your edited fiddle: http://jsfiddle.net/DgBR2/9/ 这是你编辑过的小提琴: http : //jsfiddle.net/DgBR2/9/
new JS: 新JS:
$(".enlarge").click(function(){
$(this).siblings('.text').toggleClass('collapsed');
});
new CSS: 新CSS:
.container{
width:200px;
border:1px solid #cacaca;
font-size:12px;
position:relative;
margin:auto;
padding: 10px 10px 26px;
}
.text.collapsed {
height: 100px;
overflow: hidden;
}
.enlarge{
position:absolute;
height: 21px;
bottom: 0;
left: 0; right: 0; text-align: center;
color:blue;
}
OK, I'm editing my answer to preserve the animation. 好的,我正在编辑我的答案来保存动画。 This solution is a bit trickier and involves three key things:
这个解决方案有点棘手,涉及三个关键的事情:
Getting the height
value of .collapsed
-classed elements when your element is NOT collapsed, so that you can collapse the element down to the desired height without using a magic number. 在元素未折叠时获取
.collapsed
-classed元素的height
值,以便您可以在不使用幻数的情况下将元素折叠到所需的高度。 You do this by creating a new element and giving it the .collapsed
class, then checking the height of that new (but not rendered) element. 您可以通过创建一个新元素并为其赋予
.collapsed
类,然后检查该新元素(但未呈现)的高度来实现此目的。
Getting the full height of the expanded element when it IS collapsed, so that you can animate it to the new height - because .animate()
does not work with the auto
value. 在折叠时获取展开元素的完整高度,以便您可以将其设置为新高度 - 因为
.animate()
不适用于auto
值。
Removing the set height
value after the animation has completed, so that your text element has no fixed height and will expand/shrink automatically if you later change its content. 在动画完成后删除设置的
height
值,这样您的文本元素就没有固定的高度,如果稍后更改其内容,它将自动展开/缩小。
Here is your new animation-enabled fiddle: http://jsfiddle.net/DgBR2/13/ 这是你的新动画小提琴: http : //jsfiddle.net/DgBR2/13/
And the JS looks like this: JS看起来像这样:
$(".enlarge").click(function(){
var btn = $(this),
text = btn.siblings('.text'),
collapsed = text.hasClass('collapsed'),
// predict the height that the element SHOULD be: its full (scroll) height if it is currently collapsed, or the value of the 'height' CSS property that it will have when collapsed if it is not currently collapsed
height = collapsed ? text[0].scrollHeight : $('<div>', {'class': 'text collapsed'}).css('height');
text.animate({'height': height}, 400, function() {
// do all further changes after the animation completes
text.toggleClass('collapsed'); // we use this class for our animation logic, so we need to toggle it correctly
text.css('height', ''); // we don't want the text element to have a fixed height, so remove whatever height we set earlier
btn.text(collapsed ? 'Show Less' : '...(Show More)');
});
});
A final edit to make it even more modular: remove the expander divs from the markup (as they are not semantic) and add them in the JS. 最后编辑使其更加模块化:从标记中删除扩展器div(因为它们不是语义)并将它们添加到JS中。 This approach also ensures 1) that text containers whose content does not overflow will not have expander buttons 2) that you can correctly hide/show the expander buttons when you add new text divs or change the content of existing text divs.
这种方法还确保1)内容不溢出的文本容器不会有扩展器按钮2)您可以在添加新文本div或更改现有文本div的内容时正确隐藏/显示扩展器按钮。
I'll just sketch the JS to show how it's changed from the previous iteration: 我将简单地描绘JS,以显示它是如何从上一次迭代中改变的:
// PSEUDOCODE
$(document).ready(function() {
var addExpander = function() {
if (this.scrollHeight <= collapsedHeight) {
// remove expander button if it exists
} else if (this /* contains no expander button */) {
// add the expander with its click function
}
};
// call it on all collapsed text divs currently in the document
$('.text.collapsed').each(addExpander);
// how to call it again after changing a text div's content:
addExpander.call(/* your changed div */);
});
working demo: http://jsfiddle.net/DgBR2/18/ 工作演示: http : //jsfiddle.net/DgBR2/18/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.