examples/example1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="icon" type="image/x-icon" href="../images/favicon.ico" />
    <!-- bitwrench.js library examples  
        (c) M A Chatterjee
        deftio <at> deftio <dot> com
        web   :  http:deftio.com/bitwrench
        github:  http:github.com/deftio/bitwrench
     -->
<script type="text/javascript" src="../bitwrench.js"></script>

</head>
<body class="bw-def-page-setup bw-font-sans-serif">
<script>
   
    //sample function to generate some sample table data.  
    //loops used instead of array.map() for those less familiar with javascript map/filter/reduce 
    function getRandomTableData(cols,rows) {
        var d = bw.multiArray(bw.random,[rows,cols]);  // 

        var headers = new Array(cols); // // make headers.  Note see docs in bw.makeHTMLTable for data w/o headers
        for (i=0; i< headers.length; i++)
            headers[i] = "Col-"+i;
         d.unshift(headers);  // in Javascript this oddly named function inserts an element at the beginning of an array.
        return d;
    }
    
    var content = 
    [
        ["h1",{},"Simple Example Page (browser version)"],
        ["p", {},"<strong>bitwrench.js version:</strong> " + bw.version()["version"]], 
        ["p",{},"This is a test for building completely programmatic content with bitwrench.js."],
        ["h2",{},"Some Sample Content"],
        ["div",{id:"test"},bw.loremIpsum(250)],
        ["h2",{},"More Sample Content but using only half width"],
        ["div",{"class":'bw-col-6'},bw.loremIpsum(300)],           // style:"background-image:url(../images/bitwrench.png) no-repeat 100% 100%;"}
        "<br>",
        ["p",{"class":"bw-col-6"},bw.loremIpsum(300)],          
        ["h2",{},"Sample Table Data"],
        ["p",{}, "The following table is autogenerated from a Javascript array of data.  The table is sortable by clicking on the column headers."],
        bw.htmlTable(getRandomTableData(12,8),{sortable:true}),
        ["h2",{},"Sample Content with 3 Columns"],
        {c:"Left col is left justified, center is center justiifed, right is right justified.<br><br>"},
        ["div",{"class":"bw-row"}, //create a row
            [
                ["div",{"class":"bw-col-4 bw-left "},bw.loremIpsum(500)], 
                ["div",{"class":"bw-col-4 bw-center bw-pad1"},bw.loremIpsum(700,33)], 
                ["div",{"class":"bw-col-4 bw-right "},bw.loremIpsum(500)],
            ],
        ],
        ["h2",{},"Tabbed Content"],
        bw.htmlTabs([["Tab1",bw.loremIpsum(500)],["Tab2",bw.loremIpsum(500,20)],["Tab3",bw.loremIpsum(500,50)]],{tab_atr:{style:""}}) ,
        "<br>",
        ['h2',{},"Accordian"],
        ["div",{},"An accordian allows expanding and collapsing of a list of dynamic content"],
        "<br>",

        //accordian done using bw.html accordian
        bw.htmlAccordian([
            ["Accordian 1",bw.loremIpsum(500,4)],
            ["Accordian 2",bw.loremIpsum(500,5),{show:false}],
            ["Accordian 3",bw.htmlTabs([["Inner Tab1",bw.loremIpsum(500,10)],["Inner Tab2",bw.loremIpsum(500,20)],["Inner Tab3",bw.loremIpsum(500,50)]])],
            ["Accordian 4",bw.loremIpsum(500,4),{show:true}]
            ]
            ,{ atr_h: {class:"bw-thm-dark"},atr_c:{"style": "color: red "}}
            ),
        "<br><br>"

    ];

    // make the content go live since we're in a browser.  Note that if we were on node we could just write out our content
    bw.DOMInsertElement("body",{c:content},true);

</script>
</body>
</html>