25.10.2019, 14:14
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
ozoro,
зачем вам эта переменная? используется в функции? так напишите во второй строке название этой функции.
|
|
25.10.2019, 14:25
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
var a = x; //default value
$(window).on("load resize", function() {
a = 1;
});
//other function
......
|
|
25.10.2019, 16:58
|
 |
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
рони,
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, 26.10.2019 в 00:58.
|
|
25.10.2019, 20:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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>
|
|
25.10.2019, 21:12
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
|
рони,
Благодарю, то что нужно!
|
|
25.10.2019, 21:14
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
|
рони,
Подскажи еще, как окно просмотра запускаемого кода на этом форуме делать большей высоты чем в дефолтном варианте?
|
|
25.10.2019, 21:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
ozoro,
[html run height=500]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
26.10.2019, 01:09
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от ozoro
|
|
то что нужно!
|
Потом после таких «то, что нужно!» приходится ещё решать тривиальные вещи путём нагромождения костылей или переделать по нормальному!
Я вам рекомендую использовать CSS-свойство columns, с которым вы можете легко и грамотно разделить своё содержимое на колонки, не делая перестановок в DOM.
Или если вы всё-таки хотите написать плагин, то не делайте перестановок в DOM, которые ломают селекторы, нумерацию и пр. Визуальные изменения должны происходить при помощи CSS, HTML не для раскрасок. Вы можете себе позволить перестановки только если не планируется напрямую работать с разметкой, в противном случае много багов, осложнении и ошибок предвидится.
Думаешь, если кусок кода написал, то никто ничего не поймёт?
Последний раз редактировалось Malleys, 26.10.2019 в 01:19.
|
|
27.10.2019, 02:38
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
|
Malleys,
Прислушаюсь к твоему мнению, возможно так и сделаю, уже думал об этом. Только вот в ie9 не поддерживается свойство columns, а пока что, думаю, еще надо его поддерживать...
|
|
|
|
