Húzható doboz
Tartalom
===== Ejtés =====
jQuery-UI
Ejtés
#doboz {
width: 150px;
height: 50px;
background-color: #F8EF21;
border-style: solid;
border-width: 2px;
border-color: #EBCA1F;
}
#kontener {
width: 250px;
height: 150px;
background-color: #21E0F8;
border-style: solid;
border-width: 2px;
border-color: #219AF8;
}
$("#doboz").draggable({
opacity: 0.7
});
$("#kontener").droppable({
drop: function(event, ui) {
$("#kontener").html("Meg vagy");
}
});
===== Húzás és ejtés =====
egy
#egy {
width: 50px;
height: 50px;
background-color: blue;
}
#ketto {
width: 100px;
height: 100px;
background-color: yellow;
}
$('#egy').draggable();
$('#ketto').droppable({
drop: function(event, ui){
$(this).find("p").text('Siker');
$(ui.draggable).css('background-color', 'red');
var currentId = $(ui.draggable).prop('id');
console.log(currentId);
},
out : function(event, ui) {
console.log('elhagyta');
}
});
egy
Tooltip
jQuery nyelv
Minta:
jQuery nyelv
===== Harmónika ===== A kód:
Harmónika
Első
Első bekezdés tartalma
Második
Második bekezdés tartalma
Harmadik
Harmadik bekezdés tartalma
Negyedik
Negyedik bekezdés tartalma
Minta:
===== Menü =====
JQuery
Példa: