Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/15: Рейтинг темы: голосов - 15, средняя оценка - 5.00
lp_4eva
Учусь...
59 / 2 / 2
Регистрация: 20.03.2010
Сообщений: 167
1

Выдвижная панель

26.10.2011, 21:27. Просмотров 2705. Ответов 6
Метки нет (Все метки)

Помогите новичку в javascripte!!! Создала хтмл страницу. Теперь надо сделать джава скрипт именно надо использовать библиотеку jquery. Думала может создать выдвижную панель.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<html>
<head>
<title>Dragon</title>
<link rel="icon" href="images/6969113-tea-icon-on-textured-background.ico" type="images/x-icon">
<link rel="shortcut icon" href="images/6969113-tea-icon-on-textured-background.ico" type="images/x-icon"> 
</head>
<body>
<div class="mainbox">
    <!--?????-->
    <div class="positiont"><span class="pos">
      <script language="javascript" type="text/javascript" src="commen_head/images/calendar.js"></script>
      </div>
<td align="right"> <h1> <strong><font color = #000000> Chineese restaurant "Dragon-i"</font></strong></h1></td>
<table>
        <TD WIDTH=600 HEIGHT=100 COLSPAN=10 align="center" valign="middle" class="text1"><font color = #000000><a href="food.html"><font color = #000000> Main page</a> |<font color = #000000><a href="login.html"><font color = #000000> Login</a> |<a href="registration.html"><font color = #000000> Registration</a> | <a href="menu.html"><font color = #000000>Menu</a> | <a href="order.html"><font color = #000000>Your order</a>| <a href="contact.html"><font color = #000000>About us</a> | <a href="complain.html"><font color = #000000>Your complaints</a><br> </font> </td>
            </table>                
               
    <div class="tealeft">
      <div class="tealeft2">
        <div class="tealeft3" style="margin-top: 0px;">
          <div class="fctab1" style="margin-top: 0px;">
            <ul id="test5">
              <li class="now">
                <!--begin 1106306-0-5--><a href="node_651.htm" target="_self" class="">Appetizers</a><!--end 1106306-0-5-->
 
              </li>
              <li class="">
                <!--begin 1106307-0-5--><a href="node_648.htm" target="_self" class="">Soup</a><!--end 1106307-0-5-->
              </li>
              <li>
                <!--begin 1106308-0-5--><a href="node_646.htm" target="_self" class="">Poultry</a><!--end 1106308-0-5-->
              </li>
              <li>
 
                <!--begin 1106309-0-5--><a href="node_630.htm" target="_self" class="">Meat</a><!--end 1106309-0-5-->
              </li>
              <li>
                <!--begin 1106310-0-5--><a href="node_629.htm" target="_self" class="">Vegetables</a><!--end 1106310-0-5-->
              </li>
              <li>
                <!--begin 1106311-0-5--><a href="node_627.htm" target="_self" class="">Dim Sum</a><!--end 1106311-0-5-->
 
              </li>
              <li>
                <!--begin 1106312-0-5--><a href="node_626.htm" target="_self" class="">SeaFood</a><!--end 1106312-0-5-->
              </li>
              <li>
                <!--begin 1106313-0-5--><a href="node_624.htm" target="_self" class="">Noodles</a><!--end 1106313-0-5-->
              </li>
              <li>
 
                <!--begin 1106314-0-5--><a href="node_642.htm" target="_self" class="">Others</a><!--end 1106314-0-5-->
              </li>
            </ul>
          </div>
          <div>
            <script type="text/javascript">
window.onload = function(){
    new tab('test1_li_now_', '_', null, 'onmouseover');
    new tab('test2_li_now_', '_', null, 'onmouseover');
    new tab('test5_li_now_', '_', null, 'onmouseover');
    new tab('test6_li_now_', '_', null, 'onmouseover');
    new tab('test4-input-input_tab1-input_tab2', '-');
}
</script>
            <div class="clear">&nbsp;</div>
          </div>
 
        </div>
        <div class="fckkbox">
 
</HEAD>
<center>
 
 
 
