После нажатия на кнопку, откроется все в окошке.

Статус
В этой теме нельзя размещать новые ответы.
dragonstyle

dragonstyle

Читатель
Заблокирован
Регистрация
17 Ноя 2008
Сообщения
523
Реакции
481
  • Автор темы
  • Заблокирован
  • #1
Видел было такое организованно на html с помощью js:
Нажимаешь на меню, а в центре страницы все показывает. Т.е. страницы теперь не перезагружаются, а сразу все на месте показывает.

Для тех кто в танке:
Вот у меня сайт:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Я хочу, чтобы после нажатия на кнопку меню справочник, у меня вместо карты области, появился мой список с номерами; после нажатия на кнопку меню О нас, у меня вместо карты области, появилась информация о сайте. И т.д.

Кто знает хоть примерно, как это сделать пишите. Это не из тяжелых, видел не большой код... Только было это года 2 назад. Да и в шабах дле видел, подобную реализацию.
 
Т.е. страницы теперь не перезагружаются, а сразу все на месте показывает.
Нажмите для раскрытия...
Это называется AJAX.
Тебе значится надо гуглить в сторону AJAX+Jquery
Использование php здесь минимально (От него вообще можно отказаться )
Теория:
Для просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или Зарегистрируйся В разделе ссылки есть много ссылочек
Для просмотра ссылки Войди или Зарегистрируйся - Тут есть учебник по AJAX

Для просмотра ссылки Войди или Зарегистрируйся
 
  • Автор темы
  • Заблокирован
  • #3
CheburatoR-all написал(а):
Это называется AJAX.
Тебе значится надо гуглить в сторону AJAX+Jquery
Использование php здесь минимально (От него вообще можно отказаться )
Теория:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся В разделе ссылки есть много ссылочек
Для просмотра ссылки Войди или Зарегистрируйся - Тут есть учебник по AJAX
Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.


P.s. я видел проще, не помню на чем, но кажется на js:
Все это делается на 1 странице: Идет скрипт, и по середине скрипта прописывается мой текст. После нажатия на кнопки меню, вылезает в блоке контент - текст.
Вот мой html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<meta name="author" content="Dragonstyle" />

<meta name="description" content="Информационный портал Ростовской области. Пробки в Ростовской области, Карта Ростовской области, Цитаты Ростовской области, Компании Ростовской Области, Провайдеры Ростовской Области." />

<meta name="keywords" content="Информационный портал Ростовской области, Пробки в Ростовской области, Карта Ростовской области, Цитаты Ростовской области, Компании Ростовской Области, Провайдеры Ростовской Области" />

<title>Информационный портал Ростовской области.</title>

<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>

<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />

<link rel="stylesheet" type="text/css" href="skins/bann_a/skin.css" />

<link rel="stylesheet" type="text/css" href="skins/bann_b/skin.css" />

<link rel="shortcut icon" href="" />

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery('#mycarouse_a').jcarousel({

vertical: true,

animation: 'slow',

scroll: 1

});

jQuery('#mycarouse_b').jcarousel({

horizontal: true,

animation: 'slow',

scroll: 1

});

});

</script>

</head>

<body>

<!-- Top Banner -->

<div class="topban_block">

<div class="topban">

<ul id="mycarouse_a" class="jcarousel jcarousel-skin-bann_a">

<li><a href="#"><img src="images/bann.gif" alt="" /></a></li>

<li><a href="#"><img src="images/bann1.gif" alt="" /></a></li>

<li><a href="#"><img src="images/bann2.gif" alt="" /></a></li>

</ul>

</div>

</div>

<!-- / Top Banner -->

<!-- Logo -->

<div class="logo"><a href="http://161-region.ru/"><img src="images/logo.png" alt="" /></a></div>

<!-- / Logo -->

<!-- Telephone -->
<div class="telephone"><script language="JavaScript" src="http://www.161-region.ru/data11.js"></script>
</div>

<!-- / Telephone -->

<!-- Topmenu -->

<div align="right" class="top_block">

<ul class="topmenu">

<li><div><a href="#"><i>Наружная реклама</i>баннеры, растяжки, штендеры, вывески</a></div><img src="images/photo1.gif" alt="" /></li>

<li><div><a href="#"><i>Наружная реклама</i>баннеры, растяжки, штендеры, вывески</a></div><img src="images/photo2.gif" alt="" /></li>

