X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Подсветка пункта меню для соответствующей странице из iframe
The_David
The_David
Topic Starter сообщение 13.11.2011, 15:35; Ответить: The_David
Сообщение #1


Доброго времени суток, верстаю сайт с помощью WYSIWYG Web Builder, использую на главной странице IFrame и горизонтальное меню. При нажатии на соответствующий пункт меню открывается нужная страница в IFrame. Вот только возникла проблема, не могу понять как сделать так, что бы пункт меню оставался выделенным, к сожалению веб-разработка для меня новая область и не знаю как решить эту проблему, ведь по сути страница не изменяется, а значит не понятно как добиться того, что бы меню "знало" какую именно страницу загрузили в IFrame. Буду рад за любую оказанную помощь по решению данной проблемы.

Вот собственно говоря код, который генерируется веб-билдером:

<div id="wb_TabMenu1" style="margin:0;padding:0;position:absolute;left:258px;top:63px;width:505px;height:28px;text-align:left;z-index:3;">
<ul id="TabMenu1">
<li><a href="./main.html" title="Стр1" target="InlineFrame1">Стр1</a></li>
<li><a href="./start.html" title="Стр2" target="InlineFrame1">Стр2</a></li>
<li><a href="./lect1.html" title="Стр3" target="InlineFrame1">Стр3</a></li>
</ul>
</div>


<iframe name="InlineFrame1" id="InlineFrame1" style="position:absolute;left:21px;top:102px;width:957px;height:462px;z-index:4;border:1px #C0C0C0 outset;" src="./main.html" frameborder="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>


[CSS]<style type="text/css">
#TabMenu1
{
text-align: left;
margin: 0px 0 1px 0;
font-family: Arial;
font-size: 15px;
font-weight: normal;
list-style-type: none;
padding: 7px 0px 3px 0px;
}
#TabMenu1 li
{
display: inline;
}
#TabMenu1 a:link.active, #TabMenu1 a:visited.active, #TabMenu1 a:hover.active
{
border-bottom: 1px solid #336999;
background-color: #336999;
color: #FFFFFF;
position: relative;
padding-top: 3px;
font-weight: normal;
text-decoration: none;
}
#TabMenu1 a:link, #TabMenu1 a:visited
{
padding: 3px 4px;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
color: #336999;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
}
#TabMenu1 a:hover
{
background: #DFE9F5;
color: #336999;
font-weight: normal;
text-decoration: none;
}
</style>[/CSS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MetSerp
MetSerp
сообщение 14.11.2011, 12:41; Ответить: MetSerp
Сообщение #2


подход сразу скажу несколько мертвый, в вашем случае было бы проще использовать ajax + jquery (для удобства, но можно конечно и на чистом ява скрипте если вас воротит от 31 лишнего килобайта :) )
Более того, такой подход заманчив если не думать как пользователь, так как представьте что вы зашли на сайт где не работает кнопка назад, вы не можете положить понравившуюся страницу в закладки и каждый раз вынуждены вновь и вновь проходить полный путь до нужной инфы.
Если я еще вас не переубедил то:
где нибудь внизу тега head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>



вместо вашего iframe вставьте :
<div id="content" >Содержимое данного блока будет подгружаться с сервера в ответ на клик пользователя по элементу меню</div>

это меню:
<ul id="menu">
<li><a href="main.html" title="Стр1">Стр1</a></li>
<li><a href="start.html" title="Стр2" >Стр2</a></li>
<li><a href="lect1.html" title="Стр3" >Стр3</a></li>
</ul>

а это собственно ява скрипт который и делает все:

[JS]
$(window).load(function(e){
$('#menu li a').click(function (e){
e.preventDefault;
el = $(e.target);
if (el.parent().hasClass('selected')){
$('.selected').removeClass('selected');
el.parent.addClass('selected');
}
$.ajax({
url: el.attr('href'),
sucess: function(msg){
$('#content').html(msg);
},
error:function(x,s,e){
$('#content').html('Возникла ошибка:'+e);
}
});
});
});
[/JS]
и наконец стиль для выделенного элемента меню (я просто сделаю его жирным, замените как вам надо):
[CSS].selected{
font-weight:bold;
}[/CSS]


