Saya bukan pembuat kode dan saya sedang belajar sambil membuat selebaran untuk saya.

Saya sedang mengerjakan PopUp dan ToolTips saya sekarang. Saya memiliki banyak spidol dan saya ingin membuat beberapa HTML dasar di PopUp yang saya temukan cara melakukannya, namun masalah yang saya alami adalah Anda tidak dapat memasukkan pengembalian baris dalam kode untuk sembulan, sehingga menciptakan kekacauan mutlak dalam kode. Lihat contoh di bawah ini:

var town_Zeonica = L.marker(map.unproject([1851,2431],map.getMaxZoom()), {icon: townIcon}).bindPopup('<font size="4" color="#a86733"><b>Zeonica<b></font><br><br><font color="Black">Shops:<br><font color="Grey">Clothier, Oilpress, Brewer<br></font><br>Villages (Resource):<br><font color="Grey">Neocorys (Midlands Palfrey)<br>Alsasos (Grain)<br>Zeocorys (Grain)<table style="height: 141px; border-color: fff;" width="404"><tbody><tr><td style="width: 194px;">Village</td><td style="width: 194px;">Resource</td></tr><tr><td style="width: 194px;">Neocorys</td><td style="width: 194px;">Midlands Palfrey</td></tr><tr><td style="width: 194px;">Alsasos</td><td style="width: 194px;">Grain</td></tr><tr><td style="width: 194px;">Zeocorys</td><td style="width: 194px;">Grain</td></tr></tbody></table>', {sticky: true, opacity: 1, closeButton: false});

Jika saya mencoba mengembalikan baris seperti yang saya lakukan di HTML biasa, itu tidak akan berfungsi, lihat di bawah

var town_Zeonica = L.marker(map.unproject([1851,2431],map.getMaxZoom()), {icon: townIcon}).bindPopup('<font size="4" color="#a86733"><b>Zeonica<b></font><br><br><font color="Black">Shops:<br><font color="Grey">Clothier, Oilpress, Brewer<br></font><br>Villages (Resource):<br><font color="Grey">Neocorys (Midlands Palfrey)<br>Alsasos (Grain)<br>Zeocorys (Grain)<table style="height: 141px; border-color: fff;" width="404">
<tbody>
<tr>
<td style="width: 194px;">Village</td>
<td style="width: 194px;">Resource</td>
</tr>
<tr>
<td style="width: 194px;">Neocorys</td>
<td style="width: 194px;">Midlands Palfrey</td>
</tr>
<tr>
<td style="width: 194px;">Alsasos</td>
<td style="width: 194px;">Grain</td>
</tr>
<tr>
<td style="width: 194px;">Zeocorys</td>
<td style="width: 194px;">Grain</td>
</tr>
</tbody>
</table>', {sticky: true, opacity: 1, closeButton: false});

Apakah ada cara untuk melakukan ini di mana saya dapat memiliki pemformatan yang bagus atau apakah saya hanya perlu membuatnya seperti biasa lalu menghapus semua jeda baris untuk kode akhir?

Terima kasih siapa pun sebelumnya atas bantuan Anda saat saya mencoba belajar.

0
James Pyle 17 April 2020, 19:32

1 menjawab

Jawaban Terbaik

Saya akan merekomendasikan untuk mendefinisikan variabel yang berisi kode html Anda. Dan akan terlihat seperti ini:

var popupContent = '<font size="4" color="#a86733"><b>Zeonica<b></font><br><br><font color="Black">Shops:<br><font color="Grey">Clothier, Oilpress, Brewer<br></font><br>Villages (Resource):<br><font color="Grey">Neocorys (Midlands Palfrey)<br>Alsasos (Grain)<br>Zeocorys (Grain)<table style="height: 141px; border-color: fff;" width="404"><tbody><tr><td style="width: 194px;">Village</td><td style="width: 194px;">Resource</td></tr><tr><td style="width: 194px;">Neocorys</td><td style="width: 194px;">Midlands Palfrey</td></tr><tr><td style="width: 194px;">Alsasos</td><td style="width: 194px;">Grain</td></tr><tr><td style="width: 194px;">Zeocorys</td><td style="width: 194px;">Grain</td></tr></tbody></table>';

var town_Zeonica = L.marker(map.unproject([1851,2431], map.getMaxZoom()), {
    icon: townIcon
}).bindPopup(popupContent, {
    sticky: true,
    opacity: 1,
    closeButton: false
});

saya perpanjang jawabannya

Anda juga dapat menggunakan notasi escape, tambahkan garis miring terbalik:

var popupContent ='<font size="4" color="#a86733"><b>Zeonica<b></font><br><br><font color="Black">Shops:<br><font color="Grey">Clothier, Oilpress, Brewer<br></font><br>Villages (Resource):<br><font color="Grey">Neocorys (Midlands Palfrey)<br>Alsasos (Grain)<br>Zeocorys (Grain)<table style="height: 141px; border-color: fff;" width="404"> \
<tbody> \
<tr> \
<td style="width: 194px;">Village</td> \
<td style="width: 194px;">Resource</td> \
</tr> \
<tr> \
<td style="width: 194px;">Neocorys</td> \
<td style="width: 194px;">Midlands Palfrey</td> \
</tr> \
<tr> \
<td style="width: 194px;">Alsasos</td> \
<td style="width: 194px;">Grain</td> \
</tr> \
<tr> \
<td style="width: 194px;">Zeocorys</td> \
<td style="width: 194px;">Grain</td> \
</tr> \
</tbody> \
</table>';
0
luishromero 18 April 2020, 14:06