<BODY background = "images/m6.jpg" width = 100%>
<TABLE WIDTH=775 BORDER=0 CELLPADDING=0 CELLSPACING=0>
 
<h2> <font color = #000000 > Your choice is: APPETIZERS! Select this foods: </font></h2>
   <!--begin 1106315-651-9-->           <div class="fckkbox1">          <div class="fccand1"></div>         <a href="content_129047.html" target="_self">           <img src="images/0023ae9bc7a60d4332ff4e.jpg" border="0" width="111" height="85"></a>            <div class="fcctxt">                          <h5><a href="article/2010-04/29/content_129047.htm" target="_self">Watermelon Peel with Red Chilies</a></h5>                          <span>salty and delicious</span>                        </div>          <div class="fccand2"></div>     </div>              <div class="fckkbox1">          <div class="fccand1"></div>         <a href="article/2010-03/04/content_114589.htm" target="_self">         <img src="images/00ff0b7b88f00cf8416f27.jpg" border="0" width="111" height="85"></a>            <div class="fcctxt">                          <h5><a href="article/2010-03/04/content_114589.htm" target="_self">Boiled Tender Chicken in Soy Sauce</a></h5>                          <span>Very delicious</span>                       </div>          <div class="fccand2"></div>     </div>              <div class="fckkbox1">          <div class="fccand1"></div>         <a href="article/2010-01/25/content_104140.htm" target="_self">         <img src="images/0023ae9bc7a60cc3b7f602.jpg" border="0" width="111" height="85"></a>            <div class="fcctxt">                          <h5><a href="article/2010-01/25/content_104140.htm" target="_self">Smoked Fish in Five Flavors</a></h5>                          <span>Crispy outside and tender inside</span>                        </div>          <div class="fccand2"></div>     </div>              <div class="fckkbox1">          <div class="fccand1"></div>         <a href="article/2010-01/18/content_102553.htm" target="_self">         <img src="images/0023ae9bc7a60cbe09c602.jpg" border="0" width="111" height="85"></a>            <div class="fcctxt">                          <h5><a href="article/2010-01/18/content_102553.htm" target="_self">Sliced Fish with Tomoto Sauce</a></h5>                          <span>Sweet, with a sour touch.</span>                     </div>          <div class="fccand2"></div>     </div>              <div class="fckkbox1">          <div class="fccand1"></div>         <a href="article/2010-01/08/content_100369.htm" target="_self">         <img src="images/0023ae9bc7a60cb0002101.jpg" border="0" width="111" height="85"></a>            <div class="fcctxt">                          <h5><a href="article/2010-01/08/content_100369.htm" target="_self">Shredded Chicken with Lettuce</a></h5>                          <span>Beautifully colored</span>                       </div>          <div class="fccand2"></div>     </div>              <div class="fckkbox1">          <div class="fccand1"></div>         <a href="article/2010-01/01/content_98760.htm" target="_self">          <img src="images/0023ae9bc7a60ca6769114.jpg" border="0" width="111" height="85"></a>            <div class="fcctxt">                          <h5><a href="article/2010-01/01/content_98760.htm" target="_self">Combination of Shredded Meat</a></h5>                          <span>Salty and delicious</span>                     </div>          <div class="fccand2"></div>     </div>              <div class="fckkbox1">          <div class="fccand1"></div>         <a href="article/2009-12/09/content_92377.htm" target="_self">          <img src="images/0023ae9bc7a60c89b2601e.jpg" border="0" width="111" height="85"></a>            <div class="fcctxt">                          <h5><a href="article/2009-12/09/content_92377.htm" target="_self">Crystal Pork</a></h5>                          <span>The meat is tender and refreshing.</span>                      </div>          <div class="fccand2"></div>     </div>              <div class="fckkbox1">          <div class="fccand1"></div>         <a href="article/2009-10/10/content_72122.htm" target="_self">          <img src="images/0023aea9e73e0c5b90bb17.jpg" border="0" width="111" height="85"></a>            <div class="fcctxt">                          <h5><a href="article/2009-10/10/content_72122.htm" target="_self">Towel Gourd with Dried Shrimps</a></h5>                          <span>Beautifully colored and refreshing.</span>                       </div>          <div class="fccand2"></div>     </div>              <div class="fckkbox1">          <div class="fccand1"></div>         <a href="article/2009-09/30/content_13247.htm" target="_self">          <img src="images/0023ae9bc7a60cb68c8a32.jpg" border="0" width="111" height="85"></a>            