Писал прямо в браузере, могут быть опечатки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 14.11.2011, 15:07; Ответить: pavelsc
Сообщение #3


(MetSerp @ 14.11.2011, 15:41) *
Писал прямо в браузере, могут быть опечатки.

Компилировал прямо в голове, могу ошибаться
[JS] if (!el.parent().hasClass('selected')){// все-таки если не имеет target этого класса

$('.selected').removeClass('selected');
el.parent().addClass('selected');// скобки

}
[/JS]

Ну и вопрос тогда еще. Чем будет отличаться такой вариант (без (е)) :
[JS]
jQuery(function($) {
$("#menu li:not('.selected') a").click(function (){
el = $(this);
$('.selected').removeClass('selected');
el.parent().addClass('selected');
$.ajax({
url: el.attr('href'),
sucess: function(msg){
$('#content').html(msg);
},
error:function(x,s,e){
$('#content').html('Возникла ошибка:'+e);
}
});
});
});
[/JS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MetSerp
MetSerp
сообщение 14.11.2011, 16:13; Ответить: MetSerp
Сообщение #4


1 ага, затупил.
2 я не уверен, но помойму тут
[JS]jQuery(function($)[/JS]
вы затерли переменную $ записав в нее объект event и соответсвенно дальнейшее
[JS]$("#menu li:not('.selected') a").click(function (){[/JS]
не даст результат так как там уже не jquerObj, хотя не уверен.
если нет, то разница в том что у вас более jquery подход, а у меня между jquery и чистым js :) так что у вас наверное получше будет.
Даже если там есть разница в ресурсозатратах и скорости выполнения, то на 3 - 500(омг О_о) элементах массива, тобишь меню, разница будет абсолютно ничтожна.
А, и да, ни мой ни ваш код работать не будут потому что правильно success а не sucess :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 15.11.2011, 4:33; Ответить: pavelsc
Сообщение #5


(MetSerp @ 14.11.2011, 19:13) *
вы затерли переменную $ записав в нее объект event и соответсвенно дальнейшее .........

Я как запомнил из доков, это фэйлсэйв аналог $(document).ready()

Example: Use both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.

[JS]jQuery(function($) {
// Your code using failsafe $ alias here...
});[/JS]


Тормоза вряд ли будут, вполне возможно что $(this) как-то так и описывается.

(MetSerp @ 14.11.2011, 19:13) *
А, и да, ни мой ни ваш код работать не будут потому что правильно success а не sucess :)


Вот из-за такого вот обычно полночи и сидишь))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
The_David
The_David
Topic Starter сообщение 15.11.2011, 13:08; Ответить: The_David
Сообщение #6


Спасибо за ответы , но все же не могу понять:

[JS]$(window).load(function(e){
$('#menu li a').click(function (e){
e.preventDefault;
el = $(e.target);
if (el.parent().hasClass('selected')){
$('.selected').removeClass('selected');
el.parent.addClass('selected');
}
$.ajax({
url: el.attr('href'),
sucess: function(msg){
$('#content').html(msg);
},
error:function(x,s,e){
$('#content').html('Возникла ошибка:'+e);
}
});
});
});[/JS]

вот это куда и как записать?

по поводу этого:

<div id="content" >Содержимое данного блока будет подгружаться с сервера в ответ на клик пользователя по элементу меню</div>

где здесь поставить координаты расположения данного элемента? ведь у айфрейма четко была прописана его позиция на странице.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MetSerp
MetSerp
сообщение 15.11.2011, 13:48; Ответить: MetSerp
Сообщение #7


