Скрыть часть номера телефона на сайте
Отличная функция под номер телефона, который по умолчанию на половину скрыт, но при клике на "показать" вы можете его полностью открыть. Делается для того, что занимает много места, хотя если говорить о мобильных номерах. Также будет показано начало, а далее написано "показать" перед ХХХХХХХ - что скрывает остальные цифры. Здесь не предусмотрена стилистика, но классы прописаны, что можете под них выставит стили в CSS, что сделать более красивое оформление, так как все идет по стандарту. Так что все можно отлично можете скрыть свой идентификатор номерного абонента, где основном оставляют раздел "о себе" где на официальных ресурсах обязательно прописывают, а здесь просто скрываем половину, которая полностью доступна и откроется вторая часть по вашему клику, еще плюс буде идти указатель виде надписи для действия. Одним из взаимодействий, которые мы хотим измерить, будет являться, когда пользователи просматривают номера телефонов. По установке буде выглядеть так: Приступаем у установке: HTML Код +8 384<span class="uencin_ponug"> 562 259</span> <span style="cursor:pointer;" class="nolva_kepin">показать</span> JS Код jQuery(document).ready(function($){ $.fn.textToggle = function(cls, str) { return this.each(function(i) { $(this).click(function() { var c = 0, el = $(cls).eq(i), arr = [str,el.text()]; return function() { el.text(arr[c++ % arr.length]); }}()); })}; $(function(){ $('.nolva_kepin').textToggle(".nolva_kepin","").click(); $('.nolva_kepin').textToggle(".uencin_ponug","ХХХХХХХ").click(); }); }); Нужно подключить библиотеку jQuery Код <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> На этом установка закончена, как уже говорил, стилей здесь по умолчанию нет, также при открытие любой страницы или сайта, информации виде номера будет скрыта, точнее часть ее. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 5 | |
| |