<style>
air_stat {
display: block;
border: 1px solid lightsteelblue;
}
air_head {
display: block;
font-weight: bold;
text-align: center;
}
air_tree {
display: block;
}
air_branch {
width: 100%;
display: table;
background: #efe;
cursor: pointer;
}
air_leaf {
width: 100%;
display: none;
}
air_type, air_chairs, air_range, air_bag {
display: table-cell;
border: 1px solid lightsteelblue;
padding: .2em;
}
air_type {
text-indent: 1.5em;
}
air_chairs, air_range, air_bag {
text-align: right;
width: 20%;
}
air_head > * {
text-align: inherit;
}
input[ air_switcher ] {
position: absolute;
visibility: hidden;
display: none;
}
input:checked ~ label air_branch {
background: #fef;
}
input:checked ~ air_leaf {
display: table;
}
</style>
<air_stat>
<air_head>
<air_type>Тип</air_type>
<air_chairs>Количество пассажирских мест</air_chairs>
<air_range>Дальность полета (км)</air_range>
<air_bag>Вместительность багажника (м³)</air_bag>
</air_head>
<air_tree>
<input id="switcher-1" type="checkbox" air_switcher="true" />
<label for="switcher-1">
<air_branch>
<air_type>Execuliners</air_type>
<air_chairs>50</air_chairs>
<air_range>11520</air_range>
<air_bag>18.1</air_bag>
</air_branch>
</label>
<air_leaf>
<air_type>Airbus Corporate Jetliner (ACJ)</air_type>
<air_chairs>43</air_chairs>
<air_range>11297</air_range>
<air_bag>9.6</air_bag>
</air_leaf>
<air_leaf>
<air_type>Boeing Business Jet (BBJ)</air_type>
<air_chairs>50</air_chairs>
<air_range>11519</air_range>
<air_bag>17.5</air_bag>
</air_leaf>
<air_leaf>
<air_type>Embraer Lineage 1000</air_type>
<air_chairs>19</air_chairs>
<air_range>7800</air_range>
<air_bag>18.1</air_bag>
</air_leaf>
</air_tree>
<air_tree>
<input id="switcher-2" type="checkbox" air_switcher="true" />
<label for="switcher-2">
<air_branch>
<air_type>Execuliners</air_type>
<air_chairs>50</air_chairs>
<air_range>11520</air_range>
<air_bag>18.1</air_bag>
</air_branch>
</label>
<air_leaf>
<air_type>Airbus Corporate Jetliner (ACJ)</air_type>
<air_chairs>43</air_chairs>
<air_range>11297</air_range>
<air_bag>9.6</air_bag>
</air_leaf>
<air_leaf>
<air_type>Boeing Business Jet (BBJ)</air_type>
<air_chairs>50</air_chairs>
<air_range>11519</air_range>
<air_bag>17.5</air_bag>
</air_leaf>
<air_leaf>
<air_type>Embraer Lineage 1000</air_type>
<air_chairs>19</air_chairs>
<air_range>7800</air_range>
<air_bag>18.1</air_bag>
</air_leaf>
</air_tree>
<air_tree>
<input id="switcher-3" type="checkbox" air_switcher="true" />
<label for="switcher-3">
<air_branch>
<air_type>Execuliners</air_type>
<air_chairs>50</air_chairs>
<air_range>11520</air_range>
<air_bag>18.1</air_bag>
</air_branch>
</label>
<air_leaf>
<air_type>Airbus Corporate Jetliner (ACJ)</air_type>
<air_chairs>43</air_chairs>
<air_range>11297</air_range>
<air_bag>9.6</air_bag>
</air_leaf>
<air_leaf>
<air_type>Boeing Business Jet (BBJ)</air_type>
<air_chairs>50</air_chairs>
<air_range>11519</air_range>
<air_bag>17.5</air_bag>
</air_leaf>
<air_leaf>
<air_type>Embraer Lineage 1000</air_type>
<air_chairs>19</air_chairs>
<air_range>7800</air_range>
<air_bag>18.1</air_bag>
</air_leaf>
</air_tree>
</air_stat>
|
Мне нравится использовать w3c методы. Поэтому spike.js. В примере не подключено — думаю здесь у всех есть современные браузеры. Проверялось в Opera Mobile.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type = "text/css">
.collapsible .collapse {
display: none;
}
</style>
<title>Untitled</title>
</head>
<body>
<table class="collapsible">
<thead>
<tr>
<th></th>
<th>Тип</th>
<th>Количество пассажирских мест</th>
<th>Дальность полета (км)</th>
<th>Вместительность багажника (м³)</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td>
<td><span>Execuliners</span></td>
<td><span>50</span></td>
<td><span>11520</span></td>
<td><span>18.1</span></td>
</tr>
<tr>
<td colspan="2">Airbus Corporate Jetliner (ACJ)</td>
<td>43</td>
<td>11297</td>
<td>9.6</td>
</tr>
<tr>
<td colspan="2">Boeing Business Jet (BBJ)</td>
<td>50</td>
<td>11519</td>
<td>17.5</td>
</tr>
<tr>
<td colspan="2">Embraer Lineage 1000</td>
<td>19</td>
<td>7800</td>
<td>18.1</td>
</tr>
</tbody>
<tbody>
<tr>
<td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td>
<td><span>Execuliners</span></td>
<td><span>50</span></td>
<td><span>11520</span></td>
<td><span>18.1</span></td>
</tr>
<tr>
<td colspan="2">Airbus Corporate Jetliner (ACJ)</td>
<td>43</td>
<td>11297</td>
<td>9.6</td>
</tr>
<tr>
<td colspan="2">Boeing Business Jet (BBJ)</td>
<td>50</td>
<td>11519</td>
<td>17.5</td>
</tr>
<tr>
<td colspan="2">Embraer Lineage 1000</td>
<td>19</td>
<td>7800</td>
<td>18.1</td>
</tr>
</tbody>
<tbody>
<tr>
<td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td>
<td><span>Execuliners</span></td>
<td><span>50</span></td>
<td><span>11520</span></td>
<td><span>18.1</span></td>
</tr>
<tr>
<td colspan="2">Airbus Corporate Jetliner (ACJ)</td>
<td>43</td>
<td>11297</td>
<td>9.6</td>
</tr>
<tr>
<td colspan="2">Boeing Business Jet (BBJ)</td>
<td>50</td>
<td>11519</td>
<td>17.5</td>
</tr>
<tr>
<td colspan="2">Embraer Lineage 1000</td>
<td>19</td>
<td>7800</td>
<td>18.1</td>
</tr>
</tbody>
</table>
<script>
( function (className) {
var
x, tables = document.querySelectorAll("." + className),
collapse = function (e) {
var
trs, x, clickedTr = e.target.parentNode.parentNode,
th = clickedTr.parentNode
;
if ( clickedTr === th.querySelector( "tr" ) ) {
trs = th.querySelectorAll("tr")
for (x = 1; x < trs.length; x++) {
trs[x].className = trs[x].className === "collapse" ? "" : "collapse";
}
}
}
;
for (x = 0; x < tables.length; x++) {
tables[x].addEventListener("click", collapse, false)
}
} ) ("collapsible")
</script>
</body>
</html>
|
Почему фреймворки? Это же все библиотеки.
|
что значит любимый?? бред.. они используются исходя из задачи. не будешь же использовать extjs для мелких задач (например: поиска селекторов, привязка событий и т.д.), когда есть jquery. и зачем вручную создавать те же таблицы с динамическими данными с помощью jquey, когда можно их создать в extjs
|
ковыряюсь сейчас в extjs и не понимаю зачем его вообще хоть для чего-то использовать)
|
а где же мой любимый Google Closure Library??? :)
|
Страшненький помоему,
во всех смыслах от внешнего вида UI компонентов до api. |
Цитата:
UI из коробки как в jq это по воробьям из пушки))) прелесть Closure Library в том что там есть всё необходимое для разработки СВОЕГО интерфейса без тупых навязыванний - один только лишь datepicker чего стоит! |
Кто что может сказать о Flying JS?
http://javascript.ru/forum/showthrea...176#post280176 |
Цитата:
|
| Часовой пояс GMT +3, время: 05:19. |