corrade-http-templates – Rev 57

Subversion Repositories:
Rev:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Sortable - Portlets</title>
        <link rel="stylesheet" href="../../themes/base/all.css">
        <link rel="stylesheet" href="../demos.css">
        <style>
        body {
                min-width: 520px;
        }
        .column {
                width: 170px;
                float: left;
                padding-bottom: 100px;
        }
        .portlet {
                margin: 0 1em 1em 0;
                padding: 0.3em;
        }
        .portlet-header {
                padding: 0.2em 0.3em;
                margin-bottom: 0.5em;
                position: relative;
        }
        .portlet-toggle {
                position: absolute;
                top: 50%;
                right: 0;
                margin-top: -8px;
        }
        .portlet-content {
                padding: 0.4em;
        }
        .portlet-placeholder {
                border: 1px dotted black;
                margin: 0 1em 1em 0;
                height: 50px;
        }
        </style>
        <script src="../../external/requirejs/require.js"></script>
        <script src="../bootstrap.js">
                $( ".column" ).sortable({
                        connectWith: ".column",
                        handle: ".portlet-header",
                        cancel: ".portlet-toggle",
                        placeholder: "portlet-placeholder ui-corner-all"
                });

                $( ".portlet" )
                        .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
                        .find( ".portlet-header" )
                                .addClass( "ui-widget-header ui-corner-all" )
                                .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

                $( ".portlet-toggle" ).on( "click", function() {
                        var icon = $( this );
                        icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
                        icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
                });
        </script>
</head>
<body>

<div class="column">

        <div class="portlet">
                <div class="portlet-header">Feeds</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>

        <div class="portlet">
                <div class="portlet-header">News</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>

</div>

<div class="column">

        <div class="portlet">
                <div class="portlet-header">Shopping</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>

</div>

<div class="column">

        <div class="portlet">
                <div class="portlet-header">Links</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>

        <div class="portlet">
                <div class="portlet-header">Images</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>

</div>

<div class="demo-description">
<p>
        Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
        option to allow sorting between columns.
</p>
</div>
</body>
</html>