» »

Скрыть часть номера телефона на сайте

Скрыть часть номера телефона на сайте

Отличная функция под номер телефона, который по умолчанию на половину скрыт, но при клике на "показать" вы можете его полностью открыть. Делается для того, что занимает много места, хотя если говорить о мобильных номерах. Также будет показано начало, а далее написано "показать" перед ХХХХХХХ - что скрывает остальные цифры.

Здесь не предусмотрена стилистика, но классы прописаны, что можете под них выставит стили в 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>

На этом установка закончена, как уже говорил, стилей здесь по умолчанию нет, также при открытие любой страницы или сайта, информации виде номера будет скрыта, точнее часть ее.

Демонстрация
08.10.2018 Просмотров: 158 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar