Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
slagemer1
44 / 26 / 16
Регистрация: 01.01.2014
Сообщений: 163
1

_jmatrix библиотека

13.02.2014, 21:03. Просмотров 442. Ответов 13
Метки нет (Все метки)

Всем привет, сегодня сделал библиотечку в основном по своим нуждам и так получилось, что может кому и пригодится. Код генерирует матрицу с указанными вами параметрами. Для работоспособности кода, нужна библиотека jQuery.

Из свойств для таблицы:

Javascript
1
2
3
4
5
6
7
8
9
10
11
    
    window._cellsX=6;                           //Количество горизонтальных ячеек
    window._cellsY=4;                           //Количество вертикальных ячеек
    window._cellsPosition='absolute';           //Position ячеек
    window._cellsOpacity=1;                     //Прозрачность матрицы
    window._cellsText='';                       //Текст в ячейках
    window._cellsColor='#ffff';                 //Цвет ячеек
    window._cellsBorder='1px solid gray';       //Параметры рамки ячеек
    window._cellsWidth=40;                      //Ширина ячеек
    window._cellsHeight=40;                     //Длинна ячеек
    window._cellsCoords='hide';                 //В каждой ячейки пишет её координаты, если значение == 'show'
Чтобы вызвать генератор, нужно прописать функцию _jmatrix(object) и в скобках указать к какому объекту применяется.

Пример кода:
Javascript
1
2
3
4
5
_cellsWidth=40;
_cellsHeight=40;
_cellsX=4;
_cellsY=5;
_jmatrix($('#div'));
Очень буду рад, если кому-то помог) Спасибо за внимание)
1
Вложения
Тип файла: rar jmatrix.rar (696 байт, 4 просмотров)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.02.2014, 21:03
Ответы с готовыми решениями:

Библиотека Chart.js
Кто работал с такой библиотекой, наверное, вопрос к Вам: как сделать, чтобы при отрисовке графика...

Библиотека c3js
Добрый день. Никак не могу разобраться, как добавить над графиком заголовок. Пример графика:...

Нужна 3D библиотека
Всем привет! Подскажите плиз, какие есть 3D библиотеки для реализации простых 3D эффектов -...

библиотека Highstock
Есть демка хочу запустить с компа не получается,вроде как валидотор JSON ругается на...

Библиотека backbone.js
Добрый вечер. Заранее прошу прощения, если разместила не в тот раздел, просто не нашла...

13
slagemer1
44 / 26 / 16
Регистрация: 01.01.2014
Сообщений: 163
13.02.2014, 21:24  [ТС] 2
Так же неочевидные ошибки:

Ссылка на файл должна лежать после файла jQuery и до файла в котором используются его элементы.
0
Nameless One
Эксперт С++
5788 / 3437 / 351
Регистрация: 08.02.2010
Сообщений: 7,448
14.02.2014, 06:36 3
Критика:
  • Использовать «глобальные» переменные без веской на то причины — плохо, очень плохо.
  • Зачем в качестве ячеек матрицы использовать DIVы, а не ячейки (TD) таблицы?
  • Расширения для jQuery пишутся не так.

Переделал твой код c учётом своих замечаний:
Javascript
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
(function ($) {
  var DEFAULTS = {
    cols: 6
  , rows: 4
  , opacity: 1
  , text: ''
  , color: '#FFF'
  , border: '1px solid gray'
  , width: 40
  , height: 40
  };
  
  $.fn.matrix = function (options) {
    return this.each(function () {
      var settings = $.extend({}, DEFAULTS, this.dataset, options || {});
      
      $.each(['width', 'height', 'rows', 'cols'], function () {
        settings[this] = parseInt(settings[this], 10);
      });
      
      var self = this;
      
      if (!(/^table$/i).test(this.tagName)) {
        var table = document.createElement('table');
        this.appendChild(table);
        self = table;
      }
        
      for (var i = 0; i < settings.rows; ++i) {
        var tr = $('<tr>');
        
        for (var j = 0; j < settings.cols; ++j) {
          var text;
          
          if (typeof settings.text === 'function') {
            text = settings.text(i, j, settings);
          } else {
            text = settings.text;
          }
          
          $('<td>')
            .css('opacity', settings.opacity)
            .css('width', settings.width)
            .css('height', settings.height)
            .css('background-color', settings.color)
            .css('border', settings.border)
            .html(text)
            .appendTo(tr);
        }
        
        $(self).append(tr);
      }
    });
  };
})(jQuery);
Значение опций берётся из объекта-параметра метода и атрибутов data-* (в порядке уменьшения приоритета: параметр → data-*). Если значение какой-то опции не было указано, то используется значение по умолчанию.

Пример использования:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="matrix" data-rows="10" data-cols="5" data-width="100" data-color="#EEE"></div>
 
....
 
 
<script>
  $(function () {
    $('#matrix').matrix({
      text: function (i, j) {
        return 'Cell ' + (i + 1) + ' ' + (j + 1);
      }
    });
  });
