Question

所以，我有这个网站here，页面上的每个“图块”都是外部页面的书签。但是，当我使用传统的锚标签并在“瓷砖”上使用jQuery-ui可移动和可调整大小的效果时，我遇到了问题。

即使重新安排了瓷砖，链接也会保留。

因此，我需要尝试纯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

您可以将Click事件处理程序绑定到您的设置函数中的任何位置，如下所示：

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

只有链接不可编辑时才会显示链接，否则会被忽略。

制作jQuery链接最有效的方法？

1 个答案: