View file jQuery-gridmanager-master/demo/customcontrols.html

File size: 2.54Kb 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Simple - Gridmanager with Custom Controls</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  

    <link href="css/bootstrap.css" rel="stylesheet">    
    <link href="../dist/css/jquery.gridmanager.css" rel="stylesheet">  
    <link href="css/demo.css" rel="stylesheet">  
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 
    <script src="js/jquery.js"></script> 
    <script src="js/jquery-ui.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <script src="../dist/js/jquery.gridmanager.js"></script> 
 
  </head>
<body> 
  
<div class="container">  
    <div id="mycanvas">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6 column">
                <p>Awaiting Content</p>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6 column" data-gm-button-test_callback="window">
                <p>Awaiting Content</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6 column">
                <p>Awaiting Content</p>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6 column">
                <p>Awaiting Content</p>
            </div>
        </div>
    </div> 
</div> 
 
<!--================== JS ================--> 
<script> 
$(document).ready(function(){  
    $("#mycanvas").gridmanager({
        debug:1,  
        customControls: {
            global_row: [{ callback: 'test_callback', loc: 'bottom', btnLabel: 'row btn' }],
            global_col: [{ callback: 'test_callback', loc: 'top' }]
        },
        filterCallback: my_filter_func
    });
});

function test_callback(container, btnElem) {
    alert('hello world! from custom control');
}

function my_filter_func(templateGrid, isInit) {
    if(isInit) {
        // when in edit mode (init) this section will run
        templateGrid.find('.row').each(function(i, el) {
            $(el).addClass('my-class');
        });
    } else {
        // when viewing the source or in preview mode (deinit) this section will run
        templateGrid.find('.my-class').each(function(i, el) {
            $(el).removeClass('my-class');
        });
    }
}
</script> 
</body>
</html>