update related data pagination

This commit is contained in:
jack 2018-02-11 16:21:55 +08:00
parent 93d3903727
commit d337d780ce
3 changed files with 145 additions and 56 deletions

View File

@ -1,28 +1,30 @@
<?php if ($this->pageCount): ?>
<div class="pagination pagination-mini">
<ul>
<!-- Previous page link -->
<?php if (isset($this->previous)): ?>
<li><a href="javascript:void(0);" onclick="related(<?php echo $this->previous;?>)">&laquo;</a></li>
<?php else: ?>
<li class="disabled"><a href="javascript:;">&laquo;</a></li>
<?php endif; ?>
<!-- Numbered page links -->
<?php foreach ($this->pagesInRange as $page): ?>
<nav>
<ul class="pagination pagination-sm">
<!-- Previous page link -->
<?php if (isset($this->previous)): ?>
<li>
<a href="javascript:void(0);" onclick="related(<?php echo $this->previous;?>)"><span>&laquo; <span class="sr-only">(current)</span></span></a>
</li>
<?php else: ?>
<li class="disabled"><a href="javascript:void(0);"><span><span aria-hidden="true">&laquo;</span></span></a></li>
<?php endif; ?>
<!-- Numbered page links -->
<?php foreach ($this->pagesInRange as $page): ?>
<?php if ($page != $this->current): ?>
<li><a href="javascript:void(0);" onclick="related(<?php echo $page;?>)"><?= $page; ?></a></li>
<?php else: ?>
<li class="active"><a href="javascript:void(0);"><?= $page; ?></a></li>
<li class="disabled"><a href="javascript:void(0);"><span><span aria-hidden="true"><?= $page; ?></span></span></a></li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
<!-- Next page link -->
<?php if (isset($this->next)): ?>
<!-- Next page link -->
<?php if (isset($this->next)): ?>
<li><a href="javascript:void(0);" onclick="related(<?php echo $this->next;?>)">&raquo;</a></li>
<?php else: ?>
<li class="disabled"><a href="javascript:;">&raquo;</a></li>
<?php else: ?>
<li class="disabled"><a href="javascript:void(0);"><span><span aria-hidden="true">&raquo;</span></span></a></li>
<?php endif; ?>
</ul>
</nav>
<?php endif; ?>
</ul>
</div>
<?php endif; ?>

View File

@ -26,6 +26,7 @@
<div class="container">
<div class="col-lg-12">
<div class="content-left col-sm-8">
<div class="data-wrap" >
<div class="data-content">
<h2><?php echo $this->escape($md->title); ?></h2>
<?php if ($md->title_en) echo '<h3>'.$this->escape($md->title_en).'</h3>';?>
@ -60,6 +61,12 @@
</p>
</div>
<div class="unfold-field">
<div class="unflod-field_mask"></div>
<div class="unfold-field_text"><span>展开全文</span></div>
</div>
</div>
<div class="use-state">
<?php if ($this->mcitation && (count($this->mcitation)>1) ) : ?>
<hr />
@ -405,6 +412,20 @@ $(function() {
$('#show-list').click(function(e) {
method.filelist.get($(this).attr('rel'));
});
var unfoldField=document.querySelector(".unfold-field");
var wrapH=document.querySelector(".data-wrap").offsetHeight;
var wrap=document.querySelector(".data-wrap");
var contentH=document.querySelector(".data-content").offsetHeight;
if(contentH>wrapH){
unfoldField.style.display="block";
}
wrap.style.visibility="visible";
unfoldField.onclick=function(){
this.parentNode.removeChild(this);
wrap.style.maxHeight="100%";
wrap.style.visible="visible";
}
});
//ajax literature
function literature(page){

View File

@ -215,3 +215,69 @@ a.download-btn:hover{
font-size: 14px;
line-height: 32px;
}
.data-wrap{
max-height:600px; /*设置默认高度*/
overflow: hidden;
position:relative;
visibility: hidden;
}
.unfold-field{
display:none;
position:absolute;
font-size: 0;
bottom:0;
width:100%;
height:130px;
z-index: 3;
}
.unfold-field .unflod-field_mask {
height: 84px;
width: 100%;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff));
background-image: linear-gradient(-180deg,hsla(0,0%,100%,0),#fff);
}
.unfold-field_text{
cursor: pointer;
width:100%;
color: #406599;;
height:46px;
/*font-size: 0px;*/
line-height: 46px;
text-align: center;
background:#fff;
}
.unfold-field_text span{
display:inline-block;
font-size: 14px;
border: 1px solid #406599;
height:28px;
width: 140px;
text-align: center;
line-height: 28px;
margin-top: 16px;
}
.unfold-field_text span::after{
content:"";
vertical-align: middle;
background-size: contain;
background-repeat: no-repeat;
width: 9px;
height: 6px;
display: inline-block;
margin-left: 5px;
}
.relate-data-list ul li{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 26px;
margin: 20px 0;
}
.relate-data-list ul li a{
color: #959595;
text-decoration: none;
}