1 (изменено: Эдвард, 2014-07-02 23:41:01)

Тема: JS: Итерактивный конструктор графика игр

Основная задача – создать интерактивный конструктор графика игр. В упрощённом варианте выглядит это примерно так: http://med-75.narod.ru/28/552.html .

Скрин:

http://www.e1.ru/fun/photo/view_pic.php/o/d96dbb288bf9974f675dba54ad465336/view.pic

В данный момент функция самого скрипта заключается лишь в том, что при нажатии кнопок тупо заполняются определённые ячейки заданным текстом. Но в идеале хотелось бы дополнить скрипт следующими условиями:

1. При нажатии кнопки ("Игра 1", "Игра 2" и т. д.) текст из её имени должен переноситься только в ту ячейку, которая предварительно активирована (т. е. выделена).

2. В зависимости от того, какой текст оказался в ячейке строки "Игры", в том же столбце напротив некоторых фамилий автоматически должны быть проставлены цифры (количество игр) по заданному шаблону для каждой игры.

3. В строках напротив фамилий должен работать счётчик игр. Т. е. каждая цифра правее предыдущей в строке должна быть больше на 1.

4. Должна быть предусмотрена возможность корректировки игр вручную в выделяемых ячейках (с последующей реакцией счётчика).

5. Дни недели должны соответствовать календарным (в зависимости от года, месяца, числа).

6. По команде кнопки "Сохранить" должен скопироваться в буфер итоговый вариант графика (в виде кода).

Заранее благодарю за помощь (буду благодарен даже за реализацию хоть какой-то части задачи).

2

Re: JS: Итерактивный конструктор графика игр

1. При нажатии кнопки ("Игра 1", "Игра 2" и т. д.) текст из её имени должен переноситься только в ту ячейку, которая предварительно активирована (т. е. выделена).

Насколько я понимаю, то при клике на кнопку фокус перенесётся на неё - выделение текста в некой ячейке будет утеряно.
Можно выбор ячеек организовать, например, "радио-кнопками" и скрипт всегда будет знать, какая ячейка "активна".

WBR. Roman

3

Re: JS: Итерактивный конструктор графика игр

Rom5 пишет:

Насколько я понимаю, то при клике на кнопку фокус перенесётся на неё - выделение текста в некой ячейке будет утеряно.
Можно выбор ячеек организовать, например, "радио-кнопками" и скрипт всегда будет знать, какая ячейка "активна".

Реально ли сделать радио-кнопки прямо на ячейках? Ибо если они будут где-то в стороне, само конструирование графика существенно усложнится.

4

Re: JS: Итерактивный конструктор графика игр

Эдвард пишет:
Rom5 пишет:

Насколько я понимаю, то при клике на кнопку фокус перенесётся на неё - выделение текста в некой ячейке будет утеряно.
Можно выбор ячеек организовать, например, "радио-кнопками" и скрипт всегда будет знать, какая ячейка "активна".

Реально ли сделать радио-кнопки прямо на ячейках? Ибо если они будут где-то в стороне, само конструирование графика существенно усложнится.

Да им (кнопкам), наверное, и не сильно важно -где именно быть.
Потестируйте пример - hta_radiobuttons.hta :


<HTML>
 <!-- hta_radiobuttons.hta  -->
<HEAD>
  <TITLE>HTA Demo</TITLE>
    <HTA:APPLICATION ID="oHTA"
     APPLICATIONNAME="myApp"
    />
 </HEAD>
<BODY >
<table width="100%" cellpadding="0" cellspacing="0" border="1">
    <tr>
        <td><label title="qq"><input type="radio" checked="checked" name="rb_1" value="11">ku</label></td>
        <td><label title="qqqq"><input type="radio" name="rb_1" value="12">kuku</label></td>
        <td><label title="qqqqqq"><input type="radio" name="rb_1" value="13">kukuku</label></td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
</table>

<input type="button" value="test" onclick="uf_test()">

<script type="text/javascript">

// copypaste from 
// http://stackoverflow.com/questions/3869535/how-to-get-the-selected-radio-button-value-using-js

function uf_test() {
    var checkedButton = getCheckedRadio(document.all.rb_1);
    if (checkedButton) {
            alert("The value is " + checkedButton.value);
    }
}

function getCheckedRadio(radio_group) {
    for (var i = 0; i < radio_group.length; i++) {
        var button = radio_group[i];
        if (button.checked) {
            return button;
        }
    }
    return undefined;
}

</script>

</BODY>
</HTML>
WBR. Roman

5

Re: JS: Итерактивный конструктор графика игр

Rom5 пишет:

Потестируйте пример

Тест работает, но идея с кнопками не очень нравится (лишнее загромождение конструктора). Если действительно нет других способов активировать ячейки (наподобие вордовских таблиц), то может, просто интегрировать в некоторые ячейки обычные текстовые формы, и дальше работать уже только с ними?.. Т. о., получится некая модель таблицы, которую при завершении всех операций можно было бы преобразовать в нормальную таблицу.

Вот как это могло бы выглядеть: http://med-75.narod.ru/28/553.html .

Но опять же встаёт вопрос, как скопировать по клику содержимое input-а (в поле управления) и вставить так же по клику в одну из форм (в самой таблице). Пока не придумал, как это сделать. Требуется помощь.

6

Re: JS: Итерактивный конструктор графика игр

Для вызова неких действий прямо из "input-а" можно создать своё контекстное меню (нагуглить примеры несложно - https://www.google.com.ua/?gws_rd=ssl#q … ntext+menu).

Мне лично по ПКМ вызов меню не нравится - я бы его вызов оформил дополнительной кнопкой в каждой ячейке таблицы сразу за полем ввода (это по моему для пользователя будет более очевидной деталью интерфейса), т.е. скрипт выполнения выбранного в меню действия будет "знать" с какой ячейкой таблицы ему надо работать.

ps. вообще-то я не так много работал с веб-формами. Может старшие товарищи подскажут идеи.

WBR. Roman

7 (изменено: Эдвард, 2014-07-06 17:35:45)

Re: JS: Итерактивный конструктор графика игр

Основная часть поставленной задачи выполнена собственными силами (с частичным заимствованием из Сети готовых решений). Код получился слишком громоздким, так что если кому интересно, лучше просмотреть прямо на странице: http://med-75.narod.ru/28/554.html .

Осталось реализовать идею с сохранением итоговой таблицы на другой странице сайта (правда, для этого понадобится хостинг с поддержкой php), ну и подправить кое-что по-мелочи: 1) корректировка расписания игр вручную (без шаблонов) с мгновенной реакцией счётчика; 2) при клонировании данных принимающие ячейки без текста почему-то утрачивают границы (так и не врубился пока, из-за чего это происходит); 3) также хотелось бы усовершенствовать календарь – чтобы он мог реагировать не только на индекс месяца, но и на название; 4) возможно, где-то стоило бы упростить сам код...

8 (изменено: Эдвард, 2014-07-15 15:50:17)

Re: JS: Итерактивный конструктор графика игр

Теперь с php: http://med-75.hol.es/1/554.php .

Однако где-то допущена ошибка.

Если упрощённо: по команде кнопки «Клонировать данные»

<input type="submit" value="Клонирование данных">

содержимое поля ввода

<input name="d1" type="text">

из формы

<form name="f1" action="506.php" method="post">

страницы 554.html переносится в ячейку таблицы на странице 506.php , где имеется следующий код:

<html>
<head>
<title>Проверка метода POST в PHP</title>
</head>
<body>
<table id="myTable1" name=t1" width=984  border=1 align="center" cellpadding=0 cellspacing=0 bordercolor="#000000" bgcolor="#000000">
      <td width=590 colspan=3 valign=top bgcolor="#dddddd" align="center" class="my-style"><?php
echo ($_POST["d1"]);
?></td>
 </table>
</body>
</html>

Визуально данная операция выполняется. Но при повторном заходе на страницу 506.php выясняется, что данные, на самом деле, не сохранились. Никак не могу разобраться, где допущена ошибка. Помогите, плиз!