http://jqueryui.com/demos/sortable/#portlets
在上面的链接中,有一些称为 portlet 的对象。我想要的是如何让 portlet 在默认情况下以最小化方式启动。
是否有任何可能的方法使其在初始视图中最小化?
http://jqueryui.com/demos/sortable/#portlets
在上面的链接中,有一些称为 portlet 的对象。我想要的是如何让 portlet 在默认情况下以最小化方式启动。
是否有任何可能的方法使其在初始视图中最小化?
如果您直接使用他们的示例源代码,那么您只需要更新
.portlet-content { padding: 0.4em; }
至
.portlet-content { display:none; padding: 0.4em; }
和
.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
至
.prepend( "<span class='ui-icon ui-icon-plusthick'></span>")
你有没有尝试过这样的事情?
$(function() {
$( ".portlet-header" ).each(function(){
$(this).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
$(this).parents( ".portlet:first" ).find( ".portlet-content" ).hide();
});
});
受 jaredhoyt 的启发,我正在使用以下内容:
<style>
部分添加
.close { display:none; padding: 0.4em; }
<script>
部分添加
$( ".closehead" ).prepend( "<span class='ui-icon ui-icon-plusthick'></span>");
<div class="portlet-content close" id="detailed2">
<div class="portlet-header closehead">Details</div>
最大化在页面上添加;
<div class="portlet-widgets">
<a data-toggle="collapse" data-parent="#accordion1" href="#portlet1"><i class="ion-minus-round"></i></a>
</div>
<div id="portlet1" class="panel-collapse collapse in"></div>
尽量减少在页面上的添加;
<div class="portlet-widgets">
<a data-toggle="collapse" data-parent="#accordion2" href="#portlet2" class="collapsed"><i class="ion-minus-round"></i></a>
</div>
<div id="portlet2" class="panel-collapse collapse"></div>
尝试这个
$(document).ready(function(){
var h = $('#action').parents(".header");
var c = h.next('.porlets-content');
var p = h.parent();
c.slideToggle();
p.toggleClass('closed');
});
“action”是包含最小化portlet 按钮的HTML 元素的ID。
看看我下面的例子:
<div id="action" class="actions">
<a href="#" class="minimize"><i class="fa fa-chevron-down"></i></a>
</div>