CODEWITHSUNDEEP
jquery-ui
mughees ilyas
mughees ilyas

Reputation: 526

how to add url on jquery ui object

http://jsfiddle.net/bcAH2/5/

i am working on a simple project there are 12 objects that are sort able using jquery ui how can i add link behind each block and enable it so if i double click it the link open in new tab 

<ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default four">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ul>

and the jquery function obviously

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

Upvotes: 0

Views: 89

Answers (1)

Ian A
Ian A

Reputation: 6128

You can add the URLs to each li element as follows (see here for details on HTML5 custom attributes):

<ul id="sortable">
    <li class="ui-state-default" data-href="http://www.google.co.uk">1</li>
    <li class="ui-state-default" data-href="http://www.bbc.co.uk">2</li>
    <li class="ui-state-default" data-href="http://www.yahoo.co.uk">3</li>
    ...

Then use the .dblclick() function in jQuery to capture the double click event, retrieve the URL behind the block and navigate to the URL:

$( "#sortable li" ).dblclick(function() {
    window.open( $(this).attr('href') );
});

See here for a Fiddle

Upvotes: 1

Related Questions