Dojo/Button, ComboBox,DropBox etc

4. Dojo Drop box

토폴로지 2013. 8. 8. 07:28

Drop box Code declarative

<!DOCTYPE HTML>

<html lang="en">

       <head>

                       <meta charset="utf-8">

                       <title>Demo: More Dijit Buttons</title>

                       <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css">

                       <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>

       </head>

       <body class="claro">

    <div id="dropDown" data-dojo-type="dijit/form/DropDownButton"

        data-dojo-props="iconClass: 'dijitIconApplication'">

        <span>DropDown</span>

        <div data-dojo-type="dijit/TooltipDialog">

            This is a TooltipDialog. You could even put a form in here!

        </div>

    </div>

    <script>

        // load requirements for declarative widgets in page content

        require(["dijit/form/DropDownButton", "dijit/TooltipDialog", "dojo/parser"]);

    </script>

       <body>

</html>

Table 10 Drop box Code Declarative

 

Drop box Code programmatic

<!DOCTYPE HTML>

<html lang="en">

       <head>

                       <meta charset="utf-8">

                       <title>Demo: More Dijit Buttons</title>

                       <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css">

       </head>

       <body class="claro">

                       <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config=" parseOnLoad: true"></script>

                       <body class="claro">

    <button id="dropDown"></button>

    <script>

        require([ "dijit/form/DropDownButton", "dijit/TooltipDialog"], function(DropDownButton, TooltipDialog) {

            var tooltip = new TooltipDialog({

                content: "This is a TooltipDialog. You could even put a form in here!"

            });

            var dropDownButton = new DropDownButton({

                iconClass: "dijitIconApplication",

                label: "DropDown",

                dropDown: tooltip

            }, "dropDown");

            dropDownButton.startup();

            tooltip.startup();

        });

    </script>

</body>

</html>

Table 11 Drop down Programmatic Code

 

코드 설명

Drop down은 버튼을 클릭했을 때에 다른 widget을 불러오는 것이 가능하다. Table 10,11 은 tooltip을 불러왔고,  Calendar나  ColorPalette 등을 불러올 수 있다. 그리고 불러오는 위젯에 대해서 제한 조건을 줄 수 있다. Table 12,13은 ColorPalette에 대한 예제이다.

DOCTYPE HTML>

<html lang="en">

       <head>

                       <meta charset="utf-8">

                       <title>Demo: More Dijit Buttons</title>

                       <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css">

                       <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>

       </head>

       <body class="claro">

 

 

    <button id="dropdown_default" value="color" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"noteIcon"'>

                       <span>Default (below)</span>

                       <span data-dojo-type="dijit/ColorPalette"

                                       data-dojo-props='palette:"3x4", onChange:function(val){ console.log(val); }'></span>

       </button>

 

    <script>

        // load requirements for declarative widgets in page content

        require(["dijit/form/DropDownButton", "dijit/TooltipDialog", "dojo/parser"]);

    </script>

       <body>

</html>

Table 12 Drop down ColorPalette declarative Code

<!DOCTYPE HTML>

<html lang="en">

                <head>

                                <meta charset="utf-8">

                                <title>Demo: More Dijit Buttons</title>

                                <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css">

                </head>

                <body class="claro">

                                <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>

                                <body class="claro">

    <button id="dropDown"></button>

    <script>

        require([ "dijit/ColorPalette", "dijit/form/DropDownButton", "dojo/domReady!"], function(ColorPalette, DropDownButton) {

            var palette = new ColorPalette({

               palette:"3x4"

            });

            var dropDownButton = new DropDownButton({

                iconClass: "dijitIconApplication",

                label: "DropDown",

                dropDown: palette

            }, "dropDown");

            dropDownButton.startup();

            paletee.startup();

        });

    </script>

</body>

                </body>

</html>

Table 13 Drop down ColorPaltte Programmtic Code

결과 화면



Figure 4 Table 10,11 결과 화면

반응형
저작자표시