Question

http://jqueryui.com/demos/sortable/#portlets

在上面的链接中有一些称为portlet的对象。我想要的是如何使portlet默认启动为最小化。

是否有任何可能的方法使其在初始视图中以最小化方式启动？

Answer 1

如果您要直接使用他们的示例源代码，那么您只需要更新

.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>")

Answer 2

你尝试过这样的事吗？

$(function() {
    $( ".portlet-header" ).each(function(){
    $(this).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
    $(this).parents( ".portlet:first" ).find( ".portlet-content" ).hide();
    });
});

Answer 3

jaredhoyt启发我使用以下内容：

进入<style>部分添加 .close { display:none; padding: 0.4em; }
进入<script>部分添加 $( ".closehead" ).prepend( "<span class='ui-icon ui-icon-plusthick'></span>");
将值关闭添加到要折叠的每个portlet内容的类中 <div class="portlet-content close" id="detailed2">
将值 closehead 添加到要为其设置的每个portlet-header的类中加上thick <div class="portlet-header closehead">Details</div>

Answer 4

试试这个

$(document).ready(function(){
    var h = $('#action').parents(".header");
    var c = h.next('.porlets-content');
    var p = h.parent();
    c.slideToggle();
    p.toggleClass('closed');
});

＆＃34;动作＆＃34;是包含用于最小化portlet的按钮的HTML元素的ID。

请看下面的例子：

<div id="action" class="actions">
  <a href="#" class="minimize"><i class="fa fa-chevron-down"></i></a>
</div>

Answer 5

最大化页面上的添加;

<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>

默认情况下如何最小化JQuery UI Portlet

5 个答案: