回答
我爲你做了一個簡單的例子here
基本上,它創建一個div在你的jstree的一個,以便它禁用用戶交互。
我想你可以在視覺上更好,但我認爲這給你的想法。
我也檢查了沒有任何禁用jstree的嚴格方法,即使它可能是有用的。
也許你要問在谷歌組開發,尤其...
HTML代碼:
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<div id="jstree-wrapper">
<div id="demo" style="height:100px;">
<ul>
<li id="node_1_id">
<a>Root node 1</a>
<ul>
<li id="child_node_1_id">
<a>Child node 1</a>
</li>
<li id="child_node_2_id">
<a>Child node 2</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a>Team A's Projects</a>
<ul>
<li><a>Iteration 1</a>
<ul>
<li><a>Story A</a></li>
<li><a>Story B</a></li>
<li><a>Story C</a></li>
</ul>
</li>
<li><a>Iteration 2</a>
<ul>
<li><a>Story D</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="disabler"></div>
</div>
CSS代碼:
#jstree-wrapper {
position: relative;
}
#disabler {
position: absolute;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.5;
}
JS代碼:
$(document).ready(function() {
$("#demo").jstree();
$("#disable").on("click", function() {
$("#disabler").css("width", $("#demo").width());
$("#disabler").css("height", $("#demo").height());
});
$("#enable").on("click", function() {
$("#disabler").css("width", "0px");
$("#disabler").css("height", "0px");
});
});
謝謝andreapier! – Lalit
不客氣,但這不是如何計算器的工作原理。你應該接受答案(如果你喜歡它也可以upvote)!閱讀常見問題,如果你還沒有! – andreapier
嗨andreapier, 我不知道。我已經接受你的答案了。 再次感謝! – Lalit
這是一個很好的例子,我沒有在其他地方找到這麼簡單而又好的例子。在這個例子中,你可以通過添加CSS樣式來模擬'禁用'屬性,就像我在代碼片段中輸入的一樣。它通過使用CSS「visible:hidden」來禁用,並添加一個半透明遮罩來覆蓋整個div區域並禁用其中的任何內容。您可以選擇將「可見性:隱藏」註釋掉,以便能夠查看掩碼背後的元素,但如果您不介意隱藏它們,則取消註釋該樣式,然後它們將變爲可選項。
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.2;
background-color: black;
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
</div>
<button>Dummy</button>
<br/>
<br/>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
- 1. DIV禁用或灰顯
- 2. 錯誤禁用div內容
- 3. 刷新DIV內容或DIV
- 4. 如何使用jquery或Javascript替換其他div的div內容?
- 5. 如何使用jquery在div內選擇div div
- 6. div如何在div內縮進
- 7. 如何在兩個div內製作div?
- 8. 如何在div內保留div
- 9. 如何使Div在角js中禁用
- 10. 如何在contenteditable div中禁用元素?
- 11. 如何在jquery中執行div禁用?
- 12. 如何在C#中禁用div代碼?
- 13. 如何更改div內div的內容?
- 14. 禁用DIV
- 15. 禁用DIV
- 16. 更改div或div的內容?
- 17. 如何居中內容或div
- 18. jsTree在頁面加載時刪除div
- 19. 使用透明div禁用div
- 20. 如何禁用和啓用Div元素?
- 21. 如何在div類內部的div類中獲得div類?
- 22. 如何使用內部DIV
- 23. 在div中禁用複製?
- 24. 在美孚的Div禁用
- 25. 在點擊後禁用div
- 26. 在Div中禁用滾動
- 27. 在iframe/div中禁用JavaScript
- 28. 如何內聯div
- 29. 如何禁用和啓用Div的所有內容
- 30. 如何適應曲線div內的div?
是否要禁用jstree的每一次互動?你想達到什麼目的? – andreapier
我想禁用jstree的每個節點。 – Lalit
好吧,通過禁用你的意思是禁用點擊,打開,關閉?你知道你可以通過編程禁用jstree節點嗎? – andreapier