Создать ответ 
Как сделать кнопку (не обязательно один в один)
Автор Сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #1
Как сделать кнопку (не обязательно один в один)
Здравствуйте!
На многих сайтах с объявлениями можно встретить такую кнопку:

[Изображение: 2014-07-18_172806.jpg]

После нажатия - телефон отображается:

[Изображение: 2014-07-18_172822.jpg]

Повторное нажатие для скрытия телефона как таковое не предусмотрено.

Как это сделать?

Спасибо заранее.
18.07.2014 13:35:19
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #2
RE: Как сделать кнопку (не обязательно один в один)
Думаю, это сделать совсем не сложно, но пока нет времени.

Хотелось бы уточнить такой вопрос: через исходный код видимость номера телефона допускается или нет? Я конечно предполагаю, что должен быть не виден для защиты от ботов.

P.S. Скоро сделаю в виде отдельной темы.
18.07.2014 21:10:12
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #3
RE: Как сделать кнопку (не обязательно один в один)
Готово.

Сделал в виде новой темы на сайте, т.к. может пригодиться многим - Показать скрытые данные по клику мышки

Думаю это именно то, что Вам было надо.
19.07.2014 22:22:04
Найти все сообщения Цитировать это сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #4
RE: Как сделать кнопку (не обязательно один в один)
(19.07.2014 22:22:04)Admin писал(а):  Готово.

Сделал в виде новой темы на сайте, т.к. может пригодиться многим - Показать скрытые данные по клику мышки

Думаю это именно то, что Вам было надо.

Да это всё так как нужно. Спасибо!
Конечно же, телефон мною на картинках приведен как пример, взятый с конкретного сайта. (дром)
У меня на сайте, само собой, персональные данные фигурировать под кнопкой "Показать" не будут.
Это просто - как вариант спойлера (без возможности скрытия его обратно)
Спасибо ещё раз. Всегда выручаете!

И все-таки... А если не нужно ничего из базы брать? Как сделать без PHP?
(Последний раз сообщение было отредактировано 20.07.2014 в 17:26:04, отредактировал пользователь 7Lexus.)
20.07.2014 17:20:12
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #5
RE: Как сделать кнопку (не обязательно один в один)
Это сделать будет еще проще, но тогда стоит учитывать, что через исходный код все скрытые данные будут как на ладони, хотя может это в Вашем случае и не важно.

Вот весь код целиком:
Код:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
    .phone {display:none;}
</style>

<p><p class="phone">Можно скрывать абзацы!</p><input type="submit" value="Что-то скрыто"></p>
<p><div class="phone">Или блоки DIV!</div><u>Показать.</u></p>
<p>Телефон: +7<span class="phone">(777)777-77-77</span><img src="image/show_data.png" alt=""></p>

<script type="text/javascript">
$(document).ready(function(){
    $(".phone+*").click(function(){
        $(this).fadeOut(500, function(){$(this).prev().fadeIn(500);});
    });
});
</script>

Можно конечно и от jQuery уйти, но тогда мы получим скрипт обычного спойлера.
20.07.2014 18:06:53
Найти все сообщения Цитировать это сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #6
RE: Как сделать кнопку (не обязательно один в один)
(20.07.2014 18:06:53)Admin писал(а):  Это сделать будет еще проще, но тогда стоит учитывать, что через исходный код все скрытые данные будут как на ладони, хотя может это в Вашем случае и не важно.

Вот всё теперь - самое оно! Очень благодарен!
С PHP - это тоже пригодится обязательно.
21.07.2014 05:50:19
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)



Mail.ru LiveInternet

© Copyright 2011-2016 by UsefulScript.ru