2012-05-08 38 views
0

這是一個很有趣的話題,請往下看:更改的jQuery(插件)選項上即時

想象一下,你使用插件,並希望改變即時設置,有2個選項做到這一點,如果插件沒有內置選項要求:

  1. 你修改插件來處理請求

  2. 您嘗試修改JavaScript onrequest選項。

它的普通對象,但讓我們這個簡單的圖像裁剪插件作爲示例:如果我想的onclick改變一個鏈路上的縱橫比 http://deepliquid.com/projects/Jcrop/

的onpage負載設置:

<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。任何人都有一個想法如何實現這一目標?

也許有人會也分享了一步一步的嘖嘖輕鬆修改插件採取產生額外的選項類似像這樣的請求:您的想法

<div class="target {aspectRatio:1/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

0

嘗試使用數據屬性 - <div class="target" data-aspect-ratio="1/2">

$('.target').Jcrop({ 
    onChange: updatePreview, 
    onSelect: updatePreview, 
    aspectRatio: $(this).attr('data-aspect-ratio') 
    } 
+0

嗨。哇,我會嘗試你聰明的做法。謝謝。如果這樣的話,這意味着我們可以通過jquery簡單改變屬性來獲得任何插件的新選項。 :) – Email

+0

它不起作用。不知道內部處理,所以很笨,爲什麼不。爲了避免錯誤,我將attr設置爲外部div。但它甚至沒有選擇onpageload。 – Email

相關問題