javascript - div外部網頁 - iframe src



HTML/CSS:嵌套元素樹的佈局比嵌套表格更好的選擇是什麼? (7)

你可以這樣做:

<ul>
  <li>
    <input type="checkbox" /> Option 1
    <ul>
      <li><input type="checkbox" /> Option 1 Sub Option A</li>
    </ul>
  </li>
</ul>

然後,您將UL的填充/邊距設置為0和0.然後將LI的填充左側設置為10px。

ul {
  margin:0;
  padding:0;
}

li {
  margin:0;
  padding:0 0 0 20px; /* Each nested li will be padded incrementally */
}

對於JavaScript,將一個事件附加到每個複選框,確定是否應該顯示同級UL(如果存在)。 如果該框被選中,顯示它,否則,隱藏它。

https://src-bin.com

好吧,我有一組選擇標準的複選框。 為了論證的緣故,我們會說數據如下所示:

[] Vehicles
   [] Unpowered
      [] Bicycle
      [] Skateboard
   [] Powered
      [] Two-wheeled
         [] Motorcycle
         [] Scooter
      [] Four-wheeled
etc

[]代表複選框。

忽略這個例子的明顯的人為的本質,這個想法是這樣的:

  • 首先,只有車輛複選框是可見的;
  • 如果用戶點擊車輛複選框,則選擇下一級(有動力,無動力);
  • 如果用戶選擇了動力,它打開了一個新的水平(兩輪,四輪);
  • 如果用戶取消選中Powered,則該級別消失。

現在,使用onclick在block和none之間切換顯示CSS屬性來設置相對比較容易。

目前這個頁面的結構如下:

<table>
<tr>
  <td><input type="checkbox" onclick="toggle('__Vehicles');"></td>
  <td>Vehicles
    <table id="__Vehicles">
    <tr>
      <td><input type="checkbox"></td>
      <td>Unpowered
etc

在有人問之前,我應該指出:複選框放在表格單元格中的原因是要控制格式。 由於下一個表格單元格中的所有內容都會排列起來,因此可以很容易地進行縮進。

這一切工作正常,但表嵌套變得很深。 我一直認為必須有比這更好的方法。 必須能夠輕鬆地動態構建,並具有良好的“樹”格式的跨瀏覽器支持。

我還應該提到jQuery是可用的。 我用它來做其他事情

建議?

編輯:是的複選框樣式是非常重要的,因為一些評論已經註意到了。 另外,根據我收到的回复,我已經發布了一個解決方案,作為下面的答案(太大了,不能在這裡添加),只為那些好奇的人看到一個例子。


Answer #1

嵌套無序列表是這類事情的最佳實踐。

<ul>
   <li>Item 1</li>
   <li>Item 2
      <ul>
         <li>Sub Item 1</li>
         <li>Sub Item 2</li>
         <li>Sub Item 3</li>
      </ul>
   </li>
   <li>Item 3</li>
   <li>Item 4
      <ul>
         <li>Sub Item 1</li>
         <li>Sub Item 2</li>
         <li>Sub Item 3</li>
      </ul>
   </li>
</ul>

Answer #2

當創建cb的給他們一個CSS類取決於水平

<input class="LevelXcb" type="checkbox" />

CSS:

.Level0cb{left:4px;}
.Level1cb{left:16px;}
.Level2cb{left:28px;}

如果“左”不起作用,請嘗試設置“margin-left”。


Answer #3

表格是表格數據。 使用嵌套列表,而不是格式化的CSS。

如果你正在尋找一個完整的解決方案,這裡是一個使用純CSS的現代瀏覽器和JavaScript的IE瀏覽器:

<style>
ul.tree, ul.tree ul {
    position: relative;
    list-style: none;
    margin: 0 0 0 20px;
    padding: 0;
}
ul.tree input {
    position: absolute;
    margin-left: -20px;
}
ul.tree ul {
    display: none;
}
ul.tree input:checked ~ ul {
    display: block;
}
ul.tree label:hover {
    text-decoration: underline;
}
</style>
<ul class="tree">
  <li>
    <input type="checkbox" id="option1">
    <label for="option1">Option 1</label>
    <ul>
      <li>
       <input type="checkbox" id="option1a">
       <label for="option1a">Option 1 Sub Option A</label>
      </li>
      <li>
       <input type="checkbox" id="option1b">
       <label for="option1b">Option 1 Sub Option B</label>
      </li>
    </ul>
  </li>
  <li>
   <input type="checkbox" id="option2">
   <label for="option2">Option 2</label>
  </li>
</ul>
<!--[if lte IE 7]>
<script>
var tree = document.getElementsByTagName('ul')[0];
tree.attachEvent('onclick', function() {
    var src = event.srcElement;

    if(src.nodeName.toLowerCase() === 'label')
        var box = document.getElementById(src.htmlFor);
    else if(src.nodeName.toLowerCase() === 'input')
        var box = src;
    else return;

    for(var current = src.nextSibling;
        current && current.nodeName.toLowerCase() !== 'ul';
        current = current.nextSibling);

    if(current)
        current.style.display = box.checked ? 'block' : 'none';
});
</script>
<![endif]-->

假設一個複選框不是20px寬度。


Answer #4

希望看到一些深刻的jQuery魔術?

<ul class="tree">
  <li><input type="checkbox" name="Vehicles" checked>Vehicles
    <ul>
      <li<input type="checkbox" name="Unpowered">Unpowered
        <ul>
          <li><input type="checkbox" name="Bicycle">Bicycle</li>
          <li><input type="checkbox" name="Skateboard">Skateboard</li>
        </ul>
      </li>
      <li><input type="checkbox" name="Powered" checked>Powered
        <ul>
          <li><input type="checkbox" name="Two-wheeled">Two-wheeled
            <ul>
              <li><input type="checkbox" name="Motorcycle" checked>Motorcycle</li>
              <li><input type="checkbox" name="Scooter">Scooter</li>
            </ul>
          </li>
          <li><input type="checkbox" name="Two-Wheeled">Four-wheeled</li>
        </ul>
    </ul>
  </li>
</ul>

注意:這裡唯一的裝飾是樹類。

ul.tree {
    list-style-type: none;
    margin: 0 0 0 -22px;
    padding: 0;
}

ul.tree ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.tree input {
    margin-right: 6px;
}

ul.tree li {
    padding: 0 0 0 22px;
    margin: 1px;
}

.closed ul {
    display: none;
}

和魔法:

$(function() {
    $("ul.tree li:has(ul) > :checkbox").click(function() {
        jQuery(this).parent().toggleClass('closed');
    }).not(":checked").parent().addClass("closed");
});

當你點擊複選框時,整個事物變成一個正常工作的開始和結束樹。 真棒。

感謝davethegr8,Jonathon Sampson和其他人的建議。


Answer #5

雖然jQuery插件mcDropdown以不同的方式(沒有復選框)接近嵌套列表問題,但它可能適合您的需要。


Answer #6

如果復選框的寬度仍然是一個問題(之前的所有答案...),您可以:

  • 把所有的複選框放在一個固定的框中,這樣你就知道文本開始的位置(和下一級複選框)
  • 使用一些jQuery的計算來獲得寬度,並設置其他元素的邊距動態(似乎有點多,雖然...)

顯然使用建議的嵌套列表結構。





cross-browser