Программирование на JS, JQ, Ajax

**cOAPerator** · 05.01.2013 15:56

Сообщение от l3x

Да это всё для примера, просто поставь .hide() а не fadeOut() и всё будет по другому

понятно.

почитал статью по ссылке Вами приведенной, и с помошью наставника сваял такую штуку вот...

код

Код:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<center><table style="width: 800px">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Добро пожаловать</span>
<span alt="#sm2" style="cursor: pointer;">Новости форума</span>
<span alt="#sm3" style="cursor: pointer;">Администрация</span>
<span alt="#sm4" style="cursor: pointer;">Баннеры партнеров</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
<div id="submenu" align="center"> 
     <div id="sm1" class="submenutext"><br/><br/>текст добро пожаловать</div>
     <div id="sm2" class="submenutext"><br /><br />текст новости форума</div>
     <div id="sm3" class="submenutext"><br /><br />текст Администрация</div>
     <div id="sm4" class="submenutext"><br /><br />текст баннеры партнеров</div>
</div>
   </td>
</tr>
 </tbody>
</table></center>
<script type="text/javascript">
$(document).ready(function() {
$("#MenuTxT div.submenutext").hide();
 
 
$("#menu span").click(function() {
    $("#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $(activeDiv).fadeIn();
    StTimer = setTimeout(function() {doid_1_HIDE()}, 2000)
    return false; });
});
//setTimeout(function() {$("#menu span:first").click();}, 300); //Это автозапуск первого блока
 
function doid_1_SHOW(){
          activeDiv=$($("#menu span.tabactive").attr("alt"));
          activeDiv.stop().fadeIn(1000);
}
function doid_1_HIDE(){
          activeDiv=$($("#menu span.tabactive").attr("alt"));
          activeDiv.stop().fadeOut(1000);
}
$("#submenu").mouseenter(function(){
              clearTimeout(StTimer);
              $(this).stop(true,true);
}).mouseleave(function(){
           doid_1_HIDE();
});
</script>

[свернуть]

как раз по моим потребностям...
осталось стили навешать, формы воткнуть и ajax обработчик прикрутить..

**l3x** · 05.01.2013 16:16

всё приходит с опытом )))))

**cOAPerator** · 05.01.2013 16:20

Сообщение от l3x

всё приходит с опытом )))))

так точно!

**GreenBanan** · 05.01.2013 19:37

cOAPerator,

Код:

<html>
	<head>
		<title>1</title>
		<style>
			div {border: 1px red solid;}
		</style>
	</head>

	<body>
		<div id="one">1</div><div id="two">2</div><div id="three">3</div>
		<button data-target="one">One</div><button data-target="two">two</div><button data-target="three">Three</div>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script>
			$("[data-target]").click(function () {
				$("div").hide();
				$("#"+$(this).attr("data-target")).show();
			});
		</script>
	</body>

</html>

Мой вариант. При условии что я вас понял

**cOAPerator** · 06.01.2013 00:08

GreenBanan, ну видать не совсем. но близко очень) механика верная)))

**GreenBanan** · 06.01.2013 02:30

cOAPerator, ну там допишите уж что надо, или объясните - я допишу. Мне просто ваш код объемом не понравился. А тут все просто и максимально кастомизируемо, указал таргет и в бой.

**cOAPerator** · 06.01.2013 03:47

Сообщение от GreenBanan

ну там допишите уж что надо, или объясните - я допишу. Мне просто ваш код объемом не понравился. А тут все просто и максимально кастомизируемо, указал таргет и в бой.

ага, я тут уже одному человеку пытался объяснить че мне надо, так это вылилось в 37 постов и около 12 часов времени

тем более я уже стили, формы и обработчики прикрутил к своему коду.

так как мне текстом не объяснить, что надо, я лучше потом ссыль на рабочий вариант выложу и посмотрите, какие косячки остались.. тем более мне самому не исправить их...

пс: потом, может поможете исправить, если желание будет.. (можно даже через скайп связаться, если Вас не затруднит)

**cOAPerator** · 06.01.2013 15:37

Итак, в посте намбер 11 текущей темы я писал много букв, которые в совокупности дают меню с вкладками. Понавешав чуток стилей, прикрутив формы и к ним обработчики ajax запросов получаем меню авторизации (рабочий вариант мона глянуть у меня на сайте - под лого 3 кнопки - авторизация, регистрация и восстановление пароля)
вроде как получилось неплохо.. тока иконки подкачали, каюсь, с инета слямзил:)

скрин меню

[свернуть]

фиговый с меня скринильщик)))

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

само собой кросбраузерное - а иначе нам никак.

