Модераторы: Poseidon
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> [JavaScript || PHP] Нарисовать сетку с выбором 
:(
    Опции темы
Rodman
Дата 1.3.2011, 14:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


CIO
****


Профиль
Группа: Участник
Сообщений: 6144
Регистрация: 7.5.2006
Где: Ukraine ⇛ Kyiv ci ty

Репутация: 26
Всего: 122
Дароф

Мне необходимо при помощи ЯваСкрипта или РНР нарисовать матрицу как в атаче. Зеленые квадратики это выбранные.

Входные данные:
 - размер матрицы
 - ограничение по выбору (сколько элементов можно выбрать или сделать зелеными)

Выход:
 - выбранные элементы



Присоединённый файл ( Кол-во скачиваний: 16 )
Присоединённый файл  Grid.png 2,21 Kb


--------------------

Лотереи мира
PM MAIL WWW Skype GTalk YIM MSN   Вверх
Rodman
Дата 13.3.2011, 21:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


CIO
****


Профиль
Группа: Участник
Сообщений: 6144
Регистрация: 7.5.2006
Где: Ukraine ⇛ Kyiv ci ty

Репутация: 26
Всего: 122
вот есть немного кода
ЯваСкрипт
Код

function getGridByLotery(id, type)
{
    $('#info_'+type).html('');
    $('#viewData_'+type).html('');
    $('#gridData_'+type).load('/lottery/ajaxGetGrid/',{ lottery_id:id, type: type  });
}

function clearGrid(type) {
    $('#info_'+type).html(''); 
    //$('#'+type+'_checkBtn').attr('disabled',"disabled");   
    $("#viewData_"+type).html(""); 
    $('.'+type+'_gridCell').removeClass('activeCell').removeClass(type+'_selectCell');  
}


function viewAqualRows(id, type, page)
{
    

    var selectedCells = new Array();
    
    $.each($('.'+type+'_selectCell'), function(){
        selectedCells.push($(this).get(0).id);
        return selectedCells;        
    });
    if (selectedCells.length >= 2) {
        $("#info_"+type).html("");
        $("#viewData_"+type).html("<div style=\"width:100%; text-align: center; padding-top: 65px;\"><img src=\"/inc/images/loading.gif\" /></div>");
        $.getJSON('/lottery/ajaxGetCoincideRows', {
                 id: id
                ,type: type
                ,page: page
                ,selectedCells:    selectedCells.join('|') 
            }, function(json){
                
                if(json.result){
                    $('#info_'+type).html('Count matches: <b>'+json.cnt+'</b>'); 
                    $("#viewData_"+type).html(json.html);    
                } else {
                    alert(json.message);
                }     
        });        
    }
    else {
        alert('You must select at least two numbers. Try again.');
    }
}
РНР
Код

                        <center>
                            <div>
                                <div id="gridData_exceptions"></div>
                                <br/>
                                <table>
                                    <tr>
                                        <td align="center">
                                            <input type="button" class="button" id="exceptions_checkBtn" onclick="viewAqualRows({$lottery.id}, 'exceptions', 1);" value="Check"/>
                                        </td>
                                        <td width="4">&nbsp;</td>
                                        <td align="center">
                                            <input type="button" class="button" id="button4" onclick="clearGrid('exceptions');" value="Clear"/>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </center>
...
{literal}
   <script type="text/javascript">
    /* <![CDATA[ */
        $(document).ready(function() {
            getGridByLotery({/literal}{$lottery.id}, 'perspectives'{literal});
            getGridByLotery({/literal}{$lottery.id}, 'exceptions'{literal});
        });
    /* ]]> */
   </script>
{/literal}


как это все объединить?


--------------------

Лотереи мира
PM MAIL WWW Skype GTalk YIM MSN   Вверх
patap
Дата 18.3.2011, 18:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 893
Регистрация: 7.5.2005
Где: Украина, Зп

Репутация: 1
Всего: 40
как бы на скорую руку, есть моменты "не красивые", но вроде как работает
Код

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      
      var selected_elements = 0;
      
      $('#generate').click(function() {
        var error = null;
        var size = parseInt($('#size').val());
        var limit = parseInt($('#limit').val());
        var d_rest = size % 10;
        
        selected_elements = 0;
        $('#result').html('');
        
        if ( ! size || ! limit) {
          alert('Size or Limit is not integer');
          return;
        } else if (size < limit) {
          alert('Size can not be less than Limit');
          return;
        }
        
        var matrix = '<div id="wrapper">';
        for (var i = 0; i < size; i++) {
          matrix += '<div id="element-' + (i + 1) + '" colored="0">' + (i + 1) + '</div>';
        }
        
        if (d_rest > 0) {
          d_rest = 10 - d_rest;
          for (var j = 0; j < d_rest; j++) {
            matrix += '<div>&nbsp;</div>';
          }
        }
        matrix += '</div>';
        
        $('#work-area').html(matrix);
        
        $('#controls').show();
        $('#wrapper').click(function(e) {
          
          var color_select = '#008000';
          var color_unselect = '#FFC0C0';
          var active = $(e.target);
          if ( ! $(active).attr('id')) return;
          
          if ($(active).attr('colored') == 0 && selected_elements != limit) {
            $(active).css('background', color_select).attr('colored', 1);
            selected_elements++;
          } else if ($(active).attr('colored') == 1) {
            $(active).css('background', color_unselect).attr('colored', 0);
            selected_elements--;
          }
          
        });
      });
      
      $('#check-button').live('click', function() {
        var selected_elems = $('#wrapper div');
        var len = selected_elems.length;
        var result = '';
        
        for (var i = 0; i < len; i++) {
          if ($(selected_elems[i]).attr('colored') == 1) {
            result += $(selected_elems[i]).text() + ', ';
          }
        }
        if (result != '') {
          result = result.substring(0, result.length - 2);
        } else {
          result = 'Nothing selected';
        }
        
        $('#result').html(result);
      });
        
      $('#cancel-button').live('click', function() {
        if (confirm('It will remove your progress. Are you sure?')) {
          $('#wrapper').die('click');
          selected_elements = 0;
          $('#size').val('');
          $('#limit').val('');
          $('#result').html('');
          $('#work-area').html('');
          $('#controls').hide();
        }
      });
      
    });
  </script>
  <style>
    #work-area {
      margin: 20px;
      width: 570px;
    }
    
    #controls {
      display: none;
      width: 570px;
      margin: 20px;
      text-align: center;
    }
    
    #wrapper div {
      margin: 0 5px 5px 0;
      float: left;
      width: 50px;
      height: 35px;
      background: #FFC0C0;
      border: solid 1px #000000;
      text-align: center;
      padding-top: 15px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>
    <div>Size: <input type="text" id="size" /></div>
    <div>Limit: <input type="text" id="limit" /></div>
    <div><input type="button" id="generate" value="Generate" /></div>
    <div id="result"></div>
  </div>
  
  <div id="work-area"></div>
  <div id="controls">
    <input type="button" id="check-button" value="Check" />
    <input type="button" id="cancel-button" value="Cancel" />
  </div>
  
