[supportParticipant]

Hi Fedor,

In your scenario, you can do the following:

1. Add the HTML markup required for creating the jqxTabs.

       <div id='jqxTabs'>
            <ul>
                <li>Tab 1</li>
                <li>Tab 2</li>     
            </ul>
            <div id='jqxtabs-1'>
            </div>
            <div id='jqxtabs-2'>  
            </div>        
        </div> 

2. Create the jqxTabs.

$('#jqxTabs').jqxTabs({ width: 550, height: 240 });

3. Bind to the ‘selected’ event. In the event handler, find the selected tab’s panel and load its content dynamically.

$('#jqxTabs').bind('selected', function (event) {
    var item = 1 + event.args.item;
    var panel = $('#jqxtabs-' + item);
    panel[0].innerHTML = "New Content " + item;
});

Please feel free to contact us, if you have any additional questions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[supportParticipant]

Hi Alec,

You can associate a tooltip to each list item by setting the title option.

For example:

var source = [
    { html: "Item1", title: 'Item1' },
    { html: "Item2", title: 'Item2' },
    { html: "Item3", title: 'Item3' },
    { html: "Item4", title: 'Item4' },
    { html: "Item5", title: 'Item5' },
];
// Create a jqxListBox
$("#jqxWidget").jqxListBox({ source: source, width: '200', height: '250px'}); 

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[supportParticipant]

Hi Stephane,

To change the jqxRepeatButton’s repeat interval, use the following:

$("#jqxButton").jqxRepeatButton({delay: 10, width: '200', height: '30');

Please feel free to write us, if you have any additional questions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[supportParticipant]

Hi Joel,

I’d like to ask you to send us (if applicable) the ‘dump’ sample to support@jqwidgets.com because we would like to test and debug it locally.

Best Regards,
Peter Stoev

jQWidgets Team
http://jqwidgets.com

[supportParticipant]

Hi Joel,

I implemented a small demo for you with the jqxMenu widget. The demo shows how to get the image’s ID when the user right clicks on a table. Each image is in a separate table cell as in the code you sent us.

Online Sample: jquery-context-menu

Download: jquery-context-menu.zip

Best Regards,
Peter Stoev

jQWidgets Team
http://jqwidgets.com

[supportParticipant]

Hi Joel,

As the image is inside the LI element, you can get it using the jQuery find function and passing ‘img’ as parameter.

For example:

        $('#jqxMenu').bind('itemclick', function (event) {
                var element = event.args;
                var $img = $(element).find('img');
                if ($img.length > 0) {
                    var imgid = $img[0].id;
                }
            });

Hope this helps you.

Best Regards,
Peter Stoev

jQWidgets Team
http://jqwidgets.com

[supportParticipant]

Hi joel,

The ‘itemclick’ event allows you to get the clicked LI element. To get its id, you can use: var id = clickedElement.id;

 $('#jqxMenu').bind('itemclick', function (event) {
      var clickedElement = event.args;
      var id = clickedElement.id;
});

You can also trigger the ‘mousedown’ event of the Menu’s LI elements. The event.target returns the element that was clicked. The code should be added before the initialization of the jqxMenu.

$('#jqxMenu').find('li').bind('mousedown', function (event) {
       var element = event.target;
});

Best Regards,
Peter Stoev

jQWidgets Team
http://jqwidgets.com

[supportParticipant]

Hi Troy,

The requested feature is currently not implemented, but I added it to our TO DO list and we will definitely consider implementing it for a future version of our product. You can keep an eye on our Roadmap.

You can use this workaround as a temporary solution until we implement the feature:

1. Add the HTML markup for the unordered list.

        <ul id='unorderedlist'>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>

2. Create an Array object and Iterate through the LI elements saving each LI element’s text in the array.

var items = new Array();
$.each($($.find('#unorderedlist')).find('li'), function () {
    items[items.length] = $(this).text();
});

3. Set the source property to point to the items array.

$("#jqxWidget").jqxDropDownList({ source: items, selectedIndex: 0, width: '200', height: '25'});

Best Regards,
Peter

[supportParticipant]

Hi rafi,

The jqxTree Items “Drag and Drop” featue is in our plans and we will definitely implement it in a future release and when we schedule it for a specific release, we will put it in our Roadmap. We will also update you on this post when the feature is implemented.

Best Regards,
Ivan Atanasov

[supportParticipant]

Hi kathiduranc,

In order to handle the “valuechanged” event, you can use the following:

$('#jqxprogressbar').bind('valuechanged', function (event) {
                alert("Value: " + event.currentValue);
});

Please do not hesitate to write us, if you have any questions.

Best Regards,
Ivan Atanasov

[Author]

Posts