конечно код мой оставляет желать лучшего, но как говорится, если не учиться в бою, то где тогда еще?:) а посему, оставляйте коменты ниже - хорошие и не очень.. критика полезна всегда. а особенно полезно критику признавать, чем я и займусь.

пс: чуть позже в первый пост модератор полный код меню добавит.

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

**l3x** · 06.01.2013 15:45

cOAPerator, ты лучше выкладывай здесь архивы с примерами страниц и стилями, а то пока сообразим что к чему.....)

**cOAPerator** · 06.01.2013 15:56

l3x, вас не поймешь, то архивы выкладывай, то ссылки на рабочие примеры...

готовый пример будет в 1 посте.

	05.01.2013 15:56 #11
cOAPerator [web-developer] Регистрация: 22.02.2011 Сообщений: 615 Репутация: 111 Webmoney BL: ?	Сообщение от l3x Да это всё для примера, просто поставь .hide() а не fadeOut() и всё будет по другому понятно. почитал статью по ссылке Вами приведенной, и с помошью наставника сваял такую штуку вот... код Код: <script src="http://code.jquery.com/jquery-latest.js"></script> <center><table style="width: 800px"> <tbody> <tr> <td valign=top> <div id="menu"> <b> <span alt="#sm1" style="cursor: pointer;">Добро пожаловать</span> <span alt="#sm2" style="cursor: pointer;">Новости форума</span> <span alt="#sm3" style="cursor: pointer;">Администрация</span> <span alt="#sm4" style="cursor: pointer;">Баннеры партнеров</span> </b> </div> </td> <td id="MenuTxT" align="center" valign="top"> <div id="submenu" align="center"> <div id="sm1" class="submenutext"><br/><br/>текст добро пожаловать</div> <div id="sm2" class="submenutext"><br /><br />текст новости форума</div> <div id="sm3" class="submenutext"><br /><br />текст Администрация</div> <div id="sm4" class="submenutext"><br /><br />текст баннеры партнеров</div> </div> </td> </tr> </tbody> </table></center> <script type="text/javascript"> $(document).ready(function() { $("#MenuTxT div.submenutext").hide(); $("#menu span").click(function() { $("#menu span").removeClass("tabactive"); $(this).addClass("tabactive"); $("#MenuTxT div.submenutext").hide(); var activeDiv = $(this).attr("alt"); $(activeDiv).fadeIn(); StTimer = setTimeout(function() {doid_1_HIDE()}, 2000) return false; }); }); //setTimeout(function() {$("#menu span:first").click();}, 300); //Это автозапуск первого блока function doid_1_SHOW(){ activeDiv=$($("#menu span.tabactive").attr("alt")); activeDiv.stop().fadeIn(1000); } function doid_1_HIDE(){ activeDiv=$($("#menu span.tabactive").attr("alt")); activeDiv.stop().fadeOut(1000); } $("#submenu").mouseenter(function(){ clearTimeout(StTimer); $(this).stop(true,true); }).mouseleave(function(){ doid_1_HIDE(); }); </script> [свернуть] как раз по моим потребностям... осталось стили навешать, формы воткнуть и ajax обработчик прикрутить.. Последний раз редактировалось cOAPerator; 05.01.2013 в 16:21. Мегахаб ~~~ Написание скриптов на заказ
0 cOAPerator

	05.01.2013 16:16 #12
l3x Студент Регистрация: 24.10.2012 Сообщений: 78 Репутация: 7	всё приходит с опытом )))))
0 l3x

	05.01.2013 16:20 #13
cOAPerator [web-developer] Регистрация: 22.02.2011 Сообщений: 615 Репутация: 111 Webmoney BL: ?	Сообщение от l3x всё приходит с опытом ))))) так точно! Мегахаб ~~~ Написание скриптов на заказ
0 cOAPerator

	05.01.2013 19:37 #14
GreenBanan Студент Регистрация: 25.12.2012 Сообщений: 90 Репутация: 16	cOAPerator, Код: <html> <head> <title>1</title> <style> div {border: 1px red solid;} </style> </head> <body> <div id="one">1</div><div id="two">2</div><div id="three">3</div> <button data-target="one">One</div><button data-target="two">two</div><button data-target="three">Three</div> <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script> <script> $("[data-target]").click(function () { $("div").hide(); $("#"+$(this).attr("data-target")).show(); }); </script> </body> </html> Мой вариант. При условии что я вас понял Последний раз редактировалось GreenBanan; 05.01.2013 в 19:45.
0 GreenBanan

	06.01.2013 00:08 #15
