Клуб мобильного творчества
Меню
seg0ro 22.04.12 в 16:14 #
¯\_(ツ)_/¯
Я покажу два решения. Оба простые, что понравится, то и используйте :)
1. создаем js функцию:
function show_hide(elem) {
obj = document.getElementById(elem);
if( obj.style.display == "none" ){
obj.style.display = "block";
}else{
obj.style.display = "none";
}
}
Данная функция позволяет показывать либо скрывать любой элемент с определённым id!
Как применить? Сначала нужно подключить функцию. Тут есть два варианта:
а) создать файл script.js и подключить его на странице
<script type="text/javascript" language="javascript" src="script.js"></script>
б) в теле страницы прописать
<script language="JavaScript" type="text/javascript">
тут функция
</script>

Как вызывать? Для двух способов подключения функции вывод один:
<a href="javascript:show_hide('element')">скрыть/показать</a> - это ссылка нажав на которую можно будет скрыть/показать элемент
Сам элемнт может быть чем угодно и располагаться где угодно (ниже или выше ссылки) для примера возьмем html тег div
<div id="element" style="display: none;">тут текст или любой другой элемент</div>
Красным выделен идентификатор тега, синим свойство тега, определяющее его как невидимый
Рейтинг: 0
seg0ro 22.04.12 в 16:15 #
¯\_(ツ)_/¯
2. тут все помещается в одной строке:
<div><div style="cursor:pointer;" onclick="var _n=this.parentNode.getElementsByTagName(\'div\')[1];if(_n.style.display==\'none\'){_n.style.display=\'\';}else{_n.style.display=\'none\';}">скрыть/показать</div><div style="display:none">тут текст или любой другой элемент</div></div>

Серым цветом обозначен div который выступает в качестве элемента, который открывает или закрывает соседний зеленый элемент (находящийся ниже!)
Оба эти элемента должны быть окружены еще одним дивом (выделен золотым цветом)
Рейтинг: 0
seg0ro 22.04.12 в 16:17 #
¯\_(ツ)_/¯
Тут на сайте используются оба способа:
1 для показа выпадающих смайлов, цветов текста/фона в панели редактирования сообщения
2 для вывода тега спойлер
Рейтинг: 0
Zereb 23.04.12 в 19:51 #
Я — серьёзный кот. Это серьёзное дело
Поделюсь своим способом))Нужен jqery.


в js файле нужно прописать эту функцию.

function hideShow(button,hiSh,text){
$(button).toggle(function(){
$(hiSh).slideUp(1000);
if(text) $(this).text("Развернуть");

},function(){
$(hiSh).slideDown(1000);
if(text) $(this).text("Cвернуть");
});
}

все теперь в этом же js файле вызываем эту функцию таким образом:

hideShow('.onOff','.main_link, .coin-slider, #coin-slider',true);

,где
1 аргумент это класс кнопки при нажатии на которую будут скрываться/раскрыватся элементы, дивы или ид которых указаны через запятую во втором аргументе.
в третем передаем тру или фолс, нужно менять текст на кнопке или нет.

в результате при нажатии на див с классом onOff закроются/раскроются дивы указаные во втором аргументе.


<div class="onOff">Свернуть</div>
<div class="main_link">
прам-пам-пам.

</div>

<div class="coin-slider">
прам-пам-пам.

</div>

<div id="coin-slider">
прам-пам-пам.

</div>.

Удобно тем что нужно только вызвать функцию и все. Никаких богомерзких онклик и т.п.
Изменил(а) Zereb 23.04.12 в 19:52
Рейтинг: 0
seg0ro 23.04.12 в 23:14 #
¯\_(ツ)_/¯
Zereb, ну онклик не особо богомерзко мне кажется. Куда худе конструкция javapapist: scriptHere()
Рейтинг: 0
Анасец 24.04.12 в 10:13 #
seg0ro, это та, которая встраивается в ссылки, как то:
<a href="javascript:self.close();">Close</a> ?
Рейтинг: 0
seg0ro 24.04.12 в 10:21 #
¯\_(ツ)_/¯
Ну да. Вообще эта конструкция является устаревшей (но до сих пор поддерживается всеми! браузерами)
Рейтинг: 0
Анасец 24.04.12 в 10:24 #
Zereb, вообще можно все действия типа onClick, onHover, onKeyUp прописать в скрипте, нпрм:

for(i=1;i<=10;i++) {
document.getElementById("elemID"+i).onclick="alert(\"This is an object with ID=elemID\"+i);";
}
document.onunload="func();";
document.getElementsByTagName("a")[0].onhover="changeStyle(this);";
function changeStyle(elem) {
elem.style.color="red";
}
Рейтинг: 0
Zereb 24.04.12 в 12:19 #
Я — серьёзный кот. Это серьёзное дело
Анасец, это все ненужные костыли. В нем есть много недостаков, и неудобств.
Рейтинг: 0
Zereb 24.04.12 в 12:20 #
Я — серьёзный кот. Это серьёзное дело
seg0ro, Помойму слаще хлеба нет чем яваскрипт прямо в штмл'е.
Рейтинг: 0