HTMLページを実装から分離するために、Web サイトの機能セットごとにJavaScript異なるファイルを作成しました。ページから実装する場合は、次のようにします.js。JavaScriptHTML
<script type="text/javascript" src="path/to/javascript/jquery.qtip.js"></script>
jquery.qtip.jsただし、そのライブラリを次の.jsようなファイルに
含めるにはどうすればよいheatmap.jsですか? firebugから次のエラーが発生しているため、私はそれを求めています:
TypeError: $("mytable td").qtip is not a function
[Break On This Error]
style : 'ui-tooltip-tipsy ui-tooltip-shadow'
Java を使用している場合、外部ライブラリまたはクラスを次のように含めます。
import java.util.*
JavaScriptにも同様の方法はありますか?
function heatmap()
{
var input = document.getElementById("heatmap").value;
// TAKE THE HEATMAP HTML OBJECT AND MAKE A POST TO THE BACKEND
$("#heatmap").empty().html(baseurl + "/images/loader.gif/>");
$.post(baseurl + "index.php/heatmap/getMatrix",
{
input : input.toString()
},
function(answer){
var list = eval('(' + answer + ')');
var temp = list.split(" ");
makeTable(temp);
$(document).ready(function(){
$('mytable td').qtip({
overwrite : false, // make sure it can' be overwritten
content : {
text : function(api){
var msg = "Interaction: " + $(this).html();
return msg;
}
},
position : {
my : 'top left',
target : 'mouse',
viewport : $(window), // keep it on screen at all time is possible
adjust : {
x : 10, y : 10
}
},
hide : {
fixed : true // helps to prevent the tooltip
},
style : 'ui-tooltip-tipsy ui-tooltip-shadow'
});
});
});
}
** * ** * ** * *メイクテーブル機能追加* ** * ** * ** * *
function makeTable(data)
{
var row = new Array();
var cell = new Array();
var row_num = 18;
var cell_num = 16;
var tab = document.createElement('table');
tab.setAttribute('id', 'mytable');
tab.border = '1px';
var tbo = document.createElement('tbody');
for(var i = 0; i < row_num; i++){
row[i] = document.createElement('tr');
var upper = (i+1)*16;
var lower = i*16;
for(var j = lower; j < upper; j++){
cell[j] = document.createElement('td');
//cell[j].setAttribute('class', 'selector');
if(data[j] != undefined){
var index = Math.round(parseFloat(data[j])*100) / 100;
var count = document.createTextNode(index);
cell[j].appendChild(count);
/* specify which color better suits the heatmap */
if(index <= -4){
cell[j].style.backgroundColor = '#FF0000';
}
else if(index > -4 && index <= -3.5){
cell[j].style.backgroundColor = "#FF2200";
}
else if(index > -3.5 && index <= -3.0){
cell[j].style.backgroundColor = "#FF2222";
}
else if(index >= -3.0 && index < -2.5){
cell[j].style.backgroundColor = "#FF3311";
}
else if(index >= -2.5 && index < -2.0){
cell[j].style.backgroundColor = "#FF5500";
}
else if(index >= -2.0 && index < -1.5){
cell[j].style.backgroundColor = "#FF8811";
}
else if(index >= -1.5 && index < -1.0){
cell[j].style.backgroundColor = "#FFAA22";
}
else if(index >= -1.0 && index < -0.5){
cell[j].style.backgroundColor = "#FFCC11";
}
else if(index >= -0.5 && index < 0){
cell[j].style.backgroundColor = "#FFCC00";
}
else if(index == 0){
cell[j].style.backgroundColor = "#000000";
}
else if(index > 0 && index < 0.5){
cell[j].style.backgroundColor = "#FF8800";
}
else if(index >= 0.5 && index < 1.0){
cell[j].style.backgroundColor = "#FFBB00";
}
else if(index >= 1.0 && index < 1.5){
cell[j].style.backgroundColor = "#FFFF00";
}
else if(index >= 1.5 && index < 2.0){
cell[j].style.backgroundColor = "#00CC00";
}
else if(index >= 2.0 && index < 2.5){
cell[j].style.backgroundColor = "#008800";
}
else if(index >= 2.5 && index < 3.0){
cell[j].style.backgroundColor = "#006600";
}
else if(index >= 3.0 && index < 3.5){
cell[j].style.backgroundColor = "#004400";
}
else{
}
row[i].appendChild(cell[j]);
}
}
tbo.appendChild(row[i]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
}