работа с контентом в jquery
Доброго времени суток, подскажите пожалуйста какой нибудь вариант решения или метод, задача в следующем:
Е нас есть блок <div id='тянучка'> он тянущийся (допустим начальное его значение width:800px;), в нем лежат <div class='блок'> блоки (например их 10шт с max-width:200px; и float:left; ) т.е. что то вроде: <div id='тянучка'> <div class='блок'>1</div> <div class='блок'>2</div> <div class='блок'>3</div> <div class='блок'>4</div> <div class='блок'>5</div> <div class='блок'>6</div> <div class='блок'>7</div> <div class='блок'>8</div> <div class='блок'>9</div> <div class='блок'>0</div> </div> т.е. сейчас блоки лепятся друг к другу слева и переносятся вниз как только им не хватает места. Вопрос такой, необходимо, чтобы эти блоки при начальном значении в 800px у id='тянучка' располагались так: 1 4 7 0 2 5 8 3 6 9 т.е. в 4 в столбца, а при уменьшении до 600 так: 1 5 9 2 6 0 3 7 4 8 думаю логика понятна, соответственно чем меньше, id='тянучка', тем меньше столбцов, чем больше, тем столбцов больше. Решения я не от кого не прошу(хотя если кто напишет буду вовсе не против), подскажите какими манипуляциями или наборами необходимо аперировать при работе в jqueri с контентом, ведь по сути здесь нужно будет добавлять дивы, а потом их переставлять в другое место. Заранее спасибо! |
Нет, это я ерунду посоветовал. Достаточно просто написать плагинчик который будет переставлять блоки в нужном порядке. Набросал примерную реализацию.
<style>
.parent {
width: 200px;
background-color: #dcdcdc;
border: 1px #deb887 solid;
}
.child {
width: 55px;
display: inline-block;
border: 1px dotted #8fbc8f;
}
</style>
<div class="parent">
<div class="child">1 child</div>
<div class="child">2 child</div>
<div class="child">3 child</div>
<div class="child">4 child</div>
<div class="child">5 child</div>
<div class="child">6 child</div>
<div class="child">7 child</div>
<div class="child">8 child</div>
<div class="child">9 child</div>
<div class="child">10 child</div>
</div>
<button>200px</button>
<button>250px</button>
<button>150px</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$.fn.columns = function(options) {
var settings = $.extend({
restoreOrder: false,
empty: '<div style="clear: both;" class="not-child"></div>'
}, options);
return this.each(function() {
var items = Array.prototype.slice.call($(this).children(':not(.not-child)'));
if (settings.restoreOrder) {
var toArray = function(obj) {
var arr = [];
var tmp = [];
var add = [];
var ndx;
if (!obj.constructor.toString().match('Object')) {
return obj;
}
for (ndx in obj) {
if (isNaN(ndx)) {
tmp.push(obj[ndx]);
continue;
}
if (ndx - arr.length > 0) {
add = new Array(ndx - arr.length);
add.push(obj[ndx]);
arr = arr.concat(add);
}
else {
arr[ndx] = obj[ndx];
}
}
for (ndx in tmp) {
arr.push(tmp[ndx]);
}
return arr;
}
var order = $(this).data['order'].split(',');
var obj = {};
for (var i in order) {
obj[order[i]] = items[i];
}
items = toArray(obj);
}
var cols = Math.floor($(this).width() / $(this).find(':first').outerWidth());
var rows = Math.floor($(this).height() / $(this).find(':first').outerHeight());
var size = items.length;
var count = 0;
var order = [];
$(this).empty();
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
if (count <= size) {
var index = i + rows * j;
var item = items[index];
if (!item) {
item = settings.empty;
}
else {
order.push(index);
}
$(this).append(item);
count++;
}
else {
break;
}
}
}
$(this).data['order'] = order.join(',');
});
};
$('.parent').columns();
$('button').click(function() {
$('.parent').css('width', $(this).text()).columns({restoreOrder: true});
});
</script>
|
Спасибо большое!
Осталось только разобраться во всем этом. Я то думал что все будет значительно короче. |
[quote=ваый;119313]Достаточно просто написать плагинчик который будет переставлять блоки в нужном порядке. Набросал примерную реализацию...
Доброго вам времени. С вашим скриптом что то так и не разобрался, по нажатию он работает, а вот когда его креплю на resize то неработает. В итоге сделал вот что: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- Следующие три строки необходимы для определинея плагина Resizable jquery -->
<link type="text/css" href="http://www.trueski.ru/cms2/css/start/jquery.custom.css" rel="stylesheet" />
<script src="http://www.trueski.ru/cms2/script/jqueryMin.js" type="text/javascript"></script>
<script src="http://www.trueski.ru/cms2/script/jquery-ui.custom.min.js" type="text/javascript"></script>
<style>
.parent2{
width:100px;
float:left;
/*border: 1px #f00 solid;*/
}
.child2{
width:100px;
clear: both;
border: 1px #deb887 solid;
}
.content{
width:331px;
border: 5px #f00 solid;
overflow:hidden;
}
</style>
<div class='content' id='content' class="ui-widget-content" >
<div class="child2" id='1'>1 child2</div>
<div class="child2" id='2'>2 child2</div>
<div class="child2" id='3'>3 child2</div>
<div class="child2" id='4'>4 child2</div>
<div class="child2" id='5'>5 child2</div>
<div class="child2" id='6'>6 child2</div>
<div class="child2" id='7'>7 child2</div>
<div class="child2" id='8'>8 child2</div>
<div class="child2" id='9'>9 child2</div>
<div class="child2" id='10'>10 child2</div>
</div>
<script type="text/javascript">
var cont = $('#content').children(); // сохраняем наш первоначальный контент
$(document).ready(function(){
stretch()
});
$(function(){ // тянучка
$("#content").resizable({
minWidth:100,
maxWidth:1100,
resize: function(event, ui) { stretch() }
});
});
function stretch()
{
var parentW = document.getElementById('content').clientWidth;
var kolDiv = 10; // 10 элементов div
var column = Math.floor( parentW / 100 ); // кол столбцов окр. в меньшую сторону
var step = Math.ceil( kolDiv / column); // шаг округ. в большую сторону
var from = 0; // от
var to ; // до
// и выводим их в новом DOMe
for(var i=0; i<=column-1 ; i++)
{
$('#content').append("<div class='parent2' id='collumn"+i+"'></div>");
to = step * (i+1);
$('#collumn'+i).append(cont.slice(from,to));
from = to;
}
}
</script>
Не совсем понял как вы вставляете готовый пример на сайт, очень интересно узнать. Но если скопировать код и запустить его локально то можно будет увидеть блок, который можно растягивать по ширине и высоте, а внутри будет меняться так как я описывал. Проблема в том что это происходит только с одним блоком т.е. если в моем контенте нужно добавить еще один блок, то понадобиться так же добавлять ему id? а так же добавлять JS в скрипт, а это неудобно. Не могли бы вы помоч, довести мой пример до ума, например вставив ваш код в мою тянучку. |
| Часовой пояс GMT +3, время: 03:53. |