если хотите заниматься этим и дальше то все таки надо учить html/css хотя бы и javascript до кучи, про php я пока молчу, если бы вы это делали то у вас такой вопрос и не возник :)

(The_David @ 15.11.2011, 16:08) *
вот это куда и как записать?

можно в файл и тогда подключить его :
<script src="путь к файлу"></script>
либо прямо так
<script>
$(window).load(function(e){
$('#menu li a').click(function (e){
e.preventDefault;
el = $(e.target);
if (el.parent().hasClass('selected')){
$('.selected').removeClass('selected');
el.parent.addClass('selected');
}
$.ajax({
url: el.attr('href'),
success: function(msg){
$('#content').html(msg);
},
error:function(x,s,e){
$('#content').html('Возникла ошибка:'+e);
}
});
});
});
</script>



(The_David @ 15.11.2011, 16:08) *
где здесь поставить координаты расположения данного элемента?

атрибут style можно выставлять и более удобно ( ну не совсем правильно выразился но пофиг) например
[CSS]#idобъекта{
стили
}[/CSS]
в вашем случае
[CSS]#content{
position:absolute;
left:21px;
top:102px;
width:957px;
height:462px;
z-index:4;
border:1px #C0C0C0 outset;
}[/CSS]
в общем почитайте хотя бы самые самые основы, как файлы подключать (стилей/скриптов), какой синтаксис у цсс итп
на то чтоб выучить общий синтаксис css у вас уйдет от силы 10 минут так как он простой и логичный

