
心如碧海宽 有容乃大
身如荷莲洁 淤泥不染
因MAC软件下载站的页面需要同时提供软件简介、软件截图、软件下载等内容,势必会大幅增加页面高度。大概看了一下软件站的几个页面,以每张图片800PX的高度来说,8张截图大概就能达到10几屏的高度。如果用鼠标滚轮往下滑动大概要滑动5秒的时间才能正确的找到下载软件的正确位置。可想而知,这对于需要下载软件的用户体验是极其不友好的,太浪费时间不说,很有可能用户根本不需要看截图或者简介。
很长一段时间发现CSDN上的技术文章都是只显示一部分,想全部把文章内容显示出来的话需要用户自己点击一下“展开阅读全文”的按钮。这几天闲暇的时间想了一下关于这个功能的优缺点,一句话,毕竟用户体验高于一切,感觉还是可行的。演示?这就是啦!
找了一下相关资料,当然也顺便看了CSDN这部分的源码。整理代码如下,有喜欢的朋友可以直接拿去使用。CSS部分就不发出来了,自己抄一下举一反三即可。
1、PHP部分,将下面的代码复制到funcions.php
//内容展开功能
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '<div class="hide-box-content">'.$content.'</div><div class="hide-content-box hide-content-pos">
<div class="hide-box-control">
<a href="javascript:void(0)" class="hide-box-collapse btn btn-red-line" title="'.$title.'">展开全文<i class="iconfont icon-arrow-crude"></i></a>
</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');
function appthemes_add_collapse() {
?>
<script type="text/javascript">
if ( typeof QTags != 'undefined' ) {
QTags.addButton( 'collapse', '内容收缩按钮', '[collapseX title="说明文字"]','[/collapseX]' );//因本站已经开始使用,直接贴出短代码会直接启用展开全文的功能,所以加了X绕过编译,复制后请把大写的X去掉
}
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );
2、JS部分,将以下代码复制到你的js文件,依赖于jq
//内容展开功能
$('.hide-box-collapse').click(
function(){
$(this).parent().parent().prev('.hide-box-content').slideToggle('slow');
$(this).parent().parent().slideToggle('slow');
}
);
臭保安👮 一揽芳华 赞(2)
新主题内核评论测试