jQWidgets Forums

jQuery UI Widgets › Forums › Lists › DropDownList › jqxdropdownlist autoClose

Tagged: , , ,

This topic contains 17 replies, has 3 voices, and was last updated by  Peter Stoev 11 years, 4 months ago.

Viewing 3 posts - 16 through 18 (of 18 total)
1 2
  • Author
    jqxdropdownlist autoClose Posts
  • January 15, 2014 at 7:12 am jqxdropdownlist autoClose #47881

    Peter Stoev
    Keymaster

    Hi David,

    Why is it necessary to detect that? Can’t you just call it when you click on a “tab”.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    January 15, 2014 at 10:55 pm jqxdropdownlist autoClose #47929

    dloo
    Participant

    Hi Peter,

    I have a lot of dropdown lists and the tabs code is on another page, it is not code friendly to start tracking all the dropdown lists and calling the “close” methods when I move off the tabs. I am looking for a more self-maintaining widget approach.

    Thanks!
    David

    January 16, 2014 at 5:34 am jqxdropdownlist autoClose #47931

    Peter Stoev
    Keymaster

    Hi David,

    jqxDropDownList is automatically closing its DropDown in jQWidgets 3.1.0 when you click on a Tab even if you do not write any additional code.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo shows how to integrate jqxTabs with other widgets.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
           

            // init widgets.
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        $("#list1").jqxDropDownList({ width: 200, height: 25, source: ["Item 1", "Item 2", "Item 3"], autoDropDownHeight: true });
                         break;
                    case 1:
                        $("#list2").jqxDropDownList({ width: 200, height: 25, source: ["Item 1", "Item 2", "Item 3"], autoDropDownHeight: true });
                        break;
                }
            }

            $('#jqxTabs').jqxTabs({ width: 600, height: 560,  initTabContent: initWidgets });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">
                    <div style="height: 20px; margin-top: 5px;">
                        <div style="float: left;">
                            <img width="16" height="16" src="../../images/catalogicon.png" />
                        </div>
                        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                            US Indexes</div>
                    </div>
                </li>
                <li>
                    <div style="height: 20px; margin-top: 5px;">
                        <div style="float: left;">
                            <img width="16" height="16" src="../../images/pieicon.png" />
                        </div>
                        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                            NASDAQ compared to S&P 500</div>
                    </div>
                </li>
            </ul>
            <div style="overflow: hidden;">
                <div id="list1">
                </div>
            </div>
            <div style="overflow: hidden;">
                <div id='list2'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 3 posts - 16 through 18 (of 18 total)
1 2

You must be logged in to reply to this topic.