Skip to content
Snippets Groups Projects
first.html 3.61 KiB
Newer Older
Carsten  Rose's avatar
Carsten Rose committed
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
Carsten  Rose's avatar
Carsten Rose committed
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Carsten  Rose's avatar
Carsten Rose committed
<html lang="en">
<head>
Carsten  Rose's avatar
Carsten Rose committed
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Carsten  Rose's avatar
Carsten Rose committed
    <title>Getting Started</title>
    <!-- add one of the jQWidgets styles -->
    <link rel="stylesheet" href="../packages/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../packages/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../packages/jqwidgets/css/jqx.base.css">
    <link rel="stylesheet" href="../packages/jqwidgets/css/jqx.darkblue.css">
    <script src="../packages/jquery/js/jquery.min.js"></script>
    <script src="../packages/bootstrap/js/bootstrap.min.js"></script>
    <script src="../packages/jqwidgets/js/jqx-all.js"></script>
Carsten  Rose's avatar
Carsten Rose committed
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#myButton").jqxButton(
Carsten  Rose's avatar
Carsten Rose committed
                {width: '120px', height: '35px', theme: 'darkblue'}
Carsten  Rose's avatar
Carsten Rose committed
        );
    });
</script>
Carsten  Rose's avatar
Carsten Rose committed
<input type="button" value="Click Me" id='myButton'/>

Carsten  Rose's avatar
Carsten Rose committed
<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
Carsten  Rose's avatar
Carsten Rose committed
            $("#jqxWidget").jqxDropDownList({source: source, selectedIndex: 1});
Carsten  Rose's avatar
Carsten Rose committed

Carsten  Rose's avatar
Carsten Rose committed
            $("input[name=fruit]").click(function (evt) {
Carsten  Rose's avatar
Carsten Rose committed
                var data = [

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

                ];

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

            });

Carsten  Rose's avatar
Carsten Rose committed
            var data = [{
                "empName": "test",
                "age": "67",
                "department": {"id": "1234", "name": "Sales"},
                "author": "ravi"
            },
Carsten  Rose's avatar
Carsten Rose committed
                {"empName": "test2"}
            ];

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

Carsten  Rose's avatar
Carsten Rose committed
            $("#inputAdapter").jqxDropDownList({
                source: dataAdapter,
                placeHolder: "Enter text here",
                displayMember: "empName"
            });
Carsten  Rose's avatar
Carsten Rose committed
        });

    </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>