Динамическое создание элементов и Футер
Вложений: 1
Должен предупредить, что тут также будет присутствовать css.
Итак, первое: футер почему-то вылазиет за рамки окна (пришлось вложить рисунок, а то тут только ссылку требует) И второе, когда создавать динамически дополнительные элементы, они могут лезть прямо под футер и дальше, он не отсовывается. Можно ли как-то это ипсравить? Прилагаю сам css-файл (если надо, то и js вложу, но думаю, не в нём проблема): (здесь есть класс footer) Код:
fieldset.login { position: absolute; top: 25%; left: 35%; width: 30% } |
|
Это помогло выровнять футер, чтоб за края не лез. Но, при динамическом создании элементов, он по прежнему не отсовывается, а объекты "пролазиют" под ним
не знаю, чем поможет мой хтмл, если объекты создаются динамически (вот тем скриптом, что вы видели в прошлой моей теме, вы на него отписались пару раз) |
Чем поможет - тем, что можно сразу приступить к ковырянию в проблемном коде. А не стыковать вручную у себя css из одной темы, js из другой, html из головы. Мне лично лень этим заниматься. Как и большинству людей, что потенциально могут тебе помочь. Хочешь получить ответ быстро и по делу - позаботься о том чтобы для других это было не в напряг.
|
Ну ок, только не обращайте внимание тогда на ${records_table} и т.п, туда подставляются строки (пайтон на стороне сервера).
<html>
<head>
<title>Family budget. Main page</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<link rel="stylesheet" href="/static/css/styles.css" type="text/css" />
<script type="text/javascript" src="/static/js/scripts.js"></script>
</head>
<body>
<header>
<div id="user_header">
${username} <a href="/family_budget/logout">logout</a>
</div>
</header>
<h4>Recent records</h4>
<!-- Here must be table with records -->
${records_table}
<br>
<input type="button" value="Add record" onclick="show_add_form()" />
<input type="button" value="Select records" onclick="show_select_form()" />
<input type="button" value="Delete records" onclick="show_delete_form()" />
<input type="button" value="Show statistics" onclick="show_statistics()" />
<br />
<br />
<form id="action_form" action="/family_budget/main_page" onsubmit="return validateForm()" method="post">
</form>
<footer>
<div id="user_footer">
Powered by Bottle
</div>
</footer>
</body>
</html>
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};
var validateForm = function() {
return true;
};
var show_add_form = function () {
var form = document.getElementById("action_form");
var date = document.createElement("input");
date.type = "text";
date.id = "date";
date.name = "date";
date.setAttribute("class","date");
d = new Date();
date.value = d.yyyymmdd();
form.appendChild(date);
var amount = document.createElement("input");
amount.type = "text";
amount.id = "amount";
amount.name = "amount";
amount.setAttribute("class","amount");
amount.placeholder="money";
form.appendChild(amount);
var select = document.createElement("select");
select.id = "type";
select.name = "type";
form.appendChild(select);
var option = document.createElement("option");
option.text = "choose one";
select.appendChild(option);
var option = document.createElement("option");
option.text = "income";
select.appendChild(option);
var option = document.createElement("option");
option.text = "outcome";
select.appendChild(option);
var description = document.createElement("input");
description.type = "text";
description.id = "desc";
description.name = "desc";
description.setAttribute("class","description");
description.placeholder="description of money operation";
form.appendChild(description);
var br = document.createElement("br");
form.appendChild(br);
var submit = document.createElement("input");
submit.type = "submit";
submit.id = "submit";
submit.value = "submit";
form.appendChild(submit);
var cancel = document.createElement("input");
cancel.type = "button";
cancel.id = "cancel";
cancel.value = "cancel";
cancel.onclick = function() { hide_action_form(); };
form.appendChild(cancel);
};
var show_select_form = function() {
var form = document.getElementById("action_form");
var fieldset = document.createElement("fieldset");
fieldset.id = "selects";
var fieldset = document.createElement("fieldset");
var legend = document.createElement("legend");
legend.innerHTML = "Choose one of select queries: ";
fieldset.appendChild(legend);
var create_option = function(labeltext, id) {
var option = document.createElement("input");
option.type = "radio";
option.name = "select_query";
option.id = id
var label = document.createElement("label");
label.setAttribute('for', id);
label.innerHTML = labeltext
fieldset.appendChild(option);
fieldset.appendChild(label);
var linebreak = document.createElement("br");
fieldset.appendChild(linebreak);
};
create_option('SELECT all records', 'opt1');
create_option('SELECT all records with date from to', 'opt2');
create_option('SELECT all records with amount from to', 'opt3');
create_option('SELECT all records with description, which contains', 'opt4');
create_option('SELECT all income records', 'opt5');
create_option('SELECT all outcome records', 'opt6');
form.appendChild(fieldset);
var br = document.createElement("br");
form.appendChild(br);
var submit = document.createElement("input");
submit.type = "submit";
submit.id = "submit";
submit.value = "submit";
form.appendChild(submit);
var cancel = document.createElement("input");
cancel.type = "button";
cancel.id = "cancel";
cancel.value = "cancel";
cancel.onclick = function() { hide_action_form(); };
form.appendChild(cancel);
};
var hide_action_form = function() {
document.getElementById("action_form").innerHTML = "";
};
|
Вообще, злоупотреблять созданием элементов в js не надо. Данные должны быть отделены от кода, это во-первых, во-вторых, на чистом js создание элементов весьма геморно, как ты мог заметить - то, что в hmtl описываются одной строкой, в js создается тремя и выше.
Есть три варианта по упрощению. Первый - использовать jQuery. Он упрощает создание и работу с элементами:
$("<input type='button' id='cancel' value='cancel'>").bind("click", hide_action_form).appendTo(form);
//Либо
$("<input>", {
type: button,
id: cancel,
value: cancel
}).click(hide_action_form).appendTo(form); //click - это то же, что и bind("click"), повесить обработчик
//Либо
$("<input type='text'>").val("submit").attr("id", "submit").click(hide_action_form).appendTo(form);
Второй - описывать все элементы прямо в html и скрывать их ровно до тех пор, пока они не понадобятся (style="display: none;"). Третий - это использовать шаблоны. |
Цитата:
|
.setAttribute("class","description") можно заменить на .className = "description" для единообразия.) (class зарезервированное слово, потом со свойством пришлось извращаться)
P.S. Вы так и не поняли, что я имел ввиду под "полноценным примером".=\ |
Цитата:
П.С. Я уже нашел статейку на хабре |
Надо было одним целым рабочим примером. Нажал на кнопку и смотришь, а н собираешь разрозненные куски кода.
|
| Часовой пояс GMT +3, время: 08:27. |