Skip to content
Snippets Groups Projects
first.html 3.42 KiB
Newer Older
Carsten  Rose's avatar
Carsten Rose committed
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Getting Started</title>
    <!-- add one of the jQWidgets styles -->
    <link rel="stylesheet"
          href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet"
          href="jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    <!-- add the jQuery script -->
    <script type="text/javascript" src="jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <!-- add the jQWidgets framework -->
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqx-all.js"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#myButton").jqxButton(
                { width: '120px', height: '35px', theme: 'darkblue' }
        );
    });
</script>
<input type="button" value="Click Me" id='myButton' />
<div id='content'>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                "Affogato",
                "Americano",
                "Bicerin",
                "Breve",
                "Café Bombón",
                "Café au lait",
                "Caffé Corretto",
                "Café Crema",
                "Caffé Latte",
                "Caffé macchiato",
                "Café mélange",
                "Coffee milk",
                "Cafe mocha",
                "Cappuccino",
                "Carajillo",
                "Cortado",
                "Cuban espresso",
                "Espresso",
                "Eiskaffee",
                "The Flat White",
                "Frappuccino",
                "Galao",
                "Greek frappé coffee",
                "Iced Coffee",
                "Indian filter coffee",
                "Instant coffee",
                "Irish coffee",
                "Liqueur coffee"
            ];
            // Create a jqxDropDownList
            $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 1});

            $("input[name=fruit]").click(function(evt) {
                var data = [

                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Affogato",
                    "Americano",
                    "Bicerin"

                ];

                $("#jqxWidget").jqxDropDownList({source: data, selectedIndex: 3});

            });

            var data = [{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
                {"empName": "test2"}
            ];

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'empName' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#inputAdapter").jqxDropDownList({source: dataAdapter, placeHolder: "Enter text here", displayMember: "empName"});
        });

    </script>
    <div id='jqxWidget'>
    </div>
    <div id="inputAdapter">

    </div>
    <div>
        <input type="radio" name="fruit" value="apple"> Apple
        <br>
        <input type="radio" name="fruit" value="prune"> Prune
    </div>
</div>

</body>
</html>