ozoro,
зачем вам эта переменная? используется в функции? так напишите во второй строке название этой функции. |
var a = x; //default value $(window).on("load resize", function() { a = 1; }); //other function ...... |
рони,
laimas, Так как предложил laimas не получается, тем более уже пробовал так,... значение переменной функция не изменяет, выдает дефолтное значение, а если не объявлять за пределами функции, то выдает ошибку: ReferenceError: a is not defined. В общем этот тема в продолжение этой темы, думал здесь спрошу одно, там другое, но что-то получилось не очень. Выкладываю код здесь. Если функцию или код вызова (настройки функции), которую помог сделать рони, добавить в: $(window).on("load resize", function() { // код функции или ее вызова от [b]рони[/b] }); То при каждом ресайзе создается пустой блок внутри такого же блока... и так до бесконечности... Вот такая фигня получается: <div class="cs1"> <ul class="column-list-js"> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li class="column-listxxx-0 column-list"> <ul> <li> Пункт #1</li> <li>Пункт #2</li> <li>Пункт #3</li> <li>Пункт #4</li> <li>Пункт #5</li> <li>Пункт #6</li> <li>Пункт #7 <ul> <li>Пункт #7.1</li> <li>Пункт #7.2</li> <li>Пункт #7.3</li> <li>Пункт #7.4</li> <li>Пункт #7.5</li> </ul> </li><li>Пункт #8 <ul> <li>Пункт #8.1</li> <li>Пункт #8.2</li> <li>Пункт #8.3</li> </ul> </li> <li>Пункт #9</li> <li>Пункт #10</li> <li>Пункт #11 <ul> <li>Пункт #11.1</li> <li>Пункт #11.2</li> <li>Пункт #11.3</li> <li>Пункт #11.4</li> <li>Пункт #11.5</li> <li>Пункт #11.6</li> </ul> </li> <li>Пункт #12</li> <li>Пункт #13</li> <li>Пункт #14</li> <li>Пункт #15</li> <li>Пункт #16</li> <li>Пункт #14</li> <li>Пункт #15</li> <li>Пункт #16</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> Помогите поправить, чтобы не создавались такие пустые блоки при ресайзе. Вот запускаемый код: <!DOCTYPE html> <html> <head> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery Column Lists</title> <meta name="description" content=""> <style> .cs1 li { width:100%; padding: 2%; margin: 35px; outline: 1px dotted dodgerblue; } .column-list-js{ padding: 0 10px; border:1px solid #000; display: flex; } .column-list{ flex: 1; list-style: none } </style> </head> <body> <br> <div class="cs1"> <ul class="column-list-js"> <li> Пункт #1</li> <li>Пункт #2</li> <li>Пункт #3</li> <li>Пункт #4</li> <li>Пункт #5</li> <li>Пункт #6</li> <li>Пункт #7 <ul> <li>Пункт #7.1</li> <li>Пункт #7.2</li> <li>Пункт #7.3</li> <li>Пункт #7.4</li> <li>Пункт #7.5</li> </ul> </li> <li>Пункт #8 <ul> <li>Пункт #8.1</li> <li>Пункт #8.2</li> <li>Пункт #8.3</li> </ul> </li> <li>Пункт #9</li> <li>Пункт #10</li> <li>Пункт #11 <ul> <li>Пункт #11.1</li> <li>Пункт #11.2</li> <li>Пункт #11.3</li> <li>Пункт #11.4</li> <li>Пункт #11.5</li> <li>Пункт #11.6</li> </ul> </li> <li>Пункт #12</li> <li>Пункт #13</li> <li>Пункт #14</li> <li>Пункт #15</li> <li>Пункт #16</li> <li>Пункт #14</li> <li>Пункт #15</li> <li>Пункт #16</li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> // var sz = 0; //default value $(window).on("load resize", function() { var sz = 1; //other function ;(function( $ ) { $.fn.columnlist = function ( options ) { options = $.extend( {}, $.fn.columnlist.defaults, options ); return this.each(function () { var $list = $( this ), size = options.size || $list.data( 'columnList' ) || 1, $children = $list.children( 'li' ), lis = $list.find( 'li' ), $length = lis.length , $column = [], num = 0, k = 0; $children.each(function(i, li) { var len = $('li', li).length + 1; k += len; if(k >= $length / size) { $column[num] = i; ++num; --size; $length -= k; k = 0; } else $column[num] = i; }); k = 0; $column.forEach(function(n, i) { $li = returnColumn( i ); $ul = $('<ul />').appendTo($li); num = $children.slice(k, n + 1); k = n + 1; num.appendTo($ul); $list.append($li) }) }); function returnColumn ( inc ) { return $('<li class="' + options.incrementClass + inc + ' ' + options[ 'class' ] + '"></li>'); } }; $.fn.columnlist.defaults = { 'class' : 'column-list', incrementClass : 'column-list-' }; })( jQuery ); // настройки $('ul.column-list-js').columnlist({ size : sz, // значение переменной - количество колонок 'class' : 'column-list', incrementClass : 'column-listxxx-' }); }); </script> </body> </html> |
ozoro,
<!DOCTYPE html> <html> <head> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery Column Lists</title> <meta name="description" content=""> <style> .cs1 li { width:100%; padding: 2%; margin: 35px; outline: 1px dotted dodgerblue; } .column-list-js{ padding: 0 10px; border:1px solid #000; display: flex; } .column-list{ flex: 1; list-style: none } </style> </head> <body> <br> <div class="cs1"> <ul class="column-list-js"> <li> Пункт #1</li> <li>Пункт #2</li> <li>Пункт #3</li> <li>Пункт #4</li> <li>Пункт #5</li> <li>Пункт #6</li> <li>Пункт #7 <ul> <li>Пункт #7.1</li> <li>Пункт #7.2</li> <li>Пункт #7.3</li> <li>Пункт #7.4</li> <li>Пункт #7.5</li> </ul> </li> <li>Пункт #8 <ul> <li>Пункт #8.1</li> <li>Пункт #8.2</li> <li>Пункт #8.3</li> </ul> </li> <li>Пункт #9</li> <li>Пункт #10</li> <li>Пункт #11 <ul> <li>Пункт #11.1</li> <li>Пункт #11.2</li> <li>Пункт #11.3</li> <li>Пункт #11.4</li> <li>Пункт #11.5</li> <li>Пункт #11.6</li> </ul> </li> <li>Пункт #12</li> <li>Пункт #13</li> <li>Пункт #14</li> <li>Пункт #15</li> <li>Пункт #16</li> <li>Пункт #14</li> <li>Пункт #15</li> <li>Пункт #16</li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> // var sz = 0; //default value //other function ;(function( $ ) { $.fn.columnlist = function ( options ) { options = $.extend( {}, $.fn.columnlist.defaults, options ); return this.each(function () { var $list = $( this ), size = options.size || $list.data( 'columnList' ) || 1, $children = $list.children( 'li' ), lis = $list.find( 'li' ), $length = lis.length , $column = [], num = 0, k = 0; $children.each(function(i, li) { var len = $('li', li).length + 1; k += len; if(k >= $length / size) { $column[num] = i; ++num; --size; $length -= k; k = 0; } else $column[num] = i; }); k = 0; $column.forEach(function(n, i) { $li = returnColumn( i ); $ul = $('<ul />').appendTo($li); num = $children.slice(k, n + 1); k = n + 1; num.appendTo($ul); $list.append($li) }) }); function returnColumn ( inc ) { return $('<li class="' + options.incrementClass + inc + ' ' + options[ 'class' ] + '"></li>'); } }; $.fn.columnlist.defaults = { 'class' : 'column-list', incrementClass : 'column-list-' }; })( jQuery ); $(window).on("load resize", function() { var sz = window.innerWidth > 800 ? 2 : 1; $('ul.column-list-js').find(".column-list > ul > li").unwrap().unwrap(); $('ul.column-list-js').columnlist({ size : sz, // значение переменной - количество колонок 'class' : 'column-list', incrementClass : 'column-listxxx-' }); }); </script> </body> </html> |
рони,
Благодарю, то что нужно! |
рони,
Подскажи еще, как окно просмотра запускаемого кода на этом форуме делать большей высоты чем в дефолтном варианте? |
ozoro,
[html run height=500] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
Я вам рекомендую использовать CSS-свойство columns, с которым вы можете легко и грамотно разделить своё содержимое на колонки, не делая перестановок в DOM. Или если вы всё-таки хотите написать плагин, то не делайте перестановок в DOM, которые ломают селекторы, нумерацию и пр. Визуальные изменения должны происходить при помощи CSS, HTML не для раскрасок. Вы можете себе позволить перестановки только если не планируется напрямую работать с разметкой, в противном случае много багов, осложнении и ошибок предвидится. Думаешь, если кусок кода написал, то никто ничего не поймёт? |
Malleys,
Прислушаюсь к твоему мнению, возможно так и сделаю, уже думал об этом. Только вот в ie9 не поддерживается свойство columns, а пока что, думаю, еще надо его поддерживать... |
Часовой пояс GMT +3, время: 13:51. |