0

これは非常に興味深いトピックです。ぜひお読みください。

プラグインを使用していて、オンザフライで設定を変更したいとします。プラグインに組み込みのオプション リクエストがない場合、これを実現するための 2 つのオプションがあります。

  1. リクエストのオプションを処理するようにプラグインを変更します

  2. リクエストに応じて JavaScript を変更しようとしました。

これは一般的な話題ですが、例としてこの単純な画像トリミング プラグインを見てみましょう: http://deepliquid.com/projects/Jcrop/

縦横比を変更したい場合は、リンクをクリックしてください。

オンページロード設定:

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

オンクリックで設定を変更

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

2.アプローチに従って、jqueryまたはjavascriptが最初のjavascriptを強制終了し（divで簡単に実行できるように）、2番目のjavascriptに置き換えることができるかどうか疑問に思います。私はすでにスクリプトの名前タグを指定して識別しようとしましたが、成功しませんでした。JavaScript を div でラップすることは、w3 に準拠していないようです。これを達成する方法を知っている人はいますか？

たぶん、誰かが次のようなリクエストで追加のオプションを取得するようにプラグインを簡単に変更するためのステップバイステップのチュートリアルも共有するでしょう:

<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 に答える