jQuery UI Widgets › Forums › Navigation › Expander › Links inside the Expander Header

Tagged: , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  sundareshnagaraj 12 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Links inside the Expander Header Posts
  • August 13, 2012 at 11:08 am Links inside the Expander Header #6745

    sundareshnagaraj
    Member

    Dear Sir/madam,

    In one of our projects, we need to place different links and buttons in the expander header. we tried providing “toggleBehaviour” for arrow we are succesfull. but the clickable area of arrow is very less.

    the header should work as it works today & should support adding any other controls like buttons/links in the header. when you click on the links/button it should trigger the respective hyperlink or actions.

    Let me know how to customize this?

    thanks in advance

    Regards
    Sundaresh LN

    August 13, 2012 at 1:04 pm Links inside the Expander Header #6752

    Dimitar
    Participant

    Hello Sundaresh LN,

    Here is an example with a button in the Header. When clicked, there is an alert. The jqxExpander is expanded/collapsed by doubleclicking the Header.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>jQuery Expander Sample</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxExpander
                $("#jqxexpander").jqxExpander({ width: 200, height: 100, toggleMode: 'dblclick' }); // The jqxExpander expands/collapses when the Header is doubleclicked
                $("#jqxbutton").jqxButton({ width: 75, height: 25 });
                $("#jqxbutton").click(function(){
                    alert("Button is clicked!");
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxexpander'>
            <!--Header-->
            <div>
                <button id="jqxbutton">Button</button>
            </div>
            <!--Content-->
            <div>
                Content
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    August 17, 2012 at 7:13 am Links inside the Expander Header #6822

    sundareshnagaraj
    Member

    Hi Dimitar,

    Thanks for the information. It solves our problem a bit but we are thinking of getting Expand/Collapse done on “single click’ instead of “double click” along with it we need button(s) & the respective actions to be triggered in the header.

    When I click on button(s) it should trigger the action assigned to it and the expander should not toggle (Expand/Collapse).

    I am just curious to know whether this is possible or not.

    Thanks in advance.

    Regards
    Sundaresh LN

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

You must be logged in to reply to this topic.