</script>
Демо.
1
slagemer1
44 / 26 / 16
Регистрация: 01.01.2014
Сообщений: 163
14.02.2014, 17:51  [ТС] 4
Таблицы - зло, это факт, не для верстки ни для чего, они уже давно ушли в мир иной. Стоит не делать расстояний между ячейками, матрица рассчитана на то, чтобы сделать её прозрачной и в обрабатывать область по каждой ячейке. А так спс, что показал, как все делается. Я вроде уже весь js где мог переизучал, а все равно, когда что-то пишут, всегда что-то странное и новое, я просто уже не знаю где всю инфу найти.
0
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
14.02.2014, 18:05 5
Таблицы - зло, это факт, не для верстки ни для чего, они уже давно ушли в мир иной.
Таблицы в мир иной не уходили, просто надо правильно их использовать. Таблицы следует и надо использовать для табличных данных. В вашем случае с точки зрения семантики и удобства больше подходит таблица, как вам и написал Nameless One .
0
slagemer1
44 / 26 / 16
Регистрация: 01.01.2014
Сообщений: 163
14.02.2014, 18:08  [ТС] 6
Недавно устроился на работу по разработке мобильных приложений на андроид, так у нас верстальщик на меня постоянно орет, что я использую таблицы и алерты, после этого я избавился от привычки юзать эти вещи.
0
Lazy_Den
2979 / 2641 / 1334
Регистрация: 15.01.2014
Сообщений: 5,798
14.02.2014, 18:13 7
Цитата Сообщение от slagemer1 Посмотреть сообщение
верстальщик на меня постоянно орет, что я использую таблицы
Посоветуйте этому недоверстальщику пройти курс повышения квалификации. Не зря в HTML5 всё ближе пытаются подойти к семантической верстке: каждый тег - для своей задачи. А таблица - незаменимый инструмент в своей сфере.
0
Nameless One
Эксперт С++
5788 / 3437 / 351
Регистрация: 08.02.2010
Сообщений: 7,448
14.02.2014, 18:19 8
Цитата Сообщение от slagemer1 Посмотреть сообщение
Таблицы - зло, это факт, не для верстки ни для чего, они уже давно ушли в мир иной.
Аргументируй.

Цитата Сообщение от slagemer1 Посмотреть сообщение
Стоит не делать расстояний между ячейками, матрица рассчитана на то, чтобы сделать её прозрачной и в обрабатывать область по каждой ячейке.
Ничто не мешает делать это с таблицами.

Цитата Сообщение от slagemer1 Посмотреть сообщение
так у нас верстальщик на меня постоянно орет, что я использую таблицы и алерты
Это не повод симулировать таблицы дивами, причём криво.
0
Lazy_Den
2979 / 2641 / 1334
Регистрация: 15.01.2014
Сообщений: 5,798
14.02.2014, 18:19 9
P.S. На странице раздела форума jQuery - 27 таблиц, если что А про главную страницу - я вообще промолчу.
0
slagemer1
44 / 26 / 16
Регистрация: 01.01.2014
Сообщений: 163
14.02.2014, 18:34  [ТС] 10
Ведь с дивами намного удобней работать, чем с таблицами, и код лаконичней, ну и этот сайт не является особым показательным примером) Чем же тоды дивы хуже таблицы? О_о По-моему валидней использовать дивы?
0
Lazy_Den
2979 / 2641 / 1334
Регистрация: 15.01.2014
Сообщений: 5,798
14.02.2014, 18:36 11
Цитата Сообщение от slagemer1 Посмотреть сообщение
Чем же тоды дивы хуже таблицы?
Никто не говорит о том, что хуже или лучше. Как же вы не понимаете? Дивы - для своих задач, таблицы - для своих.
0
Nameless One
Эксперт С++
5788 / 3437 / 351
Регистрация: 08.02.2010
Сообщений: 7,448
14.02.2014, 18:36 12
Цитата Сообщение от slagemer1 Посмотреть сообщение
Ведь с дивами намного удобней работать, чем с таблицами, и код лаконичней, ну и этот сайт не является особым показательным примером
Это-то с костылями типа absolute position?

Цитата Сообщение от slagemer1 Посмотреть сообщение
Чем же тоды дивы хуже таблицы? О_о По-моему валидней использовать дивы?
У них разные сферы применения. Это всё равно, что говорить «Чем отвёртка лучше молотка? О_о По-моему, валидней использовать молоток?»
0
EPMAK
tribal dance
167 / 151 / 36
Регистрация: 03.09.2009
Сообщений: 821
Записей в блоге: 17
16.02.2014, 15:36 13
Зря на парня наехали, необъяснив разницу применения дивов и таблиц. По своему топикстар прав. Применение дивов повсеместно, надеюсь так и будет.А таблицы вполне можно заменять списками.
0
Nameless One
Эксперт С++
5788 / 3437 / 351
Регистрация: 08.02.2010
Сообщений: 7,448
16.02.2014, 15:39 14
Цитата Сообщение от EPMAK Посмотреть сообщение
Применение дивов повсеместно, надеюсь так и будет.
Никто не призывает его использовать таблицы вместо дивов там, где это не нужно.

Цитата Сообщение от EPMAK Посмотреть сообщение
А таблицы вполне можно заменять списками.
Зачем?

Покажи код со списками, аналогичный коду в стартовом сообщении, который позволит создавать на одной странице сразу несколько «матриц». Только без костылей, пожалуйста.
0
16.02.2014, 15:39
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.02.2014, 15:39

Библиотека документирования кода
Добрый вечер! Я пишу справочник по html и хочу документировать свой код как на bootstrap, чтоб он...

JavaScript-библиотека Highcharts
Кто знаком с JavaScript-библиотекой Highcharts отзовитесь пожалуйста, я очень страстно желаю с вами...

jQuery не подключаеться библиотека
Подскажите , почему не подключается библиотека jQuery , или я че не так делаю? &lt;script ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru