JSFiddle - React, Tailwind, and code Playground

by cilex

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxWidget'>
    <div style='margin: 20px;'>Right Click on the Tabs widget to open the Context Menu</div>
    <div id='jqxMenu'>
        <ul>
            <li>Add tab</li> 
            <li>Close tab</li> 
            <li>Disable tab</li> 
        </ul> 
    </div>
    <div id='jqxTabs'>
        <ul style="margin-left: 30px;">
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
        </ul>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

JavaScript

$('#jqxTabs').jqxTabs({ width: 300, height: 100, position: 'top', reorder: true });

            var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '80px', autoOpenPopup: false, mode: 'popup'});

            $("#jqxMenu").bind('itemclick', function(event)

             {

                   var item = $(event.args).text();

                   switch (item)

                   {

                        case "Add tab":

                      $('#jqxTabs').jqxTabs('addLast', 'Sample title', 'Sample content');

                             break;                       

                       case "Disable tab":

                          var selectedItem = $('#jqxTabs').jqxTabs('selectedItem');

                          $('#jqxTabs').jqxTabs('disableAt', selectedItem); 

                             break;

                         case "Close tab":

                          var selectedItem = $('#jqxTabs').jqxTabs('selectedItem');

                         var items = $('#jqxTabs').jqxTabs('length');

                           if (items > 1 )

                          $('#jqxTabs').jqxTabs('removeAt', selectedItem);

                             break;

                   }

             });

                // open the context menu when the user presses the mouse right button.

                $("#jqxTabs").bind('mousedown', function (event) {

                    var rightClick = isRightClick(event);

                    if (rightClick) {

                        var scrollTop = $(window).scrollTop();

                        var scrollLeft = $(window).scrollLeft();   

         

                        contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);

                        return false;

                    }

                });



                // disable the default browser's context menu.

                $(document).bind('contextmenu', function (e) {

                   ...