</body>
</html>


Это сообщение отредактировал(а) patap - 19.3.2011, 16:10


--------------------
На боку кобура болталась, сзади шашка отцовская звякала. 
Впереди меня все хохотало, а позади все плакало (с)
PM MAIL ICQ   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Правила форума "Центр помощи"

ВНИМАНИЕ! Прежде чем создавать темы, или писать сообщения в данный раздел, ознакомьтесь, пожалуйста, с Правилами форума и конкретно этого раздела.
Несоблюдение правил может повлечь за собой самые строгие меры от закрытия/удаления темы до бана пользователя!


  • Название темы должно отражать её суть! (Не следует добавлять туда слова "помогите", "срочно" и т.п.)
  • При создании темы, первым делом в квадратных скобках укажите область, из которой исходит вопрос (язык, дисциплина, диплом). Пример: [C++].
  • В названии темы не нужно указывать происхождение задачи (например "школьная задача", "задача из учебника" и т.п.), не нужно указывать ее сложность ("простая задача", "легкий вопрос" и т.п.). Все это можно писать в тексте самой задачи.
  • Если Вы ошиблись при вводе названия темы, отправьте письмо любому из модераторов раздела (через личные сообщения или report).
  • Для подсветки кода пользуйтесь тегами [code][/code] (выделяйте код и нажимаете на кнопку "Код"). Не забывайте выбирать при этом соответствующий язык.
  • Помните: один топик - один вопрос!
  • В данном разделе запрещено поднимать темы, т.е. при отсутствии ответов на Ваш вопрос добавлять новые ответы к теме, тем самым поднимая тему на верх списка.
  • Если вы хотите, чтобы вашу проблему решили при помощи определенного алгоритма, то не забудьте описать его!
  • Если вопрос решён, то воспользуйтесь ссылкой "Пометить как решённый", которая находится под кнопками создания темы или специальным флажком при ответе.

Более подробно с правилами данного раздела Вы можете ознакомится в этой теме.

Если Вам помогли и атмосфера форума Вам понравилась, то заходите к нам чаще! С уважением, Poseidon, Rodman
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Центр помощи | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0442 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.