jQuery UI Layout
Подскажите, пожалуйста, как в примере http://layout.jquery-dev.net/demos/saved_state.html прочитать текущие сохраненные аттрибуты панелей (размер, статус) и вывести их на экран, напр. в центральной панели. Если можно конкретный код (что куда вставить), я новичок в javascript...
Чего-то у меня ничего не получается. |
var myLayout = $('body').layout();
var is_west_open = myLayout.state.west.isOpen;
var north_size = myLayout.state.north.size;
|
А как вывести значение этих переменных на экран?
В том примере вставляю так: var is_west_open = myCustomLayoutName.state.west.isOpen ; var north_size = myCustomLayoutName.state.north.size ; document.write( north_size ); Результат: 'myCustomLayoutName.state' - есть null или не является объектом |
Цитата:
alert( north_size ); в div с id="screen":
document.getElementById('screen').innerHTML = north_size;
|
var myLayout = $('body').layout();
var north_size = myLayout.state.north.size ;
alert( north_size );
Результат в окне Undefined! Почемуже не выводится текущий размер панели? |
приведи код всей странички
|
ссылка в первом посте. Вставил только под body код выше.
|
Вот простейшая страница:
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.layout.js"></script>
<script src="js/jquery.layout.state.js"></script>
<script>
$(document).ready(function () {
$('body').layout({ applyDefaultStyles: true });
});
</script>
</head>
<body>
<div class="ui-layout-center">Center
<script>
// init instance var
var myLayout = $('body').layout();
// read layout 'options'
var is_west_resizable = myLayout.options.west.resizable;
var north_maxHeight = myLayout.options.north.maxSize;
var state = myLayout.state;
// get layout 'state'
var is_west_open = myLayout.state.west.isOpen;
var north_size = myLayout.state.north.size;
// current state
var isWestPaneOpen = !state.west.isClosed;
var isSouthPaneHidden = state.south.isHidden;
var isEastPaneSliding = state.east.isSliding;
// current dimensions
var westCurrentSize = state.west.size;
var westMinimumSize = state.west.minSize;
var containerInnerWidth = state.container.innerWidth;
var containerPaddingLeft = state.container.paddingLeft;
alert ( north_size );
</script>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>
Результат тот же - Undefined! В чем ошибка? Нормально выводятся только layout options. |
Разобрался в вопросе, переговорив с автором. Может кому поможет...
Оказывается панели layout должны уже существовать с соответствующими присвоенными классами до инициализации, напр. в виде div'ов или iframe и др. Они не создаются автоматически при инициализации. Вот такой код работает:
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.layout.js"></script>
<script src="js/jquery.layout.state.js"></script>
<script src="js/complex.js"></script>
<script>
$(document).ready(function () {
$('body').layout({ applyDefaultStyles: true
});
});
</script>
</head>
<body>
<div class="ui-layout-center">Center
<div id="screen">
</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
<script>
// init instance var
var myLayout = $('body').layout();
var state = myLayout.state;
// current dimensions
var westCurrentSize = state.west.size;
//debugData( myLayout.state.west, 'West State' );
document.getElementById('screen').innerHTML = westCurrentSize;
</script>
</body>
</html>
Для отладки есть удобная функция в complex.js, которая показывает состояние всех объектов и их параметров debugData( object[.branch[.branch]] [, dialog-title] ); напр. debugData( myLayout.state.west, 'West State' ); debugData( myLayout.state, 'ALLStates' ); |
firebug намного удобнее ;)
|
| Часовой пояс GMT +3, время: 01:17. |