有時為了排版的關係，可能會希望把 ul 中的內容進行垂值或是水平分組的排列。而 easyListSplitter 套件也是作者針對這樣的需求而開發出來的外掛。
它除了可快速分組之外，也會把原先套用在 ul 上的 CSS 樣式加到每一個分組上唷。
套件名稱：easyListSplitter
套件版本：1.0.2
作者網站：http://www.madeincima.it/en/ar......itter-plugin/
套件網址：N/A
發佈日期：2011-10-14
檔案大小：3.13 KB
檔案下載：jquery.easyListSplitter.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | colNumber(選填) 描述： 指定 ul 要分組的組數 預設值： 2 direction(選填) 描述： 指定分組的排列方式, 若值不為 'vertical' 則改用水平排列 預設值： 'vertical' |
方法說明：
檢視原始碼 JavaScript
1 2 | // 把 ul 進行分組 $(selector).easyListSplitter(options); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.easyListSplitter.js"></script> <style type="text/css"> ul, li { margin: 0; padding: 0; list-style-type: none; } ul{ margin: 0 10px 30px 0; width: 180px; float: left; } p { clear: left; } </style> <script type="text/javascript"> $(function(){ // 分成 3 組 $('.loremipsum').easyListSplitter({ colNumber: 3 }); // 分成 4 組且是水平排列分組 $('.mylist').easyListSplitter({ colNumber: 4, direction: 'horizontal' }); }); </script> <body> <p>垂直分組</p> <ul class="loremipsum"> <li><a href="#">Lorem ipsum 1</a></li> <li><a href="#">Donec pede 2</a></li> <li><a href="#">Fringilla vel 3</a></li> <li><a href="#">Eget arcu 4</a></li> <li><a href="#">In enim 5</a></li> <li><a href="#">Lorem farem 6</a></li> <li><a href="#">Pede justo 7</a></li> <li><a href="#">Vel aliquet 8</a></li> <li><a href="#">Arcu eget 9</a></li> <li><a href="#">Justo rhoncus 10</a></li> <li><a href="#">Ipsum dolor 11</a></li> <li><a href="#">Justo pedec 12</a></li> <li><a href="#">Romanorum 13</a></li> </ul> <p>水平分組</p> <ul class="mylist"> <li><a href="#">Lorem ipsum 1</a></li> <li><a href="#">Donec pede 2</a></li> <li><a href="#">Fringilla vel 3</a></li> <li><a href="#">Eget arcu 4</a></li> <li><a href="#">In enim 5</a></li> <li><a href="#">Lorem farem 6</a></li> <li><a href="#">Pede justo 7</a></li> <li><a href="#">Vel aliquet 8</a></li> <li><a href="#">Arcu eget 9</a></li> <li><a href="#">Justo rhoncus 10</a></li> <li><a href="#">Ipsum dolor 11</a></li> <li><a href="#">Justo pedec 12</a></li> <li><a href="#">Romanorum 13</a></li> </ul> </body> |