<li><div><a href="#"><i>Наружная реклама</i>баннеры, растяжки, штендеры, вывески</a></div><img src="images/photo3.gif" alt="" /></li>

<li><div><a href="#"><i>Наружная реклама</i>баннеры, растяжки, штендеры, вывески</a></div><img src="images/photo1.gif" alt="" /></li>

<li><div><a href="#"><i>Наружная реклама</i>баннеры, растяжки, штендеры, вывески</a></div><img src="images/photo2.gif" alt="" /></li>

<li><div><a href="#"><i>Наружная реклама</i>баннеры, растяжки, штендеры, вывески</a></div><img src="images/photo3.gif" alt="" /></li>

</ul>

</div>

<!-- / Topmenu -->

<!-- Leftmenu -->

<div class="leftmenu_block">

<ul class="leftmenu">

<li><a href="http://161-region.ru/"><i>Главная</i><span>вернуться на главную страницу</span></a></li>

<li>

<ul>

<li><a href="#">Карта Области</a></li>

<li><a href="#">Пробки по Области</a></li>

<li><a href="#">Интернет-провайдеры</a></li>

<li><a href="#">Акции</a></li>

<li><a href="#">Праздники</a></li>

<li><a href="#">Интернет сайты</a></li>

</ul>

<a href="javascript:scroll(none)"><i>Разделы</i><span>информационные разделы</span></a></li>

<li><a href="#"><i>Справочник</i><span>справочная информация для заказчиков</span></a></li>

<li><a href="#"><i>О нас</i><span>информация о нас и о нашей деятельности</span></a></li>

<li><a href="#"><i>Контакты</i><span>контактные данные рекламного агентства</span></a></li>

</ul>

</div>

<!-- / Leftmenu -->

<!-- Right Column -->

<div class="right_column">

<!-- News -->

<div class="news_block">

<div class="news">05.09.2010<br/><a href="#">Открытие информационной странички</a><span>Сегодя в 17:00 по Москве, была открыта информационная страничка Ростовской области!</span></div>

</div>

<!-- / News -->

<!-- Bigbord -->

<div class="bigbord_block">

<center><div class="bigbord">

<script src="http://api-maps.yandex.ru/1.1/?key=AHzUHEwBAAAAqJvlVwIAGQF0YF9WsCJWKwxIwhN-FqsY7ZgAAAAAAAAAAABIsrcQ5bB_O7DwoXZ0Fra4wZ4Vsg==&wizard=constructor" type="text/javascript"></script>
<script type="text/javascript">
YMaps.jQuery(window).load(function () {
var map = new YMaps.Map(YMaps.jQuery("#YMapsID-844")[0]);
map.setCenter(new YMaps.GeoPoint(40.806744,47.699256), 7, YMaps.MapType.MAP);
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.TypeControl());

function createObject (type, point, style, description) {
var allowObjects = ["Placemark", "Polyline", "Polygon"],
index = YMaps.jQuery.inArray( type, allowObjects),
constructor = allowObjects[(index == -1) ? 0 : index];
description = description || "";

var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description});
object.description = description;

return object;
}
});
</script>

<center><div id="YMapsID-844" style="width:517px;height:255px;top:8px;"></div></center>



</div></center>

</div>

<!-- / Bigbord -->

</div>

<!-- / Right Column -->

<!-- Footer -->

<div class="footer">

<div class="search">

<div class="copyright"><p>© <span>2010 161-Region.Ru +</span></p></div>

<input type="button" class="b_search" /><input class="pole" type="text" value="поиск" onfocus="if(this.value=='поиск') {this.value='';}" onblur="javascript:if(this.value==''){this.value='поиск'};" /></div>

<div class="contacts">Сделано в городе Таганрог</div>

<div class="email">Электронная почта: <a href="mailto:admin@161-region.ru">admin@161-region.ru</a></div>

</div>

<!-- / Footer -->

</body>

</html>
Нажмите для раскрытия...
 
  • Автор темы
  • Заблокирован
  • #4
Уже все работает, но есть бага. Когда делаешь запрос на открытие окна Яндекс карт, страница перезагружается и становится белого цвета. Вот код страницы maps.html:
<center>

