- разгрузка страницы;
- создание различных FAQ-оформлений;
С первым понятно - длинные сообщения-простыни иногда так и хочется сократить, оставив минимум нужного, а остальное спрятав с глаз долой до востребования. Во втором случае имеется в виду создание оформлений типа:
Вопрос: Туц?
Ответ: Тудуц!
так, чтобы ответ появлялся после нажания на вопрос.
Моему удивлению не было предела, когда я не обнаружил ни встроенных средств для этого, ни (что особо удивительно) сторонних решений. Вернее, сторонние решения были, но меня они не удовлетворили, во-первых, не всегда наличием именно необходимого функционала, во-вторых, иногда сложностью реализации - слишком много изменений требовалось внести в шаблон блога, а я, как человек, далекий от верстки, менять что-то в шаблонах (в коих слабо разбираюсь) не люблю. Посему решил вспомнить второй курс института вкупе с джаваскрипом, тогда в мою жизнь вошедшим и тогда же, кстати, ее надолго покинувшем.
Итак, для использования катов необходимо внести две правки в шаблоне блога.
Правка первая:
В стили (между тегами <b:skin>) нужно добавить следующее значение:
div.mycut {
/* прячет текст под катом */
/* прячет текст под катом */
display:none;
}
span.mycut {
/* Внешний вид ссылки на сворачивание/разворачивание */
/* Внешний вид ссылки на сворачивание/разворачивание */
cursor:pointer;
text-decoration:underline;
font-weight:bold;
}
Правка вторая:
Затем внутри тега <body> нужно добавить:
<script type='text/javascript'>
/* CUTs in Blogger © mazdaika.blogspot.com */
function cut_prepare()
{
/*готовит документ к обработке катов: добавляет поле для ссылки на разворот/сворот, именует его, вешает обработчик клика*/
var mycuts = $("div.mycut");
for(var i = 0; i < mycuts.length; i++)
{
$(mycuts[i]).attr("name", ">"+$(mycuts[i]).attr("name")).attr("name2", "\^"+$(mycuts[i]).attr("name2"));
$(mycuts[i]).after("<span class='mycut'>"+ $(mycuts[i]).attr("name") +"</span>")
}
$("span.mycut").click(function() {uncut(this);})
}
function uncut(obj)
{
/*разворотка ката. Отображает тело ката, меняет имя ссылки на разворот/сворот, меняет обработчик ссылки*/
$(obj).prev().css("display","block");
$(obj).attr("innerHTML", $(obj).prev().attr("name2")).click(function() {cut(this);});
}
function cut(obj)
{
/*сворот ката. Прячет тело ката, меняет имя ссылки на разворот/сворот, меняет обработчик ссылки*/
$(obj).prev().css("display","none");
$(obj).attr("innerHTML", $(obj).prev().attr("name")).click(function() {uncut(this);});
}
$(document).ready(cut_prepare)
/* end CUTs in Blogger © mazdaika.blogspot.com */
</script>
Чтобы код выше правильно работал, необходимо наличие подключенной библиотеки jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Если она подключена в одном из виджетов, повторного подключения не требуется.
Теперь можно использовать каты. Для этого заключаем тело ката в такую оболочку:
<div class="mycut" name="Open" name2="Close"> Body </div>
где name - имя ссылки на разворот ката, name2 - имя ссылки на сворачивание ката, Body - тело ката.
Все, можно пользоваться. Количество таких катов на страницу не ограничено.
Пример1:
Пример2:
Правка вторая:
Затем внутри тега <body> нужно добавить:
<script type='text/javascript'>
/* CUTs in Blogger © mazdaika.blogspot.com */
function cut_prepare()
{
/*готовит документ к обработке катов: добавляет поле для ссылки на разворот/сворот, именует его, вешает обработчик клика*/
var mycuts = $("div.mycut");
for(var i = 0; i < mycuts.length; i++)
{
$(mycuts[i]).attr("name", ">"+$(mycuts[i]).attr("name")).attr("name2", "\^"+$(mycuts[i]).attr("name2"));
$(mycuts[i]).after("<span class='mycut'>"+ $(mycuts[i]).attr("name") +"</span>")
}
$("span.mycut").click(function() {uncut(this);})
}
function uncut(obj)
{
/*разворотка ката. Отображает тело ката, меняет имя ссылки на разворот/сворот, меняет обработчик ссылки*/
$(obj).prev().css("display","block");
$(obj).attr("innerHTML", $(obj).prev().attr("name2")).click(function() {cut(this);});
}
function cut(obj)
{
/*сворот ката. Прячет тело ката, меняет имя ссылки на разворот/сворот, меняет обработчик ссылки*/
$(obj).prev().css("display","none");
$(obj).attr("innerHTML", $(obj).prev().attr("name")).click(function() {uncut(this);});
}
$(document).ready(cut_prepare)
/* end CUTs in Blogger © mazdaika.blogspot.com */
</script>
Чтобы код выше правильно работал, необходимо наличие подключенной библиотеки jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Если она подключена в одном из виджетов, повторного подключения не требуется.
Теперь можно использовать каты. Для этого заключаем тело ката в такую оболочку:
<div class="mycut" name="Open" name2="Close"> Body </div>
где name - имя ссылки на разворот ката, name2 - имя ссылки на сворачивание ката, Body - тело ката.
Все, можно пользоваться. Количество таких катов на страницу не ограничено.
Пример1:
Hi! I'm a cut!
Пример2:
Привет, я - кат!
P.S.Зачем я это написал? Не знаю. Код примитивный, к тому же, я уверен, далеко не оптимальный. Навреное просто потому, что давно не трогал не Джаваскрипт, а тут такая возможность вспомнить молодость ((;
Бот! ))
ОтветитьУдалитьИ ничего не бот (;
ОтветитьУдалитьой мну стало влом заморачиваться вертской -))
ОтветитьУдалитьА меня наоборот привлекла возможность менять, в общем-то, все ((; В отличие от того же ЖЖ, скажем, где вкрутить маленькую кастомную фишку не проще, чем кардинально переписать шаблон. (;
ОтветитьУдалить