</body>
</html>

Теперь хочу чтобы все виды китайской еды
Appetizers
Soup
Poultry
Meat
Vegetables
Dim Sum
SeaFood
Noodles
Others выходили когда открываешь панель. Не знаю даже с чего начать =)))
надо создавать отдельный js файл? И как все это добро соединить с хтмл страницей? И вообще где писать что писать как писать=))) В джаваскрипте впервые но надо сделать до завтра...книгу прочитать не успею=)))
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
26.10.2011, 21:27
Ответы с готовыми решениями:

Выдвижная панель Wordpress
&lt;header role=&quot;&quot;&gt;&lt;/header&gt; &lt;nav&gt;&lt;ul role=&quot;navigation&quot;&gt;...

Выдвижная панель
Доброго времени суток! :) Как истинный новичек в JS сижу и уже долго ломаю...

Выдвижная ссылка
Привет ребята.Такая вот ситуация,надо сделать ссылку сбоку экрана,чтобы при...

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

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

6
forik
25 / 19 / 8
Регистрация: 10.10.2009
Сообщений: 75
26.10.2011, 21:42 2
Javascript
1
2
3
4
5
6
<script type="text/javascript">
if($("#fctab1").is(":hidden"))
      $("#fctab1").slideDown("slow");
else
      $("#fctab1").hide();
</script>
Попробуй так. Да и еще в стайл этого дива надо добавить display:none
1
lp_4eva
Учусь...
59 / 2 / 2
Регистрация: 20.03.2010
Сообщений: 167
26.10.2011, 21:44  [ТС] 3
не сочтите за тупость но куда это писать и как связать с хтмл кодом???пожалуйста не могли бы вы объяснить по подробнее? если не затруднит=)
0
forik
25 / 19 / 8
Регистрация: 10.10.2009
Сообщений: 75
26.10.2011, 21:47 4
Javascript
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
window.onload = function(){
        new tab('test1_li_now_', '_', null, 'onmouseover');
        new tab('test2_li_now_', '_', null, 'onmouseover');
        new tab('test5_li_now_', '_', null, 'onmouseover');
        new tab('test6_li_now_', '_', null, 'onmouseover');
        new tab('test4-input-input_tab1-input_tab2', '-');
}
</script>
Вместо этого.

HTML5
1
<div class="fctab1" style="margin-top: 0px; display:none">
А это вместо
HTML5
1
<div class="fctab1" style="margin-top: 0px;">
1
lp_4eva
Учусь...
59 / 2 / 2
Регистрация: 20.03.2010
Сообщений: 167
26.10.2011, 21:56  [ТС] 5
изменила хтмл код ...но не пашет... а ссылки на виды блюд вообще ищез...выдвижного панеля вообще нет о_О
0
forik
25 / 19 / 8
Регистрация: 10.10.2009
Сообщений: 75
26.10.2011, 22:17 6
У тебя нет ссылки на jquery. Скачай отсюда и закинь в папку со страницей. На странице укажи ссылку на файл в секции
HTML5
1
<head><script src="c:/mysite/jquery.js"></script></head>
Добавлено через 12 минут
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<html>
<head>
<title>Dragon</title>
<link rel="icon" href="images/6969113-tea-icon-on-textured-background.ico" type="images/x-icon">
<link rel="shortcut icon" href="images/6969113-tea-icon-on-textured-background.ico" type="images/x-icon"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div class="mainbox">
    <!--?????-->
    <div class="positiont"><span class="pos">
      <script language="javascript" type="text/javascript" src="commen_head/images/calendar.js"></script>
      </div>
