?? GreyFile — Mystic File Browser

Current path: home/webdevt/cryptoimpot.fr/module/Application/view/application/apercu/

?? Go up: /home/webdevt/cryptoimpot.fr/module/Application/view/application

?? Viewing: index-ok.phtml

<?php
//$this->HeadLink()
//        ->appendStylesheet('https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css');
$this->headScript()
        ->appendFile('/dist/js/colResizable-1.6.min.js');
?>


<style>
    .scroll{
        overflow:scroll;
        max-width:100%;
        position:relative;
    }

</style>

<script type="text/javascript">
    $(function () {

        $("#normal").colResizable({
            liveDrag: true,
            gripInnerHtml: "<div class='grip'></div>",
            draggingClass: "dragging",
            resizeMode: 'fit'
        });

        $("#flex").colResizable({
            liveDrag: true,
            gripInnerHtml: "<div class='grip'></div>",
            draggingClass: "dragging",
            resizeMode: 'flex'
        });
        $("#overflow").colResizable({
            liveDrag: true,
            gripInnerHtml: "<div class='grip'></div>",
            draggingClass: "dragging",
            resizeMode: 'overflow'
        });

        $("#disabled").colResizable({
            liveDrag: true,
            gripInnerHtml: "<div class='grip'></div>",
            draggingClass: "dragging",
            resizeMode: 'overflow',
            disabledColumns: [2]
        });

    });
</script>


<div class="center" >

    <h3>Try to resize your browser to understand what is going on in this sample</h3>
    <br/>

    <p><strong>resizeMode: 'fit'</strong> table width adapts to the container width. Columns resize using their neighbour's width</p>
    <table id="normal" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th>header</th><th>header</th><th>header</th>
        </tr>
        <tr>
            <td class="left">cell</td><td>cell</td><td class="right">cell</td>
        </tr>
        <tr>
            <td class="left">cell</td><td>cell</td><td class="right">cell</td>
        </tr>
        <tr>
            <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
        </tr>																	
    </table>


    <p><strong>resizeMode: 'flex'</strong> columns are sized independently unless there is not enought space in the container</p>
    <table id="flex" width="50%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th>header</th><th>header</th><th>header</th>
        </tr>
        <tr>
            <td class="left">cell</td><td>cell</td><td class="right">cell</td>
        </tr>
        <tr>
            <td class="left">cell</td><td>cell</td><td class="right">cell</td>
        </tr>
        <tr>
            <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
        </tr>																	
    </table>


    <p><strong>resizeMode: 'overflow'</strong> columns are sized independently. Table width can exceed its container </p>
    <div class="scroll">
        <table id="overflow" width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <th>header</th><th>header</th><th>header</th>
            </tr>
            <tr>
                <td class="left">cell</td><td>cell</td><td class="right">cell</td>
            </tr>
            <tr>
                <td class="left">cell</td><td>cell</td><td class="right">cell</td>
            </tr>
            <tr>
                <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
            </tr>																	
        </table>
    </div>

    <p><strong>disabled columns:</strong> it can be specified whether some columns will not have resizing grip</p>
    <table id="disabled" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th>header</th><th>header</th><th class="disabled">disabled</th>
        </tr>
        <tr>
            <td class="left">cell</td><td>cell</td><td class="right disabled">disabled</td>
        </tr>
        <tr>
            <td class="left">cell</td><td>cell</td><td class="right disabled">disabled</td>
        </tr>
        <tr>
            <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right disabled">disabled</td>
        </tr>																	
    </table>
    <br/>


</div>	

• ?? index-ok.phtml | ?? Edit | ??? Delete
• ?? index.phtml | ?? Edit | ??? Delete