jQuery UI Widgets Forums Navigation Expander Links inside the Expander Header

This topic contains 2 replies, has 2 voices, and was last updated by  sundareshnagaraj 8 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Links inside the Expander Header #6745

    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

    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/

    Links inside the Expander Header #6822

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.