<td align="right"> <h1> <strong><font color = #000000> Chineese restaurant "Dragon-i"</font></strong></h1></td>
<table>
                <TD WIDTH=600 HEIGHT=100 COLSPAN=10 align="center" valign="middle" class="text1"><font color = #000000><a href="food.html"><font color = #000000> Main page</a> |<font color = #000000><a href="login.html"><font color = #000000> Login</a> |<a href="registration.html"><font color = #000000> Registration</a> | <a href="menu.html"><font color = #000000>Menu</a> | <a href="order.html"><font color = #000000>Your order</a>| <a href="contact.html"><font color = #000000>About us</a> | <a href="complain.html"><font color = #000000>Your complaints</a><br> </font> </td>
                        </table>                                
                       
    <div class="tealeft">
      <div class="tealeft2">
        <div class="tealeft3" style="margin-top: 0px;">
          <div class="fctab1" style="margin-top: 0px; display:none">
            <ul id="test5">
              <li class="now">
                <!--begin 1106306-0-5--><a href="node_651.htm" target="_self" class="">Appetizers</a><!--end 1106306-0-5-->
 
              </li>
              <li class="">
                <!--begin 1106307-0-5--><a href="node_648.htm" target="_self" class="">Soup</a><!--end 1106307-0-5-->
              </li>
              <li>
                <!--begin 1106308-0-5--><a href="node_646.htm" target="_self" class="">Poultry</a><!--end 1106308-0-5-->
              </li>
              <li>
 
                <!--begin 1106309-0-5--><a href="node_630.htm" target="_self" class="">Meat</a><!--end 1106309-0-5-->
              </li>
              <li>
                <!--begin 1106310-0-5--><a href="node_629.htm" target="_self" class="">Vegetables</a><!--end 1106310-0-5-->
              </li>
              <li>
                <!--begin 1106311-0-5--><a href="node_627.htm" target="_self" class="">Dim Sum</a><!--end 1106311-0-5-->
 
              </li>
              <li>
                <!--begin 1106312-0-5--><a href="node_626.htm" target="_self" class="">SeaFood</a><!--end 1106312-0-5-->
              </li>
              <li>
                <!--begin 1106313-0-5--><a href="node_624.htm" target="_self" class="">Noodles</a><!--end 1106313-0-5-->
              </li>
              <li>
 
                <!--begin 1106314-0-5--><a href="node_642.htm" target="_self" class="">Others</a><!--end 1106314-0-5-->
              </li>
            </ul>
          </div>
          <div>
            <script type="text/javascript">
            $(document.body).click(function(){
                if($(".fctab1").is(":hidden"))
                      $(".fctab1").slideDown("slow");
                else
                      $(".fctab1").hide();
            });
</script>
            <div class="clear">&nbsp;</div>
          </div>
 
        </div>
        <div class="fckkbox">
 
</HEAD>
<center>
 
 
 
<BODY background = "images/m6.jpg" width = 100%>
<TABLE WIDTH=775 BORDER=0 CELLPADDING=0 CELLSPACING=0>
 
