jQuery 링크를 만드는 가장 효율적인 방법은 무엇입니까?

Question

그래서이 사이트는 here입니다. 페이지의 각 "타일"은 외부 페이지에 대한 책갈피입니다. 그러나 전통적인 앵커 태그를 사용하고 "타일"에 jQuery-ui 이동 및 크기 조정이 가능한 효과를 사용하면 문제가 발생했습니다.

타일이 재 배열 된 후에도 링크가 유지됩니다.

그래서 pure jQuery (또는보다 효율적인 경우 JavaScript) 솔루션을 사용해보아야합니다.

그냥 window.location과 jQuery의 .click()을 사용하고 싶습니다.하지만 기존의 jQuery 스크립트에 이것을 삽입하는 데 도움이 필요합니다.

사람이 작업을 수행하는 가장 효율적인 방법에 대한 제안이있는 경우

$(document).ready(function() { 

// We have a hidden field which knows if the tiles are editable (1) or not (2) now just let's make sure it is initiated with zero value because the startup state of button will be "Edit" 
$("#editable").val('0'); 

// Loop through the tiles by class 
$('.tile').each(function(){ 

    // Get the positions from cookies 
    var toppos = $.cookie('uiposy'+$(this).attr('id')); 
    var leftpos = $.cookie('uiposx'+$(this).attr('id')); 

    // Apply saved positions 
    $(this).css('top',toppos+'px'); 
    $(this).css('left',leftpos+'px'); 

    // Get the sizes from cookies 
    var sizew = $.cookie('uisizew'+$(this).attr('id')); 
    var sizeh = $.cookie('uisizeh'+$(this).attr('id')); 

    // Apply saved sizes 
    $(this).css('width',sizew+'px'); 
    $(this).css('height',sizeh+'px'); 
}); 

// Set the tiles as draggable 
$('.tile'). 
draggable({ 
    containment: '#content', 
    scroll: false, 
    // Watch out for drag action 
    stop: function (event, ui) { 
    // Store x/y positions in a cookie when they're dragged 
    $.cookie('uiposx'+$(this).attr('id'), ui.position.left, { path: '/', expires: 7 }); 
    $.cookie('uiposy'+$(this).attr('id'), ui.position.top, { path: '/', expires: 7 }); 
    } 
}); 

// Set the tiles as resizable 
$('.tile').resizable({ 
    maxHeight: 200, 
    maxWidth: 200, 
    minHeight: 100, 
    minWidth: 100, 
    // Watch out for resize action 
    stop: function (event, ui) { 
    // Store width/height values in a cookie when they're resized 
    $.cookie('uisizew'+$(this).attr('id'), ui.size.width, { path: '/', expires: 7 }); 
    $.cookie('uisizeh'+$(this).attr('id'), ui.size.height, { path: '/', expires: 7 }); 
    } 
}); 

// Make resiable and draggable disabled on start 
$(".tile").resizable("option", "disabled", true).removeClass('ui-state-disabled'); 
$(".tile").draggable("option", "disabled", true).removeClass('ui-state-disabled'); 

// Function to run when the editButton is clicked 
$('#editButton').click(function() { 

    // Store our "state" in boolean form. 
    var state = ($("#editable").val() == 0) ? false : true; 

    // State is true, this means we will disable the tiles. 
    // Make the button text "edit" and change the hidden #editable field value to "0" 
    if (state) { $("#editable").val('0'); $(this).val('Edit'); $('.tile').css('cursor', 'pointer'); } 

    // State is true, this means we will enable the tiles. 
    // Make the button text "Done" and change the hidden #editable field value to "1" 
    else { $("#editable").val('1'); $(this).val('Done'); $('.tile').css('cursor', 'move'); } 

    // Apply the state to tiles. also remove the ui-state-disabled class to make sure they're not faded. 
    $(".tile").resizable("option", "disabled", state).removeClass('ui-state-disabled'); 
    $(".tile").draggable("option", "disabled", state).removeClass('ui-state-disabled'); 

}); 

}); 

및 코드 왜이를 삽입하는 방법 알려 주시기 바랍니다 : 여기에

내가 현재 가지고있는 것입니다.

감사합니다.

Answer 1

당신은 다음처럼 설정 기능에서 어디서나 타일에 클릭 이벤트 처리기를 바인딩 할 수 있습니다 : 당신의 연결을 편집 할 수 없습니다 때

$('.tile').bind('click',function (event) { 
if ($("#editable").val() == 0) window.location.href= <your URL here>; 
}); 

에만 그렇지 않으면 무시됩니다, 링크를 따라합니다.