0

这是一个非常有趣的话题，请继续阅读：

假设您使用一个插件并想即时更改设置，如果插件没有内置选项请求，则有 2 个选项可以实现此目的：

  1. 您修改插件以处理请求中的选项

  2. 您尝试修改 javascript onrequest。

它是一个通用主题，但让我们以这个简单的图像裁剪插件为例： http ://deepliquid.com/projects/Jcrop/

如果我想在链接上更改纵横比。

页面加载设置：

<script>
    jQuery(function($){
      $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 2/3
      }
</script>

将设置 onclick 更改为

<script>
    jQuery(function($){
      $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 1/2
      }})
</script>

我现在想知道 jquery 或 javascript 是否能够按照 2. 方法杀死第一个 javascript（就像它可以用 div 轻松完成）并用第二个 javascript 替换它。我已经尝试通过提供脚本名称标签来识别但没有成功。在 div 中包装 javascript 似乎不符合 w3 标准。有人知道如何实现这一目标吗？

也许有人会分享一步一步的 tut 来轻松修改插件以在类似这样的请求中采用附加选项：

<div class="target {aspectRatio:1/2}

谢谢你的想法

4

2 回答 2

1

对于 Jcrop：

jQuery(function($){
  $('#my_jcrop').Jcrop({
    onChange: updatePreview,
    onSelect: updatePreview,
    aspectRatio: old_aspectRatio
  }};

我改变了这种方式的aspectRatio

$('#my_jcrop').Jcrop({aspectRatio: new_aspectRatio['x']/new_aspectRatio['y']});

和功能updatePreview

function updatePreview(c)
   {
 if (c.w!=0 && c.h!=0){ 
    coord = c;
 }
    if (parseInt(c.w) > 0)
    {
      var rx = preview_size['x']/c.w;
      var ry = preview_size['y']/c.h;

   preview.width = Math.round(rx * boundx) + 'px';
      preview.height = Math.round(ry * boundy) + 'px';
      preview.marginLeft = '-' + Math.round(rx * c.x) + 'px';
      preview.marginTop = '-' + Math.round(ry * c.y) + 'px';

      $('#preview').css({
        width: preview.width,
        height: preview.height,
        marginLeft: preview.marginLeft,
        marginTop: preview.marginTop
      });
    }
  };

我更改了 preview_size['x'] 和 preview_size['y'] 的值：

preview_size['x'] = new_aspectRatio['x'];
preview_size['y'] = new_aspectRatio['y'];

所以如果新的图片尺寸是200x400px，那么aspectRatio就是200/400 = 1/2

于 2012-06-28T17:29:09.600 回答
0

尝试使用数据属性 - <div class="target" data-aspect-ratio="1/2">

 $('.target').Jcrop({
    onChange: updatePreview,
    onSelect: updatePreview,
    aspectRatio: $(this).attr('data-aspect-ratio')
  }
于 2012-05-08T12:22:31.107 回答