私が持っているのは、ComboBox (dojo 1.8 を使用) で 100 年以上のリストを選択したものです。大きなリストをスクロールする代わりに、各ディスプレイをインラインブロックにしてグリッドに見えるディスプレイにする必要がありました (これは機能します)。
新しい要件は、次のように水平に表示するのではなく、次のようにすることです。
2013 2012 2011 2010
2009 2008 2007 2006
2005 2004 2003 2002
2001 2000
次のように垂直に表示する必要があります。
2013 2009 2005 2001
2012 2008 2004 2000
2011 2007 2003
2010 2006 2002
基本的に、コンボ ボックスのメニュー項目を 10 項目ごとにグループ化し、それらを別の div にラップして、CSS で (CSS3 を使用せずに) 列に変換できるようにしたいと考えています。
選択が最初に選択された後にメニューリストがDOMで作成されるため、メニューリストのレンダリング方法を操作するのに少し問題があります。
データ Dojo タイプを含む HTML の簡単なリファレンスを以下に示します。
<select name="year" id="year" value="1942" data-dojo-type="dijit/form/ComboBox">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>
もっと簡単に言えば、最初の「前の選択肢」div (.dijitMenuItem) をスキップしてから、親 div を追加し、10 個のアイテムをトスし、別のアイテムを追加し、さらに 10 個のアイテムをトスします...次のように:
<div class="dijitMenuItemGroup">
<div class="dijitReset dijitMenuItem" role="option" item="0" id="year_popup0">2013</div>
<div class="dijitReset dijitMenuItem" role="option" item="1" id="year_popup1">2012</div>
<div class="dijitReset dijitMenuItem" role="option" item="2" id="year_popup2">2011</div>
<div class="dijitReset dijitMenuItem" role="option" item="3" id="year_popup3">2010</div>
<div class="dijitReset dijitMenuItem" role="option" item="4" id="year_popup4">2009</div>
<div class="dijitReset dijitMenuItem" role="option" item="5" id="year_popup5">2008</div>
<div class="dijitReset dijitMenuItem" role="option" item="6" id="year_popup6">2007</div>
<div class="dijitReset dijitMenuItem" role="option" item="7" id="year_popup7">2006</div>
<div class="dijitReset dijitMenuItem" role="option" item="8" id="year_popup8">2005</div>
<div class="dijitReset dijitMenuItem" role="option" item="9" id="year_popup9">2004</div>
</div>
<div class="dijitMenuItemGroup">
<div class="dijitReset dijitMenuItem" role="option" item="10" id="year_popup10">2003</div>
...
</div>
...
それはできますか？そのようなもののための dijit prop はありますか?