<div class="bigbord">
<script src="http://api-maps.yandex.ru/1.1/?key=AHzUHEwBAAAAqJvlVwIAGQF0YF9WsCJWKwxIwhN-FqsY7ZgAAAAAAAAAAABIsrcQ5bB_O7DwoXZ0Fra4wZ4Vsg==&wizard=constructor" type="text/javascript"></script>
<script type="text/javascript">
YMaps.jQuery(window).load(function () {
var map = new YMaps.Map(YMaps.jQuery("#YMapsID-844")[0]);
map.setCenter(new YMaps.GeoPoint(40.806744,47.699256), 7, YMaps.MapType.MAP);
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.TypeControl());

function createObject (type, point, style, description) {
var allowObjects = ["Placemark", "Polyline", "Polygon"],
index = YMaps.jQuery.inArray( type, allowObjects),
constructor = allowObjects[(index == -1) ? 0 : index];
description = description || "";

var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description});
object.description = description;

return object;
}
});
</script>

<center><div id="YMapsID-844" style="width:517px;height:255px;top:8px;"></div></center></div></center>
Нажмите для раскрытия...
 
Проверил код на локалке, не понял в чем проблема, вроде все как положено..,
по клику на ссылке ЯНДЕКС - открывает карту в новой вкладке.
 
  • Автор темы
  • Заблокирован
  • #6
Mr.Emm написал(а):
Проверил код на локалке, не понял в чем проблема, вроде все как положено..,
по клику на ссылке ЯНДЕКС - открывает карту в новой вкладке.
Нажмите для раскрытия...
Мне надо чтобы открывало все у меня, без перезагрузки. Кликни на надпись О нас, а потом на Разделы -> Карта области и ты увидишь лаг.
 
Во-первых, почему у тебя подключено сразу две разные версии jquery - удали старую!
Во-вторых, не работает потому что javascript через load не подгрузишь, тут нужен $.getScript или что-то в этом роде.

Добавлено через 46 минут
PHP: 
// JavaScript Document
$(document).ready(function() {

var loadfuncs = function(f) {

  if(f == 'maps') {
        var map = new YMaps.Map(YMaps.jQuery("#YMapsID-844")[0]);
        map.setCenter(new YMaps.GeoPoint(40.806744,47.699256), 7, YMaps.MapType.MAP);
        map.addControl(new YMaps.Zoom());
        map.addControl(new YMaps.ToolBar());
        map.addControl(new YMaps.TypeControl());
        
        function createObject (type, point, style, description) {
            var allowObjects = ["Placemark", "Polyline", "Polygon"],
                index = YMaps.jQuery.inArray( type, allowObjects),
                constructor = allowObjects[(index == -1) ? 0 : index];
                description = description || "";
            
            var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description});
            object.description = description;
            
            return object;
        }  
  
  } else if(f == 'probki') {
  
       var map = new YMaps.Map(YMaps.jQuery("#YMapsID-417")[0]);
        map.setCenter(new YMaps.GeoPoint(39.706738,47.256555), 11, YMaps.MapType.MAP);
        map.addControl(new YMaps.Zoom());
        map.addControl(new YMaps.ToolBar());
        map.addControl(new YMaps.TypeControl());
        
        function createObject (type, point, style, description) {
            var allowObjects = ["Placemark", "Polyline", "Polygon"],
                index = YMaps.jQuery.inArray( type, allowObjects),
                constructor = allowObjects[(index == -1) ? 0 : index];
                description = description || "";
            
            var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description});
            object.description = description;
            
            return object;
        }
  }

}

      $("ul.leftmenu li a").click(function() {
     
      var filename = $(this).attr("id");
      
      $("div.bigbord_block").load(filename + ".html");
      
        if((/filename/).test('maps.probki')) {
         
         $.getScript("http://api-maps.yandex.ru/1.1/?key=AHzUHEwBAAAAqJvlVwIAGQF0YF9WsCJWKwxIwhN-FqsY7ZgAAAAAAAAAAABIsrcQ5bB_O7DwoXZ0Fra4wZ4Vsg==&wizard=constructor", function(){
              loadfuncs(filename);
           });
           
         }
         return false;
      });
            
});

на страницах maps и probki оставляешь только блок в который вставиться карта, скрипты от туда удаляешь. Код не тестировал, но по идее должно работать.

в функции loadfuncs все можно сократить т.к. там только данные разные...
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху