У меня есть всплывающие окна для моих маркеров в листовке, которые заполняются информацией из звонка ajax. Что я хотел бы сделать, это установить некоторые правила для выделения данных во всплывающем окне. Но я не уверен, как. Я хочу сделать что-то похожее на условное форматирование по умолчанию. Может быть, это должно быть сделано с CSS?
Аналогично этому: http://jsfiddle.net/ambiguous/RdGEy/
РЕДАКТИРОВАТЬ: Кажется, что это может быть хорошая кроличья нора, чтобы следовать: http://jsbin.com/zotome/edit?js, вывод
или вот это: http://jsfiddle.net/ZmesE/1/
но мне не повезло, делая это применить внутри всплывающего окна. Кроме того, он выглядит для цели "p", что я не хочу делать из-за того, насколько уродливое форматирование получилось бы со всеми дополнительными пробелами.
Если маркеры [i] ["Number"]>> = 150 Затем желтый фон и темно-желтый текст
Если маркеры [i] ["Number"]>> = 250 Тогда красный фон и темно-красный текст
Если (каждый обрабатывается отдельно) маркеры [i ] ["PropX"]> = .1 Затем желтый фон и темно-желтый текст
Если (каждый обрабатывается отдельно) маркеры [i] ["PropX"]> = .2 Затем красный фон и темно-красный текст
//pull data from json
jQuery.ajax({
url: myURL + "map_data.php",
type: "JSON",
async: false,
success: function(data){
markers = jQuery.parseJSON(data);
jQuery(markers).each(function( index, element ) {
});
}
});
......
//generate markers and layers from data
for ( var i = 0; i < markers.length; ++i ) {
//define popup data
var popup = '<br/><b>Sample Name:</b> '+ markers[i]["Sample_Number"] +
'<br/><b>Location Description:</b> ' + markers[i]["Location_Description"] +
'<br/><b>Date Taken:</b> ' + markers[i].Date +
'<br/><b>Classification:</b> ' + markers[i].Classification +
'<br/><b>Number:</b> ' + markers[i]["Number"] +
'<br/><b>Proportion 1:</b> ' + markers[i]["Prop1"] +
'<br/><b>Proportion 2:</b> ' + markers[i]["Prop2"] +
'<br/><b>Proportion 3:</b> ' + markers[i]["Prop3"] +
'<br/><button onclick="window.location=`http://...data.php?sample_name='+ markers[i]["File_Name"] +'`" download="'+markers[i]["File_Name"]+' data.csv">Download Data</button>'
//define markers
var m = L.marker( [markers[i].Latitude, markers[i].Longitude], {icon: icons[markers[i].Classification]})
.bindPopup( popup );
var data = {};
var name = markers[i]["File_Name"];
var latlng = L.latLng([markers[i].Latitude, markers[i].Longitude]);
data.name = name;
data.latlng = latlng;
bulk_list.push(data);
//add data to layer groups
category = markers[i].Classification;
// Initialize the category array if not already set.
if (typeof categories[category] === "undefined") {
categories[category] = L.featureGroup.subGroup(parentGroup,m).addTo(map);
layersControl.addOverlay(categories[category], category);
}
//add layers to map
categories[category].addLayer(m);
}
Всплывающие окна будут выглядеть следующим образом (с применением правил подсветки):
Sample Name: S16
Location Description:place
Date Taken:
Classification: Unknown
Number: 149
Proportion 1: 0.11 #This line of text would be dark yellow with a yellow background
Proportion 2: 0.03
Proportion 3: 0.03
Sample Name: S17
Location Description:place
Date Taken:
Classification: Unknown
Number: 150 #This line of text would be dark yellow with a yellow background
Proportion 1: 0.11 #This line of text would be dark yellow with a yellow background
Proportion 2: 0.23 #This line of text would be dark red with a red background
Proportion 3: 0.03
Sample Name: S18
Location Description:place
Date Taken:
Classification: Unknown
Number: 255 #This line of text would be dark red with a red background
Proportion 1: 0.01
Proportion 2: 0.23 #This line of text would be dark red with a red background
Proportion 3: 0.13 #This line of text would be dark yellow with a yellow background