Отключите внешние ссылки в php-javascript
-
02-01-2020 - |
Вопрос
У меня есть 4 ссылки на моей странице (файл.phtml) следующим образом
<ul id="fileMenu" class="contextMenu">
<li class="add"><a id ="addbtn" href="#add" style="display:none;">Add</a></li>
<li class="download"><a href="#download">Download</a></li>
<li class="rename"><a href="#rename">Rename</a></li>
<li class="del"><a href="#delete">Delete</a></li>
<li class="copypath"><a href="#copypath">Copypath</a></li>
</ul>
Я хочу отключить добавление, переименование и удаление ссылок Просто отключите его из пользовательского интерфейса .
Пользователь должен иметь возможность видеть это, но событие щелчка выполняться не должно (ссылки должны быть выделены серым цветом) .
Я использовал
disable="disabled"
display =none;
но они не служат поставленной цели.
Есть какой-нибудь другой способ, которым это могло бы сработать?
Решение
Я бы использовал этот CSS для визуального отключения ссылки:
.disable {
position: relative;
}
.disable:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.disable a {
color: gray;
cursor: default;
}
Затем, чтобы отключить ссылку, вы бы поместили класс disable
на соответствующем li
:
<li class="download disable"><a href="#download">Download</a></li>
Что он делает, так это в основном накладывает ссылку на прозрачный псевдоэлемент :before
.
Другим решением могло бы быть использование pointer-events: none
правило, но оно не очень хорошо поддерживается в IE.
Демонстрация: http://jsfiddle.net/LPz2Z/1/
Другие советы
Если вы используете jQuery, возможно, вы захотите сделать это
$(function() {
$('#addbtn').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
}
я не уверен, что это лучший способ, но он может сработать ,
если вы используете
pointer-events: none; in your css
или, если вы хотите вызвать его из javascript:
elem.style.display.pointerEvents = "none";
чтобы отключить взаимодействие с вашими пользователями.
Использовать указатель-события:нет;
<a style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>
Есть несколько вариантов.С помощью обычного старого javascript вы можете сделать, например:
<a href="mylink.html" onclick="return false;">Download</a>
или
<a href="javascript: void(0);">Download</a>
С помощью jQuery вы можете легко отключить множество ссылок:
<a href="mylink.html" class="disabled">Download</a>
<a href="anotherlink.html" class="disabled">Delete</a>
<script>
jQuery(document).ready(function($) {
$('a.disabled').on('click', function(e) {
e.preventDefault();
});
});
</script>
И вы даже можете использовать CSS!
<a href="mylink.html" class="disabled">Download</a>
<style type="text/css">
a.disabled { pointer-events: none; }
</style>
Хотя, вас бы это не удивило, т.е. <= v9 (если я не ошибаюсь) не поддерживает это...И в большинстве браузеров вы не можете заставить браузер использовать указатель в качестве курсора...
Даже это послужило цели
$("#fileMenu").disableContextMenuItems('#add');
$("#fileMenu").disableContextMenuItems('#rename');
$("#fileMenu").disableContextMenuItems('#delete');
поскольку я использую класс ContextMenu в моем списке ul.