Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nepster-web/js-comprise
Позволяет вместить в любом блоке любое количество элементов
https://github.com/nepster-web/js-comprise
Last synced: about 1 month ago
JSON representation
Позволяет вместить в любом блоке любое количество элементов
- Host: GitHub
- URL: https://github.com/nepster-web/js-comprise
- Owner: nepster-web
- Created: 2014-10-19T13:03:52.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2014-10-19T13:59:54.000Z (about 10 years ago)
- Last Synced: 2023-02-26T05:41:23.610Z (almost 2 years ago)
- Language: JavaScript
- Size: 133 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Comprise jQuery
===============
Плагин позволяет вместить в любом блоке любое количество элементов.
Определяет размер родительского блока элемента, затем размер и кол-во дочерних элементов и вычисляет расстояние на которое необходимо подвинуть все (кроме первого) элементы, чтобы они влезли в родительский элемент.
**Пример использования:**
```html
Demo
* {
outline: none !important;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
.camp {
width: 500px;
height: 100px;
border: solid 1px black;
overflow: hidden;
list-style-type: none;
text-align: center;
font-size: 0;
position: absolute;
}
.camp li{
width: 100px;
height: 100px;
border: solid 1px red;
display: inline-block;
font-size: 1rem;
text-align: left;
padding: 5px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
jQuery('.camp').comprise({
'child': 'li',
'margin': 'margin-left',
'size': 'px',
'extra': 0,
});
```
**Все настройки:**
`section` - Идентификатор родительского элемента
`child` - Тег дочерних элементов
`margin` - Отступ (например margin-left)
`size` - Мера измерения (например px)
`extra` - Дополнительный отступ к определенному
Использование функции
--------------------------
```js
/**
* Функция позволяет вместить в любом блоке любое кол-во элементов
*
* Определяет размер родительского блока элемента, затем
* размер и кол-во дочерних элементов и вычисляет расстояние
* на которое необходимо подвинуть все (кроме первого) элементы,
* чтобы они влезли в родительский элемент.
*
* var section Идентификатор родительского элемента
* var child Тег дочерних элементов
* var margin Отступ (например margin-left)
* var size Мера измерения (например px)
* var extra Дополнительный отступ к определенному
*
*/
function comprise(section, child, margin, size, extra) {
section = section || null;
var settings = new Object;
settings.child = child || 'li';
settings.margin = margin || 'margin-left';
settings.size = size || 'px';
settings.extra = extra || 0;
if (section) {
var $section = jQuery(section),
$elements = $section.find(settings.child),
$countElements = $elements.length;
var $elementSize = $section.find(settings.child).outerWidth(true),
$elementsContainer = $section.width();
if(($countElements * $elementSize) > $elementsContainer) {
var $lm = ($countElements * $elementSize - $elementsContainer) / ($countElements - 1);
$lm += settings.extra;
$section.find(settings.child + ':not(:first)').css(settings.margin, '-' + $lm + settings.size);
} else {
$section.find(settings.child + ':not(:first)').css(settings.margin, '0');
}
}
}
```
Рекомендации
--------------------------
Если Вы используете данный плагин (например в виде простой функции) и при этом Ваш макет сайта поддерживает адаптивную верстку, не забудьте вызвать функцию при ресайзе:
```js
comprise('.camp');
// Window Resize
window.onresize = function() {
comprise('.camp');
}
```