Плавное раскрытие и сворачивание блока
Имеется скрипт который позволяет раскрывать и сворачивать блоки при этом позиция блока запоминается в cookie, но слишком всё резко, нужно добавить плавности при сворачивание и разворачивание блока
вот код
-----------------------------------------------
function setCookie(name, value, expiredays, path, domain, secure) {
if (expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
var expires = exdate.toGMTString();
}
document.cookie = name + "=" + escape(value) +
((expiredays) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie(name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset)
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
return setStr;
}
function block_now(id) {
if(getCookie(id) == 1) {
display = 'none';
setCookie(id, 0, 90, "/");
} else {
display = '';
setCookie(id, 1, 90, "/");
}
document.getElementById(id).style.display = display;
}
function block_start(id) {
var cookie_stat = getCookie(id);
if((cookie_stat == 1) || (!cookie_stat)){
display = '';
} else {
display = 'none';
}
document.getElementById(id).style.display = display;
}
Подключается это так
<script type="text/javascript" src="{THEME}/js/block.js"></script>
<script type="text/javascript">
function block_search(){
block_start("blok_1");
block_start("blok_2");
// block_start("blok_3");
// block_start("blok_4");
// добавляет столько вызовов функций, сколько у вас будет блоков
}
</script>
И так
<table>
<tr onClick="block_now('blok_1')" style="cursor:pointer;">
<th>Заголовок блока</th>
</tr>
<tr id="blok_1" style="">
<td>Содержимое блока</td>
</tr>
</table>
Помогите пожалуйста очень нужно :) |
Ну вот так можно:
function block_now(id) {
if(getCookie(id) == 1) {
$('#' + id).stop().slideUp();
setCookie(id, 0, 90, "/");
} else {
$('#' + id).stop().slideDown();
setCookie(id, 1, 90, "/");
}
}
только библиотеку jquery подключить, если у вас не подключена |
Цитата:
|
У вас jquery подключена?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
function setCookie(name, value, expiredays, path, domain, secure) {
if (expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
var expires = exdate.toGMTString();
}
document.cookie = name + "=" + escape(value) +
((expiredays) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie(name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset)
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
return setStr;
}
function block_now(id) {
if(getCookie(id) == 1) {
$('#' + id).stop().slideUp();
setCookie(id, 0, 90, "/");
} else {
$('#' + id).stop().slideDown();
setCookie(id, 1, 90, "/");
}
}
function block_start(id) {
var cookie_stat = getCookie(id);
if((cookie_stat == 1) || (!cookie_stat)){
display = '';
} else {
display = 'none';
}
document.getElementById(id).style.display = display;
}
</script>
<table>
<tr onClick="block_now('blok_1')" style="cursor:pointer;">
<th>Заголовок блока</th>
</tr>
<tr>
<td>
<div id="blok_1">
Содержимое блока <br>
Содержимое блока <br>
Содержимое блока <br>
Содержимое блока <br>
Содержимое блока
</div>
</td>
</tr>
</table>
<script>
block_start("blok_1");
</script>
|
можно и так :
<style>
div {
-moz-transition : height 1s ease-in-out;
transition : height 1s ease-in-out;
-webkit-transition : height 1s ease-in-out;
-o-transition : height 1s ease-in-out;
overflow: hidden;
height: 200px; /* пример. */
}
div.an{
height: 0;
}
</style>
<script type="text/javascript">
function setCookie(name, value, expiredays, path, domain, secure) {
if (expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
var expires = exdate.toGMTString();
}
document.cookie = name + "=" + escape(value) +
((expiredays) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie(name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset)
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
return setStr;
}
function block_now(id) {
if(getCookie(id) == 1) {
//set class
document.getElementById(id).className = "an";
setCookie(id, 0, 90, "/");
} else {
//remove class
document.getElementById(id).className = "";
setCookie(id, 1, 90, "/");
}
}
function block_start(id) {
var cookie_stat = getCookie(id);
if((cookie_stat == 1) || (!cookie_stat)){
display = '';
} else {
display = 'none';
}
document.getElementById(id).style.display = display;
}
</script>
<table>
<tr onClick="block_now('blok_1')" style="cursor:pointer;">
<th>Заголовок блока</th>
</tr>
<tr>
<td>
<div id="blok_1">
Содержимое блока <br>
Содержимое блока <br>
Содержимое блока <br>
Содержимое блока <br>
Содержимое блока
</div>
</td>
</tr>
</table>
|
jQuery разумеется подключен
|
Сделал как показал kostr, но закрытый блок при перезагрузке страницы, иногда на немного открывается.
И как бы иконки подцепить + и - (откр. закр. блок) |
| Часовой пояс GMT +3, время: 11:17. |