.имя класса задает стили для всех объектов с классом имя класса (<тэг class="имя класса" />)
#myid задает стили для всех объектов с id = myid (<тэг id="id" />)
тэг задает правила стилей для всех тэгов с именем тэг (<тэг />)
если надо обратиться вглубь дерева (например задать стиль ссылок ТОЛЬКО внутри списков класса menu то код будет таким
[CSS].menu ul li a {}[/CSS]
а если например надо задать один стиль для нескольких элементов с классами menu, navi и id myEl а также для всех тегов span то код будет таким
[CSS].menu, .navi, #myEl, span {}[/CSS]
то есть для прохода вглубь дерева перечисляем условия без запятой, для перечисления стилизируемых объектов перечисляем их через запятую
плюс к этому есть псевдо классы, например hover
[CSS]a {
color:red;
}
a:hover{
color:green;
}[/CSS]
при наведении на любую ссылку она станет зеленой, без наведения - красной
есть так же универсальный селектор
[CSS]*{}[/CSS]
все что внутри фигурных скобок будет применено для всех элементов.
У селекторов есть свой приоритет
чем конкретнее обращение тем выше приоритет
самый низкий он у * и самый высокий у # то есть если элемент имеет свой класс и этот класс описан в стилях, то при конфликте ( например универсальный говорит цвет шрифта синий а у класса прописано зеленый) будет применен тот что в классе (зеленый)
соответственно приоритет примерно такой *->tag->.->#
есть еще такая штука как !important, если в конец свойства дописать !important (span{color:green !important;) то оно не будет переписываться независимо от того где объявлено (разумеется если у более высокоприоритетного стиля есть тоже свойство и оно тоже имеет !important то оно будет переопределено), но не в случае с ie 6 он не знает такую штуку и игнорирует ее.
сами свойства описываются в виде
key:val; где key имя свойства, например color:red;
дальше уже изучайте справочник css свойств он большой и в пост не влезет.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MetSerp
MetSerp
сообщение 15.11.2011, 13:55; Ответить: MetSerp
Сообщение #8


чуть не забыл, уточнить что имена классов не должны содержать русских букв и начинаться цифрой.
в первом случае могут возникнуть проблемы с кодировкой, во втором случае могут возникнуть проблемы у ява скрипта
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
The_David
The_David
Topic Starter сообщение 16.11.2011, 19:51; Ответить: The_David
Сообщение #9


Огромное спасибо за более чем тактичное отношение к моим глупым вопросам, представляю как это раздражает, но к сожалению просто не дошли руки до прочтения документации и учебников, приходится методом научного тыка пытаться разобраться)
Сделал так, как Вы говорили, но к сожалению страницы открываются в другом окне, значит скрипт не работает.

[JS]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script>
$(window).load(function(e)
{
$('#menu li a').click(function (e)
{
e.preventDefault;
el = $(e.target);
if (!el.parent().hasClass('selected'))
{ // все-таки если не имеет target этого класса
$('.selected').removeClass('selected');
el.parent().addClass('selected');// скобки
}
$.ajax(
{
url: el.attr('href'),
success: function(msg)
{
$('#contentiframe').html(msg);
},
error:function(x,s,e)
{
$('#contentiframe').html('Возникла ошибка:'+e);
}
});
});
});
</script>
[/JS]

это вставил перед </head>, возможно необходимо все таки перенести в другой документ или необходимо после боди??
так же не ясно, как добиться того, что бы при старте выводилась не строка "Содержимое данного блока будет подгружаться с сервера в ответ на клик пользователя по элементу меню" - а страница main.html и сразу был активным соответствующий пункт??
Возможно необходимо каждой странице проекта присвоить уникальный айди?

Вот собственно весь код страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<meta http-equiv="Content-Language" content="uk">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Створення Web-сайтів</title>
<meta name="description" content="Сайт посвещен созданию сайтов с помощью средств, которые предоставляет Google">
<meta name="keywords" content="Сайты google
ДА-82
РГР
Компьютерная графика">
<meta name="author" content="Мельник А. В. (The_D@v!d)">
<meta name="generator" content="WYSIWYG Web Builder">
<link rel="shortcut icon" href="icon.ico">

<style type="text/css">
html, body
{
height: 100%;
}
div#space
{
width: 1px;
height: 50%;
margin-bottom: -308px;
float:left
}
div#container
{
width: 986px;
height: 617px;
margin: 0 auto;
position: relative;
clear: left;
}
</style>

<style type="text/css">
body
{
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
}
</style>

<style type="text/css">
a
{
color: #666666;
}
a:visited
{
color: #666666;
}
a:active
{
color: #0000FF;
}
a:hover
{
color: #00008B;
}
</style>

<style type="text/css">
#TabMenu1
{
text-align: left;
margin: 0px 0 1px 0;
font-family: Arial;
font-size: 15px;
font-weight: normal;
list-style-type: none;
padding: 7px 0px 3px 0px;
}
#TabMenu1 li
{
display: inline;
}
#TabMenu1 a:link.active, #TabMenu1 a:visited.active, #TabMenu1 a:hover.active
{
border-bottom: 1px solid #336999;
background-color: #336999;
color: #FFFFFF;
position: relative;
padding-top: 3px;
font-weight: normal;
text-decoration: none;
}
#TabMenu1 a:link, #TabMenu1 a:visited
{
padding: 3px 4px;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
color: #336999;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
}
#TabMenu1 a:hover
{
background: #DFE9F5;
color: #336999;
font-weight: normal;
text-decoration: none;
}
</style>

<style type="text/css">
#contentiframe
{
position:absolute;
left:21px;
top:102px;
width:957px;
height:462px;
z-index:4;
border:1px #C0C0C0 outset;
}

.selected
{
font-weight:bold;
border-bottom: 1px solid #336999;
background-color: #336999;
color: #FFFFFF;
position: relative;
padding-top: 3px;
font-weight: normal;
text-decoration: none;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script>
$(window).load(function(e)
{
$('#menu li a').click(function (e)
{
e.preventDefault;
el = $(e.target);
if (!el.parent().hasClass('selected'))
{ // все-таки если не имеет target этого класса
$('.selected').removeClass('selected');
el.parent().addClass('selected');// скобки
}
$.ajax(
{
url: el.attr('href'),
success: function(msg)
{
$('#contentiframe').html(msg);
},
error:function(x,s,e)
{
$('#contentiframe').html('Возникла ошибка:'+e);
}
});
});
});
</script>

</head>

<body>
<div id="space"><br></div>
<div id="container">
<div id="wb_Shape1" style="margin:0;padding:0;position:absolute;left:21px;top:4px;width:959px;height:50px;text-align:center;z-index:0;">
<a href="./index.html" title="Створення особистих Web-сайтів засобами Google"><img src="images/img0001.gif" id="Shape1" alt="Створення особистих Web-сайтів засобами Google" style="border-width:0;width:959px;height:50px"></a></div>
<div id="wb_Text2" style="margin:0;padding:0;position:absolute;left:428px;top:601px;width:179px;height:16px;text-align:center;z-index:1;">
<font style="font-size:13px" color="#000000" face="Arial">© 2011 <a href="mailto:thedavid87@gmail.com" title="Зв'язатися з розробником сайта">Мельник О. В.</a></font></div>
<div id="wb_Text3" style="margin:0;padding:0;position:absolute;left:814px;top:574px;width:169px;height:16px;text-align:left;z-index:2;">
<font style="font-size:13px" color="#4B4B4B" face="Arial"><a href="http://www.sites.google.com" target="_blank" title="Сервіс Google Sites">http://www.sites.google.com</a></font></div>
<div id="wb_TabMenu1" style="margin:0;padding:0;position:absolute;left:258px;top:63px;width:505px;height:28px;text-align:left;z-index:3;">
<ul id="TabMenu1">
<li><a href="./main.html" title="Головна">Головна</a></li>
<li><a href="./start.html" title="Вступ">Вступ</a></li>
<li><a href="./lect1.html" title="Лекція 1">Лекція 1</a></li>
<li><a href="./lect2.html" title="Лекція 2">Лекція 2</a></li>
<li><a href="./lect3.html" title="Лекція 3">Лекція 3</a></li>
<li><a href="./test1.htm" title="Тест 1-3">Тест 1-3</a></li>
<li><a href="./end.html" title="Висновки">Висновки</a></li>
</ul>
</div>

<div id="contentiframe">Содержимое данного блока будет подгружаться с сервера в ответ на клик пользователя по элементу меню</div>

</div>
</body>

</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 17.11.2011, 2:45; Ответить: pavelsc
Сообщение #10


The_David, все просто:
[JS]
$(window).load(function(e)
{
$('#TabMenu1 li a').click(function (e) // у вас очевидно TabMenu1 а не menu
{

e.preventDefault;
el = $(e.target);
if (!el.parent().hasClass('selected'))
{
$('.selected').removeClass('selected');
el.parent().addClass('selected');
}
$.ajax(
{
url: el.attr('href'),
success: function(msg)
{
$('#contentiframe').html(msg);
},
error:function(x,s,e)
{
$('#contentiframe').html('Возникла ошибка:'+e);
}
});
return false; // и еще нужна эта строчка чтобы окончательно заморозить переход по ссылке, если решили через href
});
});
[/JS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Betatransfer.net - прием платежей для HIGH RISK проектов, интернет эквайринг и мерчант онлайн оплат
 55 arendator 35046 Сегодня, 2:12
автор: arendator
Открытая тема (нет новых ответов) Rebex.io – Ваша инновационная платформа для обмена криптовалюты!
 3 Rebex 953 Вчера, 20:50
автор: Rebex
Открытая тема (нет новых ответов) Посоветуйте массажер для спины и шеи
 10 Boymaster 895 Вчера, 18:02
автор: Boymaster
Открытая тема (нет новых ответов) Обучение Email Рассылкам + Софт Для Автоматизации (100к в сутки с сервера)
 10 zennoboss 4657 Вчера, 5:20
автор: Skyworker
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
 14 Aloof 3383 23.4.2024, 13:50
автор: Vmir


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 6:15

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet