Форум

Улугбек · #1 (**permalink**) 10.10.2010, 20:29

Народ очень нужна помощь, в jQuery начал разбираться не давно, да и в javascript не шарю, (я больше по серверной части) цель создать виджет типа iGoogle а конкретный пример на bfm.ru

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){

var columnslist='#sortable1, #sortable2, #sortable3, #sortable4';
function getItems(container,columnslist)//получаю расположение айтэмов в виде X%Y,X2%Y2|X3%Y3,X4%Y4 где '|'-разделение на столбцы а каждая пара X%Y это айтэм
{
var columns = [];

jQuery(columnslist).each(function(){
columns.push(jQuery(this).sortable('toArray').join (','));
});

return columns.join('|');
};

jQuery(function(){
jQuery(columnslist).sortable({
connectWith:'.connectedSortable',
update:function(){jQuery.cookie('items', getItems('#wrapper',columnslist));}//здесь с помошью UI создаю 4 sortable колонки и сохраняю их расположение при каждом обновлении в куках
});

});

jQuery(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-minusthick"></span>')
.end()
.find(".portlet-content");//добавляю "минус" на окошко чтобы сворачивать его

jQuery(".portlet-header .ui-icon").click(function() {
jQuery(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
jQuery(this).parents(".portlet:first").find(".port let-content").toggle();
});//ну а тут функция сворачивания

});

</script>

html и серверную часть показывать наверное толку нет это модуль для Joomla, а проблема у меня в том что, у меня все работает, сохраняет все в куках, подгружает обратно но мне нужно, чтобы состояние toggle или нет тоже было, то есть если пользователь закрыл страничку с 3мя свернутыми и 1й развернутой, чтобы именно так и загружалась обратно. может кто подсказать как это сделать Был бы очень благодарен. В принципе я понимаю что можно при каждом сворачивание добавить к id какой нибудь индикатор toggle(X%Y+,X%Y-) или нет а затем при подгрузке пройтись по всем элементам и свернуть те что надо или развернуть, но воплотить это в код на javascript времени не хватит, может кто сталкивался, помогите пожалуйста.

monolithed · #2 (**permalink**) 10.10.2010, 23:06

Приблизительно подход такой:

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/jquery.cookie.js.txt" type="text/javascript"></script>
<style>
.div1, .div2 {width: 200px; height: 30px;} .div1 {background: red;} .div2 {display: none; background: green;} .block {display: block;}
</style>

<script>
$(function(){
    $('.div1').each(function(){
	if(/block/.test($.cookie('demo'))){ //тут делаем проверку
		$(this).next().addClass('block');
	}
	$(this).click(function(){
		$(this).next().toggleClass('block');
			$.cookie('demo', $(this).next().attr('class'), {expires: 10, path: '/', domain: '/'});
		});
	});
});
</script>

<div class="div1"></div>
<div class="div2"></div>

Улугбек · #3 (**permalink**) 11.10.2010, 00:06

То есть мне даже и в серверную часть лезть не надо?)

и она сама сохранит и подгрузит?

Улугбек · #4 (**permalink**) 11.10.2010, 01:35

$(function(){
$('.div1').each(function(){
if(/block/.test($.cookie('demo'))){ //тут делаем проверку
$(this).next().addClass('block');

Ой по торопился радоваться, если этот код использовать для нескольких элементов 'div1' то из-за this она берет и у всех с этим классом класс и меняет, то есть если один видим то становятся видимы все и на оборот, я попробовал с id вот так

style>
#div1, #div2, #div3, #div4 {width: 200px; height: 30px;}
#div1 {background: red;}
#div2 { background: green;}
#div3{background-color:#000;}
#div4{ background: #3C0;}
.block {display: none;}
</style>

<script>
$(function(){
$('#div1,#div3').each(function(){
if(/block/.test($.cookie('demo'))){ //тут делаем проверку
$(this).next().addClass('block');
}
$(this).click(function(){
$(this).next().toggleClass('block');
$.cookie('demo', $(this).next().attr('class'), {expires: 10});
});
});
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body></html>

Но нет тот же эффект this то все равно '#div1,#div3' как укахать конкретный элемент?

Улугбек · #5 (**permalink**) 11.10.2010, 01:45

Я тут подумал, а в куках же
$.cookie('demo', $(this).next().attr('class'), {expires: 10}); каждый раз перезаписывается 1 переменная demo! Ну так это значит что это решение для 1го элемента

Подскажите решения для нескольких элементов.

monolithed · #6 (**permalink**) 11.10.2010, 08:08

Вы все напутали, я же для удобства примера написал цепочку $(this).next().

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/jquery.cookie.js.txt" type="text/javascript"></script>
<style>
.div1, .div2, .div3, .div4 {width: 200px; height: 30px;}
.div1 {background: red;}
.div2 {background: green;}
.div3 {background: #000;}
.div4 {background: #3C0;}
.div2, .div4 {display: none;}
.block {display: block;}
</style>

<script>
$(function(){
    $('#div1, #div2').each(function(){
        if(/block/.test($.cookie('demo'))){
            $(this).find('div').addClass('block'); //для всех div)
        }
         //тут возможные условия проверки
        $(this).click(function(){
            $(this).find('div').toggleClass('block');
            $.cookie('demo', $(this).next().attr('class'), {expires: 10});
        });
    });
});
</script>

<div id="div1">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
<div id="div2">
    <div class="div3"></div>
    <div class="div4"></div>
</div>

Форум

Справочник

Discord чат

Курсы javascript