jQWidgets Forums

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

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

Author

How to click the tree, to increase and displays a new tab Posts

July 10, 2012 at 3:29 am How to click the tree, to increase and displays a new tab #5803

webiis

Member

Hi,

“jqxtree” on the left, “jqxmenu” on the top,”jqxtabs” on the right.

Click “jqxtree” or “jqxmenu”,
on the right “jqxtabs” to increase and show a new tab,
I don’t know how to do it.
Can you tell me?

July 10, 2012 at 6:03 am How to click the tree, to increase and displays a new tab #5811

Minko

Blocked

Hi Webiis,

here is an example how you can achieve this functionality:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.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/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tabs').jqxTabs({ width: 580, height: 200, position: 'top', showCloseButtons: true });
            $('#menu').jqxMenu();
            $('#tree').jqxTree();
            $('#tree').bind('select', function (e) {
                var element = $(e.args.element),
                    content = getContent(element[0]),
                    header = element.text();
                addTab(header, content);
            });
            $('#menu').bind('itemclick', function (e) {
                var element = $(e.args),
                    content = getContent(element[0]),
                    header = element.text();
                addTab(header, content);
            });
            function addTab(header, content) {
                if (!tabExists(header)) {
                    $('#tabs').jqxTabs('addLast', header, content);
                }
            }
            function tabExists(header) {
                return $('#tabs .jqx-tabs-title :contains(' + header + ')').length > 0;
            }
            function getContent(element) {
                var iframe = document.createElement('iframe');
                iframe.setAttribute('src', element.getAttribute('data-url'));
                iframe.style.width = '100%';
                iframe.style.height = '90%';
                iframe.style.borderWidth = '0px';
                return iframe.outerHTML;
            }
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="menu" style="margin-left: 15px;">
            <ul>
                <li data-url="http://jqwidgets.com/">jQWidgets</li>
                <li data-url="http://w3.org/">W3C</li>
                <li data-url="http://news.ycombinator.com/">IT news</li>
            </ul>
        </div>
        <div id="tree" style="float:left; margin: 15px; ">
            <ul>
                <li data-url="http://www.jqwidgets.com/jquery-widgets-demo/">jQWidgets Demos</li>
                <li data-url="http://jquery.com/">jQuery</li>
            </ul>
        </div>
        <div id='tabs' style="margin: 15px;">
            <ul>
                <li>Tab 1</li>
            </ul>
            <div>
                Tab 1 content
            </div>
        </div>
    </div>
</body>
</html>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

July 10, 2012 at 6:46 am How to click the tree, to increase and displays a new tab #5813

webiis

Member

Hi Minko,
Thanks for the support.
I am try your product, If your product comply with our functional, I will buy as soon as possible.
I am very satisfied with your service.

Best Wishes,
Webiis

Author

Posts

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

You must be logged in to reply to this topic.