cOAPerator [web-developer] Регистрация: 22.02.2011 Сообщений: 615 Репутация: 111 Webmoney BL: ?	GreenBanan, ну видать не совсем. но близко очень) механика верная))) Мегахаб ~~~ Написание скриптов на заказ
0 cOAPerator

Программирование на JS, JQ, Ajax

Опции темы

код

скрин меню

Тэги топика:

Похожие темы

PHP/Python программирование

Изучить Web программирование

Программирование автозапуска USB флешки

Веб программирование на Php, MySQL, Ajax. Программирование на C#

Веб программирование на Php, MySQL, Ajax. Программирование на C#

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	06.01.2013 02:30 #16
GreenBanan Студент Регистрация: 25.12.2012 Сообщений: 90 Репутация: 16	cOAPerator, ну там допишите уж что надо, или объясните - я допишу. Мне просто ваш код объемом не понравился. А тут все просто и максимально кастомизируемо, указал таргет и в бой.
0 GreenBanan

	06.01.2013 03:47 #17
cOAPerator [web-developer] Регистрация: 22.02.2011 Сообщений: 615 Репутация: 111 Webmoney BL: ?	Сообщение от GreenBanan ну там допишите уж что надо, или объясните - я допишу. Мне просто ваш код объемом не понравился. А тут все просто и максимально кастомизируемо, указал таргет и в бой. ага, я тут уже одному человеку пытался объяснить че мне надо, так это вылилось в 37 постов и около 12 часов времени тем более я уже стили, формы и обработчики прикрутил к своему коду. так как мне текстом не объяснить, что надо, я лучше потом ссыль на рабочий вариант выложу и посмотрите, какие косячки остались.. тем более мне самому не исправить их... пс: потом, может поможете исправить, если желание будет.. (можно даже через скайп связаться, если Вас не затруднит) Мегахаб ~~~ Написание скриптов на заказ
0 cOAPerator

	06.01.2013 15:37 #18
cOAPerator [web-developer] Регистрация: 22.02.2011 Сообщений: 615 Репутация: 111 Webmoney BL: ?	Итак, в посте намбер 11 текущей темы я писал много букв, которые в совокупности дают меню с вкладками. Понавешав чуток стилей, прикрутив формы и к ним обработчики ajax запросов получаем меню авторизации (рабочий вариант мона глянуть у меня на сайте - под лого 3 кнопки - авторизация, регистрация и восстановление пароля) вроде как получилось неплохо.. тока иконки подкачали, каюсь, с инета слямзил:) скрин меню [свернуть] фиговый с меня скринильщик))) Про меню: "универсальное": с него легко можно сделать обратно меню закладками, как уже сказал подойдет как меню авторизации или например всплывающие сообщения можно с него же сваять - это которые синие, зеленые, красные. это притом, что не надо кучу кода переделывать. кусочек кода стер, и получил новое назначение для меню. само собой кросбраузерное - а иначе нам никак. конечно код мой оставляет желать лучшего, но как говорится, если не учиться в бою, то где тогда еще?:) а посему, оставляйте коменты ниже - хорошие и не очень.. критика полезна всегда. а особенно полезно критику признавать, чем я и займусь. пс: чуть позже в первый пост модератор полный код меню добавит. Отдельное спасибо, человеку который помогал делать это меню и все мне объяснял.. Последний раз редактировалось cOAPerator; 06.01.2013 в 15:55. Мегахаб ~~~ Написание скриптов на заказ
0 cOAPerator

	06.01.2013 15:45 #19
l3x Студент Регистрация: 24.10.2012 Сообщений: 78 Репутация: 7	cOAPerator, ты лучше выкладывай здесь архивы с примерами страниц и стилями, а то пока сообразим что к чему.....)
0 l3x

	06.01.2013 15:56 #20
cOAPerator [web-developer] Регистрация: 22.02.2011 Сообщений: 615 Репутация: 111 Webmoney BL: ?	l3x, вас не поймешь, то архивы выкладывай, то ссылки на рабочие примеры... готовый пример будет в 1 посте. Мегахаб ~~~ Написание скриптов на заказ
0 cOAPerator

Темы	Раздел	Ответов	Последний пост
PHP/Python программирование	Создание сайтов	7	19.11.2013 19:51
Изучить Web программирование	Web программирование	20	03.06.2012 16:53
Программирование автозапуска USB флешки	Прочее	7	10.03.2012 22:49
Веб программирование на Php, MySQL, Ajax. Программирование на C#	Создание сайтов	3	31.05.2011 01:53
Веб программирование на Php, MySQL, Ajax. Программирование на C#	Реклама партнерских программ	3	31.05.2011 01:53