<h2> <font color = #000000 > Your choice is: APPETIZERS! Select this foods: </font></h2>
   <!--begin 1106315-651-9-->                   <div class="fckkbox1">                  <div class="fccand1"></div>                     <a href="content_129047.html" target="_self">                   <img src="images/0023ae9bc7a60d4332ff4e.jpg" border="0" width="111" height="85"></a>                    <div class="fcctxt">                          <h5><a href="article/2010-04/29/content_129047.htm" target="_self">Watermelon Peel with Red Chilies</a></h5>                          <span>salty and delicious</span>                                    </div>                  <div class="fccand2"></div>             </div>                          <div class="fckkbox1">                  <div class="fccand1"></div>                     <a href="article/2010-03/04/content_114589.htm" target="_self">                 <img src="images/00ff0b7b88f00cf8416f27.jpg" border="0" width="111" height="85"></a>                    <div class="fcctxt">                          <h5><a href="article/2010-03/04/content_114589.htm" target="_self">Boiled Tender Chicken in Soy Sauce</a></h5>                          <span>Very delicious</span>                                       </div>                  <div class="fccand2"></div>             </div>                          <div class="fckkbox1">                  <div class="fccand1"></div>                     <a href="article/2010-01/25/content_104140.htm" target="_self">                 <img src="images/0023ae9bc7a60cc3b7f602.jpg" border="0" width="111" height="85"></a>                    <div class="fcctxt">                          <h5><a href="article/2010-01/25/content_104140.htm" target="_self">Smoked Fish in Five Flavors</a></h5>                          <span>Crispy outside and tender inside</span>                                    </div>                  <div class="fccand2"></div>             </div>                          <div class="fckkbox1">                  <div class="fccand1"></div>                     <a href="article/2010-01/18/content_102553.htm" target="_self">                 <img src="images/0023ae9bc7a60cbe09c602.jpg" border="0" width="111" height="85"></a>                    <div class="fcctxt">                          <h5><a href="article/2010-01/18/content_102553.htm" target="_self">Sliced Fish with Tomoto Sauce</a></h5>                          <span>Sweet, with a sour touch.</span>                                 </div>                  <div class="fccand2"></div>             </div>                          <div class="fckkbox1">                  <div class="fccand1"></div>                     <a href="article/2010-01/08/content_100369.htm" target="_self">                 <img src="images/0023ae9bc7a60cb0002101.jpg" border="0" width="111" height="85"></a>                    <div class="fcctxt">                          <h5><a href="article/2010-01/08/content_100369.htm" target="_self">Shredded Chicken with Lettuce</a></h5>                          <span>Beautifully colored</span>                                       </div>                  <div class="fccand2"></div>             </div>                          <div class="fckkbox1">                  <div class="fccand1"></div>                     <a href="article/2010-01/01/content_98760.htm" target="_self">                  <img src="images/0023ae9bc7a60ca6769114.jpg" border="0" width="111" height="85"></a>                    <div class="fcctxt">                          <h5><a href="article/2010-01/01/content_98760.htm" target="_self">Combination of Shredded Meat</a></h5>                          <span>Salty and delicious</span>                                 </div>                  <div class="fccand2"></div>             </div>                          <div class="fckkbox1">                  <div class="fccand1"></div>                     <a href="article/2009-12/09/content_92377.htm" target="_self">                  <img src="images/0023ae9bc7a60c89b2601e.jpg" border="0" width="111" height="85"></a>                    <div class="fcctxt">                          <h5><a href="article/2009-12/09/content_92377.htm" target="_self">Crystal Pork</a></h5>                          <span>The meat is tender and refreshing.</span>                                  </div>                  <div class="fccand2"></div>             </div>                          <div class="fckkbox1">                  <div class="fccand1"></div>                     <a href="article/2009-10/10/content_72122.htm" target="_self">                  <img src="images/0023aea9e73e0c5b90bb17.jpg" border="0" width="111" height="85"></a>                    <div class="fcctxt">                          <h5><a href="article/2009-10/10/content_72122.htm" target="_self">Towel Gourd with Dried Shrimps</a></h5>                          <span>Beautifully colored and refreshing.</span>                                       </div>                  <div class="fccand2"></div>             </div>                          <div class="fckkbox1">                  <div class="fccand1"></div>                     <a href="article/2009-09/30/content_13247.htm" target="_self">                  <img src="images/0023ae9bc7a60cb68c8a32.jpg" border="0" width="111" height="85"></a>                    
</body>
</html>
У меня работает
1
lp_4eva
Учусь...
59 / 2 / 2
Регистрация: 20.03.2010
Сообщений: 167
26.10.2011, 22:20  [ТС] 7
Ураааа! Пашет!!!! Спасибо огромное=)
0
26.10.2011, 22:20
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.10.2011, 22:20

Меню-панель
Всем привет уважаемые форумчане. Пожалуйста,может кто встречал,как реализовать...

Панель BB кодов
Создаю панель BB кодов, как сделать следущее: Как мне определить где...

Tab панель
Приветствую всех! Есть Tab панель, есть к ней код(даже 2). первый работает...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru