<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script src="../../codebase/ext/dhtmlxform_item_btn2state.js"></script>
    <style>
        /* toggle-style checkbox */
        /* enabled, not checked */
        .dhxform_obj_dhx_skyblue div.dhxform_img.btn2state_0 {
            background-image: url("imgs/toggle_off.png");
            width: 42px;
            height: 20px;
        }
        /* enabled, checked */
        .dhxform_obj_dhx_skyblue div.dhxform_img.btn2state_1 {
            background-image: url("imgs/toggle_on.png");
            width: 42px;
            height: 20px;
        }
        /* disabled, not checked */
        .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.btn2state_0 {
            background-image: url("imgs/toggle_off_dis.png");
            width: 42px;
            height: 20px;
        }
        /* disabled, checked */
        .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.btn2state_1 {
            background-image: url("imgs/toggle_on_dis.png");
            width: 42px;
            height: 20px;
        }
        
        /* star-style checkbox */
        /* enabled, not checked */
        .dhxform_obj_dhx_skyblue div.dhxform_img.star_0 {
            background-image: url("imgs/star_off.png");
            width: 19px;
            height: 19px;
        }
        /* enabled, checked */
        .dhxform_obj_dhx_skyblue div.dhxform_img.star_1 {
            background-image: url("imgs/star_on.png");
            width: 19px;
            height: 19px;
        }
        /* disabled, not checked */
        .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.star_0 {
            background-image: url("imgs/star_off_dis.png");
            width: 19px;
            height: 19px;
        }
        /* disabled, checked */
        .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.star_1 {
            background-image: url("imgs/star_on_dis.png");
            width: 19px;
            height: 19px;
        }
        
        /* common */
        /* fix label align a bit */
        .dhxform_obj_dhx_skyblue div.dhxform_item_label_right div.dhxform_label div.dhxform_label_nav_link {
            padding-top: 2px;
        }
    </style>
    <script>
var myForm,
formData;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-right",
        inputWidth: 42,
        inputHeight: 20
    }, {
        type: "label",
        label: "Toggle-style checkbox"
    }, {
        type: "btn2state",
        name: "a",
        value: "ctrl",
        label: "Switch to rectangular selection while Ctrl is pressed",
        checked: true
    }, {
        type: "btn2state",
        name: "b",
        value: "mops",
        label: "Advanced Mouse Operations",
        list: [{
            type: "btn2state",
            label: "Drag-n-drop in text area"
        }, {
            type: "btn2state",
            label: "Double-click drag joins non-alphanumeric characters"
        }, {
            type: "btn2state",
            label: "Quick copy using middle mouse button",
            checked: true
        }]
        }, {
        type: "label",
        label: "Star-style checkboxes",
        offsetTop: 20
    }, {
        type: "btn2state",
        cssName: "star",
        inputWidth: 17,
        inputHeight: 19,
        label: "Highlight current line",
        checked: true
    }, {
        type: "btn2state",
        cssName: "star",
        inputWidth: 17,
        inputHeight: 19,
        label: "Show marker position",
        checked: true
    }, {
        type: "btn2state",
        cssName: "star",
        inputWidth: 17,
        inputHeight: 19,
        label: "Show structure scope"
    }, {
        type: "btn2state",
        cssName: "star",
        inputWidth: 17,
        inputHeight: 19,
        label: "Show gutter",
        list: [{
            type: "btn2state",
            cssName: "star",
            inputWidth: 17,
            inputHeight: 19,
            label: "Line numbers",
            checked: true
        }, {
            type: "btn2state",
            cssName: "star",
            inputWidth: 17,
            inputHeight: 19,
            label: "Line selection area"
        }, {
            type: "btn2state",
            cssName: "star",
            inputWidth: 17,
            inputHeight: 19,
            label: "Code Folding"
        }]
        }];
    myForm = new dhtmlXForm("myForm", formData);
}</script>
 
 
    <div id="myForm" style="height:450px;"></div>