Jquery與原型衝突

我在Prototype中使用'lightbox'並在Jquery中使用'Export to CSV'。目前，Prototype與Jquery庫衝突。下面是導出函數的代碼，第一個腳本是Jquery導出庫和第二個腳本是Javascript。Jquery與原型衝突

一旦加入'jQuery.noConflict（）;'在導出庫的第一行中，導出功能不起作用。所以我的問題是如何讓他們在同一頁面上工作。

<script type="text/javascript"> 

    jQuery.fn.table2CSV = function(options) { 
    var options = jQuery.extend({ 
     separator: ',', 
     header: [], 
     delivery: 'popup' // popup, value 
    }, 
    options); 


    var csvData = []; 
    var headerArr = []; 
    var el = this; 

    //header 
    var numCols = options.header.length; 
    var tmpRow = []; // construct header avalible array 

    if (numCols > 0) { 
     for (var i = 0; i < numCols; i++) { 
      tmpRow[tmpRow.length] = formatData(options.header[i]); 
     } 
    } else { 
     $(el).filter(':visible').find('th').each(function() { 
      if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html()); 
     }); 
    } 

    row2CSV(tmpRow); 

    // actual data 
    $(el).find('tr').each(function() { 
     var tmpRow = []; 
     $(this).filter(':visible').find('td').each(function() { 
      if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html()); 
     }); 
     row2CSV(tmpRow); 
    }); 
    if (options.delivery == 'popup') { 
     var mydata = csvData.join('\n'); 
     return popup(mydata); 
    } else { 
     var mydata = csvData.join('\n'); 
     return mydata; 
    } 

    function row2CSV(tmpRow) { 
     var tmp = tmpRow.join('') // to remove any blank rows 
     // alert(tmp); 
     if (tmpRow.length > 0 && tmp != '') { 
      var mystr = tmpRow.join(options.separator); 
      csvData[csvData.length] = mystr; 
     } 
    } 
    function formatData(input) { 
     // replace " with 「 
     var regexp = new RegExp(/["]/g); 
     var output = input.replace(regexp, "「"); 
     //HTML 
     var regexp = new RegExp(/\<[^\<]+\>/g); 
     var output = output.replace(regexp, ""); 
     if (output == "") return ''; 
     return '"' + output + '"'; 
    } 
    function popup(data) { 
     var generator = window.open('', 'csv', 'height=400,width=600'); 
     generator.document.write('<html><head><title>CSV</title>'); 
     generator.document.write('</head><body >'); 
     generator.document.write('<textArea cols=70 rows=15 wrap="off" >'); 
     generator.document.write(data); 
     generator.document.write('</textArea>'); 
     generator.document.write('</body></html>'); 
     generator.document.close(); 
     return true; 
    } 
}; 
     </script> 




     <script type="text/javascript"> 
     function getCSVData(){ 
      var csv_value=$('#insideTable5').table2CSV({delivery:'value'}); 
      $("#csv_text").val(csv_value); 
     } 
     </script> 



     <input type="image" src="images/Excel.jpg" value="Get CSV File" onclick="getCSVData()"/> 

     <table id='insideTable5' border='1'> 
      . 
      . 
      . 
     </table>

來源

2011-09-01 Acubi

如果包裹，像這樣的代碼：

(function($){ 

    // CODE HERE 

})(jQuery);

然後，它仍然不會衝突後工作。這將使得$在代碼中仍然是jquery，但不在其外。

然後在您自己的功能中，使用jQuery代替$，或使用noConflict將其分配給不同的變量名稱。

function getCSVData(){ 
    var csv_value=jQuery('#insideTable5').table2CSV({delivery:'value'}); 
    jQuery("#csv_text").val(csv_value); 
}

來源

2011-09-01 13:48:47

-1

不是隻爲兩個功能加載兩個框架並擔心衝突，請加載一個並使用它。您的用戶將擁有更少的代碼下載，並且您的JavaScript代碼庫將更容易擴展，更新將更加容易，等等。

JQuery有很多燈箱插件。我的最愛之一是http://colorpowered.com/colorbox/

來源

2011-09-01 13:58:52 AlienWebguy

Jquery與原型衝突

回答

相關問題