0
Я использую jLayout для компоновки своего кода, и я замечаю, что он продолжает переписывать мою ширину и высоту для компонентов, которые я пытаюсь выполнить.Сохранение ширины и высоты ваших контейнеров с помощью jLayout
В настоящее время я пытаюсь сделать borderLayout на компоненте, который должен иметь ширину 900 пикселей и высоту 300 пикселей. Однако, когда я просматриваю его в своем браузере, он не только выглядит неправильно, но и удаляет те самые свойства!
Here is the mess that is what I have right now, а также сам код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Research Application</title>
<!-- The necessary imports that give your application the layout and ease-of-implementation that Java has -->
<!-- First, the jQuery library itself-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Then, all of the jLayout stuff -->
<script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jquery.sizes.js"></script>
<script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.grid.js"></script>
<script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.flexlayout.js"></script>
<script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.flow.js"></script>
<script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.border.js"></script>
<script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jquery.jlayout.js"></script>
<!-- including the styleSheet -->
<link rel="stylesheet" href="style/style.css" type="text/css"></link>
</head>
<body>
<h1 id="title">Research Application</h1>
<!-- This is where you might want to setup the jLayout script -->
<script>
// don't you just love function pointers?
$(document).ready(function(){
// in here goes all of the stuff to layout
// first, make the borderLayout for the applicationWindow itself
$('#applicationWindow').layout({
type: 'border',
maximumWidth: 900,
height: 300,
hgap: 3,
vgap: 3
});
// then, layout the questionPanel into verticalLayout
// next, make the picturesContainer into a horizontalLayout
});
</script>
<!-- need div element that will the container for the application itself -->
<div id="applicationWindow">
<!-- need element that will notify the user of the question number, as well as a way to change the number programmatically -->
<label id="problemNumberLabel" class="north">
Question number: 0 of 10 <!-- This is subject to change -->
</label>
<!-- need left arrow widget (You might want to do what Facebook did for the pictures, with the CSS and everything, and use <a> -->
<button class="navigatorButton west" id="leftArrowButton">
<<
</button>
<!-- need div element that will house the inner panel -->
<div id="questionPanel" class="center">
<!-- Content to be determined possibly by either JavaScript (via the html() function, or the innerHTML attribute), or by controlling the file
that gets loaded to here -->
</div>
<!-- need right arrow widget (You might want to do what Facebook did for the pictures, with the CSS and everything, and use <a> -->
<button class="navigatorButton east" id="rightArrowButton">
>>
</button>
<!-- container for lower buttons -->
<div id="lowerButtonsContainer" class="south">
<!-- This is where you put the "Share","Log on" buttons -->
<button id="ShareButton"></button>
<button name="LogOnButton"></button>
</div>
</div>
</body>
</html>
Вот мой код стиль, а также:
#title
{
text-align: center;
}
#problemNumberLabel
{
text-align: right;
}
#applicationWindow,#problemNumberLabel
{
width: 900px;
display: inline-block;
position: relative;
}
#applicationWindow
{
margin-left: auto;
margin-right: auto;
height: 300px;
}
.navigatorButton
{
height: 100px;
background-color: #ffffff; // make the color of the buttons white
}
Я использую jLayout, который вы можете получить доступ к здесь: http://www.bramstein.com/projects/jlayout/ , Есть ли способ сохранить ширину и высоту того, что они находятся в таблице стилей? (Я пытаюсь сохранить макеты в стиле Java.
Когда я попытался заставить ширину applicationWindow быть 900 пикселей (с '$ ('# applicationWindow') CSS ({ "ширина", "900"}) , 'сразу после того, как я установил borderLayout), он не только разбивает borderLayout, но позиционирует мои элементы по вертикали! По какой-то причине элементы даже выступают из элемента div !! Что происходит, и как я могу это решить? –