Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2019, 15:37
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 30

Помогите исправить JQuery плагин для разделения UL на равные списки
Плагин: https://github.com/weblinc/jquery-columnlist

Плагин разделяет нормально на одинаковое количество li в каждом ul когда исходный список такой:
<ul class="column-list-js">
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
        <li>Item #6</li>
        <li>Item #7</li>
        <li>Item #8</li>
        <li>Item #9</li>
        <li>Item #10</li>
        <li>Item #11</li>
        <li>Item #12</li>
    </ul>


Но если список со вложенными ul li, например такой:
<ul class="column-list-js">
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3
		<ul>
			<li>Item #3.1</li>
			<li>Item #3.2</li>
			<li>Item #3.3</li>
			<li>Item #3.3</li>
			<li>Item #3.2</li>
			<li>Item #3.3</li>
			<li>Item #3.3</li>				
		</ul>
       </li>
        <li>Item #4</li>
        <li>Item #5</li>
        <li>Item #6</li>
        <li>Item #7</li>
        <li>Item #8</li>
        <li>Item #9</li>
        <li>Item #10</li>
        <li>Item #11</li>
        <li>Item #12</li>
    </ul>


То если делать с помощью css список в несколько столбцов, например, в 2 столбца, то столбцы получаются не одинаковые, то есть вложенные ul li не учитываются.

Помогите исправить плагин, чтобы он учитывал вложенные ul li и формировал примерно одинаковые по высоте столбцы, однако чтобы вложенные ul li оставаличь в одном столбце, а не переносились в другой.

Для примера, ЧТОБЫ ДЕЛИЛ ВОТ ТАК:

<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>Воскресенск, юридическая консультация в Воскресенске</title>
    <meta name="description" content="">
		
<style>
	.column-list-js{ width:100%;position:relative;padding: 0 10px;border:1px solid #000;}
	.column-list{ display: inline-block;width:50%;}
	.column-listxxx-1{position:absolute;top:0}
	.column-list li{ margin:15px 0}
	.column-list-js li ul { margin-left: -25px;}
	
</style>	
	</head>
	<body>
		<ul class="column-list-js">		
		<li class="column-listxxx-0 column-list">
		<ul>
		<li>Пункт #1</li>
		<li>Пункт #2</li>
		<li>Пункт #3			
			<ul>
				<li>Подпункт #3.1</li>
				<li>Подпункт #3.2</li>
				<li>Подпункт #3.3</li>
				<li>Подпункт #3.4</li>
				<li>Подпункт #3.5</li>
				<li>Подпункт #3.6</li>
				<li>Подпункт #3.7</li>
				<li>Подпункт #3.8</li>
				<li>Подпункт #3.9</li>				
			</ul>
			
			</li>			
			<li>Пункт #4
			<ul>
				<li>Пункт #4.1</li>
				<li>Пункт #4.2</li>
				<li>Пункт #4.3</li>
			
			</ul>
			</li>
			</ul>
			</li>
			
			<li class="column-listxxx-1 column-list">
			<ul>
			<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>
				<li>Подпункт #7.6</li>
			
			</ul>			
			
			</li>			
			<li>Пункт #8</li>
			<li>Пункт #9</li>
			<li>Пункт #10</li>
			<li>Пункт #11</li>
			<li>Пункт #12</li>
			<li>Пункт #13</li>
			</ul>
			</li>
			</ul>


</body>
</html>



СЕЙЧАС ПЛАГИН ДЕЛИТ ВОТ ТАК:
<!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>
	.column-list-js{ width:100%;position:relative;padding: 0 10px;border:1px solid #000;}
	.column-list{ display: inline-block;width:50%;}
	.column-listxxx-1{position:absolute;top:0}
	.column-list li{ margin:15px 0}
	.column-list-js li ul { margin-left: -25px;}
	
</style>	
	</head>
	<body>
		<ul class="column-list-js">
			<li>Пункт #1</li>
			<li>Пункт #2</li>
			<li>Пункт #3
			
			<ul>
				<li>Подпункт #3.1</li>
				<li>Подпункт #3.2</li>
				<li>Подпункт #3.3</li>
				<li>Подпункт #3.4</li>
				<li>Подпункт #3.5</li>
				<li>Подпункт #3.6</li>
				<li>Подпункт #3.7</li>
				<li>Подпункт #3.8</li>
				<li>Подпункт #3.9</li>			
			</ul>
			
			</li>
			<li>Пункт #4

			<ul>
				<li>Пункт #4.1</li>
				<li>Пункт #4.2</li>
				<li>Пункт #4.3</li>
			
			</ul>
			
			</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>
				<li>Подпункт #7.6</li>
			
			</ul>			
			</li>
			<li>Пункт #8</li>
			<li>Пункт #9</li>
			<li>Пункт #10</li>
			<li>Пункт #11</li>
			<li>Пункт #12</li>
			<li>Пункт #13</li>			
		
		</ul>
		
		
		
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		
<script>
// jquery.columnlist.js
// @weblinc, @jsantell (c) 2012

;(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' ),
              perColumn = Math.ceil( $children.length / size ),
              $column;
            for (var i = 0; i < size; i++) {
                $column = $('<ul />').appendTo( returnColumn( i ) );
                for ( var j = 0; j < perColumn; j++ ) {
                    if ( $children.length > i * perColumn + j ) {
                        $column.append( $children[ i * perColumn + j ]);
                    }
                }
                $list.append( $column.parent() );
            }
        });

        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 : 2,
        'class' : 'column-list',
        incrementClass : 'column-listxxx-'
    });

		</script>
	</body>
