|
|
|
| как сделать чтобы когда нажимал правой кнопкой на ссылку появлялось допустим вырезать, и вставить? | |
|
|
|
|
|
|
|
|
для: 12345
(25.12.2005 в 16:26)
| |
<style>
.cm {
visibility:hidden;
position:absolute;
top:0px;
left: 100px;
z-index:5;
background:#f0f0f0;
border:1px solid black
}
.cm a:link, .cm a:visited {color:black; text-decoration:none; display:block}
.cm a:hover {background:#00468a; color:white; text-decoration:none; display:block}
</style>
<body oncontexmenu="return false;">
<div id="cm" class="cm">
<a href="http://www.sql.ru" >SQL.RU</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.ya.ru">Yandex</a>
<hr/>
<a href="" onclick="document.getElementById('cm').style.visibility='hidden'" />[hide]</a>
</div>
<script>
function ContextMenu(event){
var o = document.getElementById("cm");
o.style.left = event.clientX;
o.style.top = event.clientY;
o.style.visibility ='visible';
return false;
}
</script>
<div oncontextmenu="ContextMenu(event); return false">
<pre>
Все форумы / PHP,PERL Новый топик Ответить
(HTML&JavaScript) Клик правой кнопкой и меню. [new]
Sarin
Member
Откуда: Санкт-Петербург
Сообщений: 3711 Нужно чтоб на элементе при клике правой кнопкой выпадало меню.
Меню, которое сделал я. Можно просто добавить в меню один единственный свой пункт.
вчера, 23:16 [1908169] Цитировать Сообщить модератору
</pre>
</div>
</body>
|
Спасибо. А как сделать чтобы когда нажимал на {hide} слой зарывался без обновления страницы?
И ещё вопрос 2
<div class="style6" oncontextmenu="ContextMenu(event); return false">Текст</div>
|
Вообщем когда жмёшь на слово "Текст" то открывается меню как и должно было быть, а как сделать чтобы в меню передовалось само слово допустим " Открыть "Текст" " и также в ссылку
<a href="http://www.sql.ru/?news="Текст"" >"Текст открыть"</a>
|
которая находится в меню | |
|
|
|
|
|
|
|
для: Alexx
(25.12.2005 в 19:28)
| | > как сделать, чтобы когда нажимал на {hide}, слой закрывался без обновления страницы?
<a href=# onclick="document.getElementById('cm').style.visibility='hidden';return!1;">[hide]</a>
|
> как сделать чтобы в меню передавалось само слово [ссылки] ?
работаем с this.href:
<a href="http://www.sql.ru/" onclick=ff(this)>"Текст открыть"</a>
<script>function ff(t){if(t.href.indexOf(t.innerHTML)<0)t.href+='?news='+t.innerHTML;}</script>
|
| |
|
|
|
|
|
|
|
для: 12345
(26.12.2005 в 00:28)
| | >
<a href="http://www.sql.ru/"
>onclick=ff(this)>"Текст открыть"</a>
><script>function
>ff(t){if(t.href.indexOf(t.innerHTML)<0)t.href+='?news='+t.innerHTML;}</script>
>
|
а как сделать чтобы onclick=ff(this, "своё значение") добавить своё значение допусти &all чтобы переходило на страницу ?news=asd&all ? | |
|
|
|
|
|
|
|
для: Alexx
(26.12.2005 в 12:54)
| |
<a href="script.php?news=asd" onclick=ff(this,'all')>"Текст открыть"</a>
<script>function ff(t,p){if(t.href.indexOf('&'+p)<0)t.href+='&'+p;}</script>
| Всё логика, никаких хитростей. | |
|
|
|
|
|
|
|
для: 12345
(26.12.2005 в 13:45)
| | Как сделать к слою чтобы к каждому слою можно было задавать своё меню ?
Надо чтобы было меню Окрыть и Отмена(Отмена работает ), а как задать допусти навожу на один слой должно открыватся окно для этого слоя а если на другой то на другое окно переходить. Тоесть сделать допустим чтобы ты приписывал к слою
<div oncontextmenu="ContextMenu(event, 'all'); return false"> ,,, </div>
|
в выпавшем меню нажимаешь 'открыть' и тебя переводило на ...?all а если наводиш вот на такой слой
<div oncontextmenu="ContextMenu(event, 'news'); return false">,,, </div>
|
и нажимая 'открыть' тебя переводило вот по этой ссылке ...?news
P.S логику применял но почему то не работает :). | |
|
|
|
|
|
|
|
для: Alexx
(26.12.2005 в 17:09)
| | Да потому что надо писать код в соответствии с задачей. Значит, что не хватало? Добавления нового меню. Делаем. Запускаем. По клику на пустоте не отключается - делаем. К примеру, получилось так. Это только меню, а клики в меню - отдельная история, их делаете тоже подобным образом, исходя из задачи.
<style>.cMenu{position:absolute;visibility:hidden;
width:120; padding:2px; z-index:5; border:1px solid black;}
.cMenu a:link, .cm a:visited {color:black; text-decoration:none; display:block}
.cMenu a:hover {background:#00468a; color:white; text-decoration:none; display:block}
#cMenuAll{background:#c0f0f0;}
#cMenuNews{background:#f0f0c0;}
.News{background-color:paleturquoise;}
.All{background-color:moccasin;}
pre{padding:2 4;margin:0}
</style>
<script>d=document;
d.oncontextmenu=function(){cMenuOff();event.returnValue=!1;}
d.onclick=function(){cMenuOff();}
cMenus=['All','News'];
cMenuOff=function(j){
if(!j)for(i=0;i<cMenus.length;i++)
{d.getElementById("cMenu"+cMenus[i]).style.visibility='hidden';}
else j.style.visibility='hidden';
}
function cMenu(t){ cMenuOff();
var o=d.getElementById('cMenu'+t.className);
o.style.left=event.x; o.style.top=event.y;
o.style.visibility ='visible';
event.cancelBubble=!0;
}
</script>
<body>
<div id=cMenuNews class=cMenu>
<a href="http://www.compulenta.ru" >compulenta.ru</a>
<a href="http://www.3DNews.ru">3DNews</a>
<a href=http://news.yandex.ru/Russia/index.html>Yandex-news-ru</a>
<hr>
<a href=# onclick=cMenuOff(this.offsetParent);return!1>[hide]</a>
</div>
<div id=cMenuAll class=cMenu>
<a href="http://www.sql.ru" >SQL.RU</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.ya.ru">Yandex</a>
<hr>
<a href=# onclick=cMenuOff(this.offsetParent);return!1>[hide]</a>
</div>
<table><tr><td class=News oncontextmenu=cMenu(this);return!1><pre>
<B>Новостя</B>.
Откуда: Санкт-Петербург
Сообщений: 3711 Нужно чтоб на элементе при клике
правой кнопкой выпадало меню.
Меню, которое сделал я. Можно просто добавить
в меню один единственный свой пункт.
</pre></td><td class=All oncontextmenu=cMenu(this);return!1><pre>
<B>Усё.</B>
Все форумы / PHP,PERL Новый топик Ответить
(HTML&JavaScript) Клик правой кнопкой и меню. [new]
Sarin
Member
</pre></td><td> </td></tr></table>
</body>
| Вообще, появление полезной информации по контекстному меню - явление неочевидное, поэтому на странице об этом нужно обязательно упомянуть, как и то, что она зависит от контекста. | |
|
|
|
|
|
|
|
для: Alexx
(26.12.2005 в 17:09)
| | Для каждого меню это хорошо, но с местом плохо темболее когда таких слоёв больше 100 штук.
вот пример:
<div oncontextmenu="ContextMenu(event, '1'); return false"> Новость номер 1 </div>
<div oncontextmenu="ContextMenu(event, '2'); return false"> Новость номер 2 </div>
<div oncontextmenu="ContextMenu(event, '3'); return false"> Новость номер 3 </div>
....
|
и есть слой(меню)
<div id="cm" class="cm" style="width:150px;">
<a href="http://www.xxx.ru/?news_edit=Номер новости" ><span class="style6">Редактировать</span></a>
<a href="http://www.xxx.ru/?news_delete=Номер новости" ><span class="style6">Удалить</span></a>
<a href=# onclick="document.getElementById('cm').style.visibility='hidden';return!1;"><span class="style6">Отмена</span></a></div>
|
Как сделать чтобы номер передавался автоматически в слой ? Тоесть жмём на нужную нам новость и открывается меню : Редактировать, Удалит, Отмена. Как осушествить данный способ ? Для каждой новости делать свой слой это помоему бред. Можно же передать ссылке значение с пмошью Js | |
|
|
|
|
|
|
|
для: Alexx
(26.12.2005 в 22:31)
| | Оставить обработчик на документе и анализировать цепочку offsetParent от event.srcElement до d.body. Если в ней обнаружится div c определённым классом или id, вызывать cMenu(). Например,
<div id=news1> Новость номер 1 </div>
<div id=news2>Новость номер 2 </div>
|
| |
|
|
|
|
|
|
|
для: 12345
(26.12.2005 в 22:51)
| | >Оставить обработчик на документе и анализировать цепочку
>offsetParent от event.srcElement до d.body. Если в ней
>обнаружится div c определённым классом или id, вызывать
>cMenu().
а можно пример рабочий хотябы с двумя ссылками ? | |
|
|
|
|
|
|
|
для: Alexx
(26.12.2005 в 22:55)
| | Можно с 4 -мя ;) Сделал объединение того и другого методов, чтобы работа демонстрационная зря не пропадала и было больше пищи для примеров :)
<? ><title>Демо контекстного меню по правой кнопке мыши (IE,FF), Опера7.54 - по левой</title><style>.cMenu{position:absolute;visibility:hidden;
width:120; padding:2px; z-index:5; border:1px solid black;}
.cMenu a{color:black; text-decoration:none;display:block;}
.cMenu a:hover {background:#00468a; color:white;}
#cMenuAll{background:#c0f0f0;}
#cMenuNws{background:#f0f0c0;}
#cMenuNew{width:100;background:#f0c0f0;}
#nameNews{width:100;background:white;}
#Nws{background-color:paleturquoise;}
#All{background-color:moccasin;}
#New1,#New2,#New3,#New4{border:dotted 1px #ccbbaa;padding:0 4;}
pre{padding:2 4;margin:0;}
table,td{padding:0;border-collapse:collapse;}
</style>
<script>d=document; isOpera=self.opera;
d.oncontextmenu=function(e){if(!isOpera&&!d.all)event=e;var o=d.all?event.srcElement:event.target;
while(o){
for(var i=0;i<cMenus.length;i++){
if(o.id.substring(0,cMenus[i].length)==cMenus[i])break;
}if(i<cMenus.length)break;
o=o.offsetParent;
}if(o)cMenu(o,i);else cMenuOff();
event.returnValue=!1;
}
d.onclick=function(e){if(isOpera)d.oncontextmenu();else cMenuOff();}
cMenus=['All','Nws','New'];
cMenuOff=function(j){
if(!j)for(var i=0;i<cMenus.length;i++)
{d.getElementById("cMenu"+cMenus[i]).style.visibility='hidden';}
else j.style.visibility='hidden';
event.cancelBubble=!0;}
function cMenu(t,i){ cMenuOff();
var o2=d.getElementById('cMenu'+cMenus[i]);
if(cMenus[i]=='New'){ var ww='http://www.xxx.ru/?news_';var vN=t.id.substring(cMenus[i].length);
d.getElementById('nameNews').innerHTML=t.id;
d.getElementById('nameNews1').href=ww+'edit='+vN;
d.getElementById('nameNews2').href=ww+'delete='+vN;
}
o2.style.left=d.all?event.x:event.pageX; o2.style.top=d.all?event.y:event.pageY;
if(isOpera)d.getElementById('nameNews').style.width=96;
o2.style.visibility ='visible';
event.cancelBubble=!0;
}
</script>
?> <?
<body>
<div id=cMenuNws class=cMenu>
<a href="http://www.compulenta.ru" >compulenta.ru</a>
<a href="http://www.3DNews.ru">3DNews</a>
<a href=http://news.yandex.ru/Russia/index.html>Yandex-news-ru</a>
<hr>
<a href=# onclick=cMenuOff(this.offsetParent);return!1>[hide]</a>
</div>
<div id=cMenuAll class=cMenu>
<a href="http://www.sql.ru" >SQL.RU</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.ya.ru">Yandex</a>
<hr>
<a href=# onclick=cMenuOff(this.offsetParent);return!1>[hide]</a>
</div>
<table><tr><td id=Nws><pre>
<B>Новостя</B>.
Откуда: Санкт-Петербург
Сообщений: 3711 Нужно чтоб на элементе при клике
правой кнопкой выпадало меню.
Меню, которое сделал я. Можно просто добавить
в меню один единственный свой пункт.
</pre></td><td id=All><pre><B>Усё.</B>
Все форумы / PHP,PERL Новый топик Ответить
(HTML&JavaScript) Клик правой кнопкой и меню. [new]
Sarin
Member
</pre></td><td> </td></tr></table>
<table><tr><td id=New1><div>Новость <B><i>номер</i></B> 1 </div></td></tr></table>
<span id=New2>Новость номер 2 </span><br>
<span id=New3>Новость <B><i>номер</i></B> 3 </span><br>
<span id=New4>Новость номер 4 </span><br>
<div id=cMenuNew class=cMenu><center>
<div id=nameNews></div>
<a id=nameNews1 class=style6 onclick=alert(this.href);return!1>Редактировать</a>
<a id=nameNews2 class=style6 onclick=alert(this.href);return!1>Удалить</a></div>
</body>?> <!--чтобы работало меню, убрать onclick= -->
|
Замечания такие: просто div в статьях использовать нельзя, потому что offsetParent (в d.oncontextmenu=function() )по нему не "проходит", если кликаешь на вложенных тегах. Это серьёзное неудобство, оно иллюстрируется в 1-й м 3-й строчках. Первая строчка сделана правильно, на таблице, поэтому, что бы там ни стояло внутри, id таблицы (в td или table) отметится в цикле while(o), третья неправильно, поэтому клик по жирному тексту не сработает. Далее, дивы неудобно, потому что они ещё плохо регулируются по ширине, поэтому я поставил спаны. Но все проблемы снимает таблица (1-я строчка).
Меню cMenuNew на дивах тоже неудобно по причине неправильного выбора ширины (видно, что надписи не по центру) , поэтому я бы его переделал на таблице.
Дополнение. Удивительно, но FF 1.06 уже поддерживает oncontextmenu и даже отменяет стандартное меню контекста. После небольшой доработки вышеприведённый код стал совместим с FF. А чтоб Опере не было обидно, в ней (версия 7.54) работает меню по левой кнопке мыши. | |
|
|
|
|
|
|
|
для: 12345
(27.12.2005 в 00:34)
| | 12345 Огромное спасибо. Как убрать первый пункт меню где показывает New1, New2 ? А оставить просто редатировать и удалить? | |
|
|
|
|
|
|
|
для: Alexx
(27.12.2005 в 13:14)
| | Убрать <div id=nameNews></div>
и d.getElementById('nameNews').innerHTML=t.id;
, и #nameNews{width:100;background:white;}
, и if(isOpera)d.getElementById('nameNews').style.width=96; | |
|
|
|
|
|
|
|
для: 12345
(27.12.2005 в 00:34)
| | Всё работает :) Спасибо
Как добавлять пункты в меню понятно. А как можно создать новое меню ? С таким возможностями допусти Cоздать Удалить? а ссылки должны вести на ?... &del=1 или ? .. &new=1 Где new=1 определяем нажимая на нужную ссылкую Принцип как я понял один и тот же только как сделать чтобы были разные меню ? | |
|
|
|
|
|
|
|
для: Alexx
(27.12.2005 в 16:38)
| | Как я понял, надо не новое меню, а другие ссылки? В примере я формировал ссылки в зависимости от номера. Если на каждую статью надо своё меню, делаете массив с параметрами меню (вплоть до сокрытия пунктов меню свойством .style.display) и пользуетесь одним и тем же шаблоном. Ничего не мешает и шаблон выбирать в зависимости от параметров в массиве (массив массивов, видимо, придётся делать, заполняемый через php). А можно и XML-структуру, которую хранить на сервере или генерируемую тем же php из БД.
Шаблон, конечно, можно и генерировать по DOM каждый раз, но это лишнее. | |
|
|
|
|
|
|
|
для: 12345
(27.12.2005 в 17:51)
| | >Если на каждую статью надо своё меню, делаете массив с параметрами меню (вплоть до >сокрытия пунктов меню свойством .style.display) и пользуетесь одним и тем же шаблоном.
можно на примере? Заранее спасибо | |
|
|
|
|
|
|
|
для: Alexx
(27.12.2005 в 20:12)
| | Пример лучше написать Вам, так как знаете, что требуется от задачи. К примеру, для одних статей делаете меню Редактировать-Удалить, а к другим - Редактировать-Удалить-Комментировать. И пути к скриптам, скажем, различные. Придумываем структуру описания шаблона. Например, 3 записи. Если пустая, то пункт меню отсутствует, если нет, то содержит путь скрипта обработки. В БД создаёте таблицу из записей вида ("editNews.php?","deleteNews.php?","") , ("editNews.php?", "deleteNews.php?", "addComment.php?") . А когда возникнет мелкий вопрос типа как сделать строку невидимой в меню, тогда вспомните слова style.display и ответ найдётся (в Яндексе) :) Я бы сам так делал. | |
|
|
|
|
|
|
|
для: 12345
(27.12.2005 в 20:32)
| | Задействовать БД или что ещё не нужно нужно только одно при выборе опции перейти по ссылке. Я JavaScript не учил и половину того что вы написали ели ели понял . А то что вы сказали ели ели представляю как сделать. Можно код привести только двух меню где задаются свои разделы и всё. Заранее спасибо | |
|
|
|
|
|
|
|
для: Alexx
(27.12.2005 в 21:28)
| | Но этого вполне достаточно, чтобы делать и смотреть в документацию.
Свои разделы - это в смысле разные ссылки для разных статей (слоёв)? Я действительно не понимаю сути задачи, в частности, почему ссылки нужны, а формировать страницу из пхп не нужно, и насколько разные ссылки нужны. Но, в общем, смотрите на участки кодов:
if(cMenus[i]=='New'){ var ww='http://www.xxx.ru/?news_';var vN=t.id.substring(cMenus[i].length);
d.getElementById('nameNews1').href=ww+'edit='+vN;
d.getElementById('nameNews2').href=ww+'delete='+vN;
} //только здесь формируются ссылки меню. Если сюда подставить выбор ссылки
// из массива по vN, то, как я понимаю, это то, что требуется
|
Правильно ли я понял задачу? Если да, то для 2 меню (id=New0 и id=New1)
menuEd=["http://www.xxx.ru/ed0.php?edit=0","http://www.xxx.ru/edit1.php?editOther=1"]; //определение массива
menuDel=[ , ]; //(пишется аналогично)
if(cMenus[i]=='New'){ var ww='http://www.xxx.ru/?';var vN=t.id.substring(cMenus[i].length);
d.getElementById('nameNews1').href=menuEd[vN]
d.getElementById('nameNews2').href=menuDel[vN]
}
|
| |
|
|
|
|
|
|
|
для: 12345
(27.12.2005 в 21:49)
| | у вас есть ICQ или что-нибудь через что можно поговрить онлайн ? | |
|
|
|