Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.04.2015, 20:53
Новичок на форуме
Отправить личное сообщение для nonkalol Посмотреть профиль Найти все сообщения от nonkalol
 
Регистрация: 04.04.2015
Сообщений: 4

Внутристраничное меню jQuery
Здравствуйте господа, столкнулся с проблемой на которую не представляю решения

Постараюсь понятно изложить:

Есть меню

<menu id="nav4">
			<li id = "ksik"><a title="Компьютерные системы и комплексы">КCИК</a>
			<li id = "ks"><a title="Компьютерные сети">КС</a>
			<li id = "pks"><a title="Программирование в компьютерных системах">ПКС</a>
			<li id = "pi"><a title="Прикладная информатика">ПИ</a>
			<li id = "eby"><a title="Экономика и бухгалтерский учет">ЭБУ</a>
			<li id = "atpp"><a title="Автоматизация технологических процессов и производств">АТПП</a>
			<li id = "mts"><a title="Многоканальные телекоммуникационные системы">МТС</a>
			<li id = "sssk"><a title="Сети связи и системы коммутации">СССК</a>
			<li id = "ibts"><a title="Информационная безопасность телекоммуникационных систем">ИБТС</a>			
		</menu>


Это горизантальное меню, и переход происходит внутри страницы функцией slideDown. Оно выдвигает определенный div блок, а содержимое его берется из файла rate.php, переменная в этом блоке береться ajax post запросом по клику.

Проблема в том, что сейчас оно работает достаточно глупо, т.е. по клику на объект меню происходит слайддаун, а при клике на другой объект меню происходит слайдап. Так быть не должно. Т.е. по клику на другой объект меню предыдущее должно слайдится вверх, а новое выдвигаться с новыми данными. А еще хотелось бы закрепить по клику класс, чтоб видно было какое именно сейчас активно. Вот код jQuery

$(document).ready(function() {
	$("#div5").hide(); 
	var flagMenu=false;
	var men = undefined;
	$("#ksik").click(function() {				
		$("#ks a, #pks a, #pi a, #eby a, #atpp a, #mts a, #sssk a, #ibts a").removeClass('act');
	$("#ksik a").toggleClass('act');

		var men = "po";	
		
			if(flagMenu==true) {
				$("#div5").slideUp(500);
				flagMenu=!flagMenu;
			} else {
				$("#div5").slideDown(500);
				flagMenu=!flagMenu;
			}
				
				$.post("/scripts/rate.php", {men: men},
					function(html) {
					$("#div5").empty();
					$("#div5").append(html);
					}				
				);		
	});	
});


Это код одной из кнопок, на каждой стоит такой-же.

Это очень нерационально, выполняется лоб в лоб, и не работает правильно к тому-же.

Очень прошу помощи у вас, больше даже и нет к кому обратиться

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2015, 21:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

nonkalol,
тут будет открывашка 209 если остальные 208 вам не подойдут
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2015, 21:18
Новичок на форуме
Отправить личное сообщение для nonkalol Посмотреть профиль Найти все сообщения от nonkalol
 
Регистрация: 04.04.2015
Сообщений: 4

не понял шутку(((
Ответить с цитированием
  #4 (permalink)  
Старый 04.04.2015, 22:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

nonkalol,
это не шутка
Проблема с toogleClass при выделении активной сылки по нажатию
Ответить с цитированием
  #5 (permalink)  
Старый 04.04.2015, 22:15
Новичок на форуме
Отправить личное сообщение для nonkalol Посмотреть профиль Найти все сообщения от nonkalol
 
Регистрация: 04.04.2015
Сообщений: 4

рони,
спасибо, сейчас попробую разобраться
Ответить с цитированием
  #6 (permalink)  
Старый 04.04.2015, 22:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

открывашка 209 выделение пункта меню и запрос на сервер
nonkalol,
<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .active-menu-item {
            background: #FFE4B5;
        }

        a {
            cursor: pointer;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
    </script>
    <script>
        $(function() {

            var $but = $("#nav4 > li a"),
                $blocks = $("#div5");
            $blocks.hide();
            $img = $("img", $blocks); // сервер имитация
            $img.load(function() { // $.post   callback
                $blocks.slideDown()
            });

            $but.each(function(i, elem) {
                var $el = $(elem),
                    url = $el.data('url');
                $el.click(function(event) {
                    event.preventDefault();
                    $but.not($el).removeClass("active-menu-item");
                    $el.addClass("active-menu-item");
                    $blocks.slideUp(function() {
        $img[0].src = url;
});                    //$blocks.load(url,function() { $blocks.slideDown()});  что  должно быть на самом деле
                })
            });
        });
    </script>
</head>

<body>
    <ul id="nav4">
        <li id="ksik">
            <a data-url="http://www.forum-globalteam.ru/wp-content/uploads/motivator-12830.jpg" title="Компьютерные системы и комплексы">КCИК</a>
        </li>

        <li id="ks">
            <a data-url="http://www.moirebenok.ua/gfx/00/00/8b/d3/image-08twf7d_jpg/thumb_800x600_10_w.jpg" title="Компьютерные сети">КС</a>
        </li>

        <li id="pks">
            <a data-url="http://www.leben-und-erziehen.de/wp-content/uploads/2013/04/baby_quiz_fragen_neugierig_iSt_000015776994.jpg" title="Программирование в компьютерных системах">ПКС</a>
        </li>

        <li id="pi">
            <a data-url="http://womem.org/infusions/al_genmem/includes/gen_image.php?image=307&gen_type=2&text1=&text2=" title="Прикладная информатика">ПИ</a>
        </li>

        <li id="eby">
            <a data-url="http://content.foto.mail.ru/mail/sharunova60/_blogs/i-247.jpg" title="Экономика и бухгалтерский учет">ЭБУ</a>
        </li>

        <li id="atpp">
            <a data-url="http://mindcamp.org/images-programs/orane_fun.jpg" title="Автоматизация технологических процессов и производств">
      АТПП</a>
        </li>

        <li id="mts">
            <a data-url="http://www.blissstudio.ru/thumb/732/487/uploads/photos/213~jpg" title="Многоканальные телекоммуникационные системы">МТС</a>
        </li>

        <li id="sssk">
            <a data-url="http://upload.wikimedia.org/wikipedia/commons/7/7f/Smile_is_universal.jpg" title="Сети связи и системы коммутации">СССК</a>
        </li>

        <li id="ibts">
            <a data-url="http://www.ahitravel.com/content/images/programs/CHINA13A/Foto_807883.jpg" title="Информационная безопасность телекоммуникационных систем">
      ИБТС</a>
        </li>
    </ul>

    <div class="" id="div5">
        <img src="" alt="">
    </div>
</body>

</html>

Последний раз редактировалось рони, 04.04.2015 в 23:26.
Ответить с цитированием
  #7 (permalink)  
Старый 04.04.2015, 22:56
Новичок на форуме
Отправить личное сообщение для nonkalol Посмотреть профиль Найти все сообщения от nonkalol
 
Регистрация: 04.04.2015
Сообщений: 4

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

Но если это проблематично, то и ладно, в любом случае огромное спасибо)
Ответить с цитированием
  #8 (permalink)  
Старый 04.04.2015, 23:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

nonkalol,
строка 37 $blocks.slideUp( здесь ваш запрос на сервер);//изменено смотрите пост 6 снова

Последний раз редактировалось рони, 04.04.2015 в 23:27.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Не работает jQuery меню с AJAX eugene1986 jQuery 0 08.07.2010 18:49
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55