powered by simpleCommunicator - 2.0.60     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / Caché, Ensemble, DeepSee, MiniM, IRIS, GT.M [игнор отключен] [закрыт для гостей] / ZEN создание разметки страницы
10 сообщений из 10, страница 1 из 1
ZEN создание разметки страницы
    #36438102
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Что-то никак не могу получить, нужный мне, вариант разметки страницы...

Создал вот какую разметку...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
/// Этот XML блок описывает содержимое этой страницы.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<hgroup id="hgHead">
</hgroup>
<hgroup id="hgCont">
	<vgroup	id="vgLeft">
	</vgroup>
	<vgroup	id="vgCont">
	</vgroup>
</hgroup>
</page>
}

Описал вот такой css в апликейшен...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
/// Этот блок Style содержит определение CSS стиля приложения.
XData Style
{
<style type="text/css">
#hgHead {
	border: 1px solid;
	height: 100px;
}
#hgCont {
	border: 1px solid;
}
#vgLeft {
	border: 1px solid;
	width: 300px;
}
#vgCont {
	border: 1px solid;
}
</style>
}

Ожидаю увидеть нечто эдакое (см. картинку)...
----------
Cache for Windows (x86-32) 2009.1.1 (Build 504) Wed Aug 26 2009 01:43:16 EDT
...
Рейтинг: 0 / 0
ZEN создание разметки страницы
    #36438110
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Но на деле получаю вот такое (см. картинку)...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
ZEN создание разметки страницы
    #36438114
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
картинку-то и забыл...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
ZEN создание разметки страницы
    #36438119
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Т.е. нижняя часть не "желает" растягиваться до низа экрана/окна.

Стал смотреть чего мне нагенерил ЗЕН... Вот что получилось после того как убрал "лишнее"...

Код: plaintext
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.
<html>
<head>
<title></title>
<style type="text/css">
#hgHead {
	border: 1px solid;
	height: 100px;
}
#hgCont {
	border: 1px solid;
}
#vgLeft {
	border: 1px solid;
	width: 300px;
}
#vgCont {
	border: 1px solid;
}
</style>
</head>

<body>
<div class="zendiv" id="zen1" zen="1"  >
	<table id="group_1" width="100%" height="100%" class="page"  border="1" cellspacing="0" cellpadding="0">
	<tr valign="top">
	<td>
	<div class="zendiv" id="hgHead" zen="2"  >
		<table id="group_2"   class="group"  border="0" cellspacing="0" cellpadding="0"><tr height="100%">
		<td> </td></tr>
		</table>
	</div>
	</td>
	</tr>
	<tr valign="top">

	<td   >
	<div class="zendiv" id="hgCont" zen="3"  >
	<table id="group_3"   class="group"  border="0" cellspacing="0" cellpadding="0"><tr height="100%">
	<td  >
		<div class="zendiv" id="vgLeft" zen="4"  >
			<table id="group_4"   class="group"  border="0" cellspacing="0" cellpadding="0">
			<tr><td> </td></tr>
			</table>
		</div>
	</td>
	<td  >
		<div class="zendiv" id="vgCont" zen="5"  >
			<table id="group_5"   class="group"  border="0" cellspacing="0" cellpadding="0">
			<tr><td> </td></tr></table>
			</div>
			</td>
			</tr>
			</table>
		</div>
	</td>
	</tr>
	<tr height="99%"><td ></td>
	</tr>
	</table>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
ZEN создание разметки страницы
    #36438138
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
И немного офигеваю от увиденого...

Вроде как даже

Код: plaintext
<table id="group_1" width="100%" height="100%" class="page"  border="1" cellspacing="0" cellpadding="0">

Чего и хотелось! Но вот это (в конце)

Код: plaintext
1.
<tr height="99%"><td ></td>
</tr>

Убило всю надежду...

Это что так прямо и задумано было? Или я не таким способом строю разметку?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
ZEN создание разметки страницы
    #36441117
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Интересно... Кто как делает "резиновую" разметку по ширине окна?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
ZEN создание разметки страницы
    #36441395
ятак
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Код: plaintext
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.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
/// Created using the page template: Столбец  2 
Class MyApp.test Extends %ZEN.Component.page
{

/// Имя приложения, которому принадлежит эта страница.
Parameter APPLICATION;

/// Отображаемое имя для нового приложения.
Parameter PAGENAME;

/// Домен, используемый для локализации.
Parameter DOMAIN;

/// Этот блок Style содержит определение CSS стиля страницы.
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
	background: #C5D6D6;
	color: black;
	font-family: Verdana;
	font-size:  1 .5em;
	font-weight: bold;
	padding: 5px;
	border-bottom: 1px solid black;
	text-align: center;
}
/* group on left-hand side */
#groupLeft {
	border-right: 1px solid black;
	background: #E0E0FF;
	height: 600px;
	width: 300px;
	overflow: auto;
}
/* group on right-hand side */
#groupRight {
	border-right: 1px solid black;
	background: #E0FFE0;
	height: 600px;
	overflow: auto;
}
</style>
}
/// Этот XML блок описывает содержимое этой страницы.
XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<html id="title">Title</html>
<hgroup id="hgroup" width="100%">
<vgroup id="groupLeft">
<!-- put contents of left column here -->
<html>Column  1 </html>
</vgroup>
<vgroup id="groupRight">
<!-- put contents of right column here -->
<html>Column  2 </html>
</vgroup>
</hgroup>
</page>
}

/// This method is called when this page is resized.
/// In response to a resize, we use JavaScript to dynamically
/// resize the  2  main groups on this page.
/// You can modify this method to meet your needs.
Method onlayoutHandler(load) [ Language = javascript ]
{
	// find enclosing div for the title (if present) and get its height
	var title = zenPage.getComponentById('title');
	var divTitle = title ? title.getEnclosingDiv() : null;
	var hgtTitle = divTitle ? parseInt(divTitle.offsetHeight) :  0 ;
	// find the enclosing divs for the  2  groups
	var groupLeft = zenPage.getComponentById('groupLeft');
	var groupRight = zenPage.getComponentById('groupRight');
	var divgroupLeft = groupLeft ? groupLeft.getEnclosingDiv() : null;
	var divgroupRight = groupRight ? groupRight.getEnclosingDiv() : null;
	// find height of window
	var winHeight = zenGetWindowHeight();
	var winWidth = zenGetWindowWidth();
	// adjust the size of groups
	var widLeft = divgroupLeft ? parseInt(divgroupLeft.offsetWidth) :  0 ;
	var widRight = winWidth - widLeft;
	var hgt = winHeight - hgtTitle -  20 ;
	if (divgroupLeft) {
		divgroupLeft.style.height = hgt + 'px';
	}
	if (divgroupRight) {
		divgroupRight.style.height = hgt + 'px';
		divgroupRight.style.width = widRight + 'px';
	}
}
	
}
...
Рейтинг: 0 / 0
ZEN создание разметки страницы
    #36441415
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ятак , т.е. просто вычисляешь и меняешь... Фиговенькая перспектива...
...
Рейтинг: 0 / 0
ZEN создание разметки страницы
    #36441421
ятак
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
krvsa,

ну да, зато работает одинаково во всех браузерах
...
Рейтинг: 0 / 0
ZEN создание разметки страницы
    #36442486
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
После проб получилась таки разметка у нас. Вот чтополучается

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
/// Этот XML блок описывает содержимое этой страницы.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="" cellSize="stretch">
<vgroup
	groupStyle="width: 100%; height: 100%"
	enclosingStyle="width: 100%; height: 100%"
>
	<hgroup containerStyle="background-color: red; height: 100px;">
	</hgroup>
	<hgroup containerStyle="background-color: green;" 
		groupStyle="width: 100%; height: 100%;"
		enclosingStyle="width: 100%; height: 100%;"
	>
		<vgroup containerStyle="background-color: silver; width: 300px;">
		</vgroup>
		<vgroup containerStyle="background-color: blue;">
		</vgroup>
	</hgroup>
</vgroup>
</page>
}

Работает в ИЕ6.0, Опере и ФФ... Полностью "резиновая" разметка.
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
10 сообщений из 10, страница 1 из 1
Форумы / Caché, Ensemble, DeepSee, MiniM, IRIS, GT.M [игнор отключен] [закрыт для гостей] / ZEN создание разметки страницы
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]