2012-12-04 54 views
0

任何人都可以告訴我如何禁用div或div內的元素? 我在我的div中有一個jstree,我想禁用div/jstree。如何在div內禁用div或jstree?

謝謝!

+0

是否要禁用jstree的每一次互動?你想達到什麼目的? – andreapier

+0

我想禁用jstree的每個節點。 – Lalit

+0

好吧,通過禁用你的意思是禁用點擊,打開,關閉?你知道你可以通過編程禁用jstree節點嗎? – andreapier

回答

0

我爲你做了一個簡單的例子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"); 
    }); 

}); 
+0

謝謝andreapier! – Lalit

+0

不客氣,但這不是如何計算器的工作原理。你應該接受答案(如果你喜歡它也可以upvote)!閱讀常見問題,如果你還沒有! – andreapier

+0

嗨andreapier, 我不知道。我已經接受你的答案了。 再次感謝! – Lalit

0

這是一個很好的例子,我沒有在其他地方找到這麼簡單而又好的例子。在這個例子中,你可以通過添加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>