以下の jsfiddle リンクには 2 つのボタンがあり、いずれかをクリックするとツールチップが表示されます。ツールチップ内のボタンで「削除」テキストと「入力テキスト」の表示やその他の属性を変更したい(テキストフィールドを編集可能にする)問題は、値が更新されるのにテキストが編集可能にならないことです」問題の解決策を提案する
JSFIDDLE
HTML
<button id="gear">Gear</button>
<button id="gear1">Gear</button>
<div style="display:none;" id="menu">
<button class="menuitem">Rename</button><br>
<input type= "text" id = "try" readonly = "true"><br>
<div id = "delete" style = "display: block">Delete</div><br>
</div>
</p>
JavaScript
$(function() {
$("#gear").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
}).qtip({
content: {
text: $('#menu')
},
show: {
event: 'click',
solo: true,
modal: true
},
style: {
classes: 'ui-tooltip-dark ui-tooltip-shadow'
},
position: {
my: 'top center',
at: 'bottom center',
}
});
$("#gear1").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
}).qtip({
content: {
text: $('#menu')
},
show: {
event: 'click',
solo: true,
modal: true
},
style: {
classes: 'ui-tooltip-dark ui-tooltip-shadow'
},
position: {
my: 'top center',
at: 'bottom center',
}
});
$(".menuitem").click(function(){
document.getElementbyId("try").readOnly = false;
document.getElementbyId("delete").style.display = none; alert($(this).text());
});
});
CSS
#gear {
margin:100px;
}
.menuitem {
padding-left: 10px;
padding-right: 10px;
font-size: 9px;
margin-bottom: 3px;
width: 75px;
}