</html>

Последний раз редактировалось ozoro, 09.10.2019 в 16:05.
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2019, 16:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

columnlist jquery
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>
    .column-list-js{ width:100%;position:relative;padding: 0 10px;border:1px solid #000;}
    .column-list{ display: inline-block;width:50%;}
    .column-listxxx-1{position:absolute;top:0}
    .column-list li{ margin:15px 0}
    .column-list-js li ul { margin-left: -25px;}

</style>
    </head>
    <body>
        <h1>jQuery Column Lists</h1>


        <h2>Колонки</h2>
        <ul class="column-list-js">
            <li>Пункт #1</li>
            <li>Пункт #2</li>
            <li>Пункт #3

            <ul>
                <li>Пункт #3.1</li>
                <li>Пункт #3.2</li>
                <li>Пункт #3.3</li>
                <li>Пункт #3.4</li>
                <li>Пункт #3.5</li>
                <li>Пункт #3.6</li>
                <li>Пункт #3.7</li>
                <li>Пункт #3.8</li>
                <li>Пункт #3.9</li>
            </ul>

            </li>
            <li>Пункт #4

            <ul>
                <li>Пункт #4.1</li>
                <li>Пункт #4.2</li>
                <li>Пункт #4.3</li>

            </ul>

            </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>
                <li>Пункт #7.6</li>

            </ul>
            </li>
            <li>Пункт #8</li>
            <li>Пункт #9</li>
            <li>Пункт #10</li>
            <li>Пункт #11</li>
            <li>Пункт #12</li>
            <li>Пункт #13</li>

        </ul>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
// jquery.columnlist.js
// @weblinc, @jsantell (c) 2012

;(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' ),
                            perColumn = Math.ceil( lis.length / size ),
                            $column,
                            k = 0;
                        for (var i = 0; i < size; i++) {
                                $column = $('<ul />').appendTo( returnColumn( i ) );
                                for ( var j = 0; j < perColumn; j++ ) {
                                        var children = $children.eq(k);
                                        var len = children.find('li').length
                                        if ( k < lis.length && j + len <  perColumn) {
                                                $column.append(children);
                                                k++;
                                                j += len;
                                        }
                                }
                                $list.append( $column.parent() );
                        }
                });

                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 : 2,
                'class' : 'column-list',
                incrementClass : 'column-listxxx-'
        });

        </script>
    </body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2019, 19:12
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 30

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

В общем чтобы были столбцы примерно одинаковой высоты и пункты не вылазили за пределы контейнера
<ul class="column-list-js">
........
</ul>


А сейчас если добавить еще пунктов и подпунктов (вложенных ul li), то получается вот что:

<!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>
    .column-list-js{ width:100%;position:relative;padding: 0 10px;border:1px solid #000;}
    .column-list{ display: inline-block;width:50%;}
    .column-listxxx-1{position:absolute;top:0}
    .column-list li{ margin:15px 0}
    .column-list-js li ul { margin-left: -25px;}

</style>
    </head>
    <body>
        <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>
                <li>Пункт #7.6</li>
                <li>Пункт #7.7</li>
                <li>Пункт #7.8</li>
                <li>Пункт #7.9</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>Пункт #17</li>
            <li>Пункт #18</li>
            <li>Пункт #19</li>
            <li>Пункт #20</li>
            <li>Пункт #21</li>
            <li>Пункт #22</li>
            <li>Пункт #23</li>
            <li>Пункт #24</li>
            <li>Пункт #25</li>
            <li>Пункт #16</li>
            <li>Пункт #27</li>
            <li>Пункт #28</li>
            <li>Пункт #29</li>
            <li>Пункт #30</li>
            <li>Пункт #31</li>
            <li>Пункт #32</li>
            <li>Пункт #33</li>
            <li>Пункт #34</li>
            <li>Пункт #35</li>
            <li>Пункт #37</li>
            <li>Пункт #37</li>			
        </ul>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
// jquery.columnlist.js
// @weblinc, @jsantell (c) 2012

;(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' ),
                            perColumn = Math.ceil( lis.length / size ),
                            $column,
                            k = 0;
                        for (var i = 0; i < size; i++) {
                                $column = $('<ul />').appendTo( returnColumn( i ) );
                                for ( var j = 0; j < perColumn; j++ ) {
                                        var children = $children.eq(k);
                                        var len = children.find('li').length
                                        if ( k < lis.length && j + len <  perColumn) {
                                                $column.append(children);
                                                k++;
                                                j += len;
                                        }
                                }
                                $list.append( $column.parent() );
                        }
                });

                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 : 2,
                'class' : 'column-list',
                incrementClass : 'column-listxxx-'
        });

        </script>
    </body>
</html>

Последний раз редактировалось ozoro, 09.10.2019 в 19:20.
Ответить с цитированием
  #4 (permalink)  
Старый 09.10.2019, 19:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

ozoro,
сколько колонок нужно?
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2019, 19:48
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 30

рони,
в основном 2, а где-то и 3 или 4 необходимо будет... Думал как-то универсально можно сделать... Количество пунктов и вложенных пунктов может быть разное...

Последний раз редактировалось ozoro, 09.10.2019 в 19:51.
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2019, 21:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

jQuery Column Lists
ozoro,
изменил скрипт и css

<!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>
    .column-list-js{
    padding: 0 10px;
    border:1px solid #000;
    display: flex;}
    .column-list{flex: 1;
    list-style: none}


</style>
    </head>
    <body>
        <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>
                <li>Пункт #7.6</li>
                <li>Пункт #7.7</li>
                <li>Пункт #7.8</li>
                <li>Пункт #7.9</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>Пункт #17</li>
            <li>Пункт #18</li>
            <li>Пункт #19</li>
            <li>Пункт #20</li>
            <li>Пункт #21</li>
            <li>Пункт #22</li>
            <li>Пункт #23</li>
            <li>Пункт #24</li>
            <li>Пункт #25</li>
            <li>Пункт #26</li>
            <li>Пункт #27</li>
            <li>Пункт #28</li>
            <li>Пункт #29</li>
            <li>Пункт #30</li>
            <li>Пункт #31</li>
            <li>Пункт #32</li>
            <li>Пункт #33</li>
            <li>Пункт #34</li>
            <li>Пункт #35</li>
            <li>Пункт #37</li>
            <li>Пункт #38</li>
        </ul>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
// jquery.columnlist.js
// @weblinc, @jsantell (c) 2012

;(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 : 3,
                'class' : 'column-list',
                incrementClass : 'column-listxxx-'
        });

        </script>
    </body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 09.10.2019, 21:49
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 30

рони,
Круто, то что надо. Благодарю, как всегда помог быстро и четко!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 14:31
плагин jquery ajax upload Karabella jQuery 0 06.06.2013 20:25
Плагин jParallax для jQuery britanik jQuery 4 14.02.2010 11:11
syncTranslate jQuery плагин Snowcore Ваши сайты и скрипты 0 20.10.2009 18:00
Плагин для файрфокса - чтение изображений SunnyDay Общие вопросы Javascript 4 28.04.2009 16:30