Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 84 lines (67 sloc) 2.851 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Megalist</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <script src="../lib/jquery-1.7.1.js"></script>
    <script src="../src/megalist.js"></script>
    <link href="../src/megalist.css" rel="stylesheet" type="text/css" >
    
    <link href="../lib/google-code-prettify/prettify.css" rel="stylesheet">
    <script src="../lib/google-code-prettify/prettify.js"></script>
    <script src="../lib/raf.js"></script>
      
    <script>
        $(document).ready( function() {
            $('#myList2').megalist();
            $('#myList2').megalist('setDataProvider', createDataProvider() );
            $('#myList2').megalist('setLabelFunction', listItemLabelFunction );
            $('#myList2').on('change', listChangeHandler);
        });

        function listChangeHandler( event ) {
            var message = "selected index: " + event.selectedIndex + "\n" +
                            "selected item: " + event.srcElement.get()[0].outerHTML ;
            alert( message );
        }
        
        function createDataProvider() {
            var result = [];
            for ( var x=0; x<100000; x++ ) {
                result.push(x);
            }
            return result;
        }
        
        function listItemLabelFunction( item ) {
            return "Decimal: " + item.toString() + ", Hex: " + item.toString(16);
        }
        
    </script>
      
  </head>

  <body >

      <h3>Specifying a Data Provider Array</h3>
      <p>This list has <strong style="color:red">100,000</strong> items in the data provider array:</p>
      <p><div class="megalist" id="myList2" ></div></p>
      <p>First, declare the basic HTML container &lt;div&gt;, then create the list, then add a data provider array and optional label function.</p>
      <h4>Markup</h4>
      <pre class="prettyprint linenums">&lt;div class="megalist" id="myList2" &gt;&lt;/div&gt;</pre>
      <h4>Script</h4>
      <pre class="prettyprint linenums">function listChangeHandler( event ) {
    var message = "selected index: " + event.selectedIndex + "\n" +
                    "selected item: " + event.srcElement.get()[0].outerHTML ;
    alert( message );
}

function createDataProvider() {
    var result = [];
    for ( var x=0; x<100000; x++ ) {
        result.push(x);
    }
    return result;
}

function listItemLabelFunction( item ) {
    return "Decimal: " + item.toString() + ", Hex: " + item.toString(16);
}

$('#myList2').megalist()
$('#myList2').megalist('setDataProvider', createDataProvider() )
$('#myList2').megalist('setLabelFunction', listItemLabelFunction )
$('#myList2').on('change', listChangeHandler)</pre>



  </body>
</html>
Something went wrong with that request. Please try again.