Смена информеров

areostar · 18 Сен 2010

Смена информеров

Имеются два информераю. Таблица курсов валют и калькулятор валют.

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

Код:

  <input type="button" name="toCalc" value="калькулятор валют" action="<?php calcPrint(); ?>">

и соответственно функцию на РНР:

PHP:

<?php  
      function calcPrint()
      {
           echo" <div class='calc_manye'><script language='javascript' src='http://ru.exchange-rates.org/GetCustomContent.aspx?sid=CC0006AMY&type=CurrencyConverter&stk=-0B9RS0E6RK' charset='utf-8'>
                 </script>
                 <div>Источник: <a href='http://ru.exchange-rates.org/'>ru.exchange-rates.org</a></div><NOSCRIPT><IFRAME ID='frmExchRatesCC0006AMY' topmargin='0' bottommargin='0' rightmargin='0' leftmargin='0' FRAMEBORDER='0' width='161' height='181' SRC='http://ru.exchange-rates.org/GetCustomContent.aspx?sid=CC0006AMY&type=CurrencyConverter&submit=submit&stk=-0VLV16J6RL'></IFRAME></NOSCRIPT></div> ";
      }
?>

Нажимаю на кнопку но ничего не происходит!! Посоветуйте как мне сделать задуманое!?:tehnari_ru_837::tehnari_ru_837:

Xploit · 18 Сен 2010

Можно реализовать табами на Jquery
в один таб вставляешь калькулятор
в другой курс валют

areostar · 18 Сен 2010

Вы имеете ввиду JavaScript!!

По подробней пожалуйста!!

Xploit · 20 Сен 2010

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Tabs</title>
    <style type="text/css" media="screen">
    <!--
                BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
                H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
                DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
                TEXTAREA { width: 80%;}
                FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
                LEGEND { color: #ccc; font-size: 120%; }
                INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
                LABEL { display: block; margin-top: 10px; } 
                IMG { margin: 5px; }

                UL.tabNavigation {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }

                UL.tabNavigation LI {
                    display: inline;
                }

                UL.tabNavigation LI A {
                    padding: 3px 5px;
                    background-color: #ccc;
                    color: #000;
                    text-decoration: none;
                }

                UL.tabNavigation LI A.selected,
                UL.tabNavigation LI A:hover {
                    background-color: #333;
                    color: #fff;
                    padding-top: 7px;
                }
                
                UL.tabNavigation LI A:focus {
                        outline: 0;
                }

                div.tabs > div {
                        padding: 5px;
                        margin-top: 3px;
                        border: 5px solid #333;
                }
                
                div.tabs > div h2 {
                        margin-top: 0;
                }

                #first {
                    background-color: #f00;
                }

                #second {
                    background-color: #0f0;
                }

                
                
                .waste {
                        min-height: 1000px;
                }
    -->
    </style>

        <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
                $(function () {
                        var tabContainers = $('div.tabs > div');
                        tabContainers.hide().filter(':first').show();
                        
                        $('div.tabs ul.tabNavigation a').click(function () {
                                tabContainers.hide();
                                tabContainers.filter(this.hash).show();
                                $('div.tabs ul.tabNavigation a').removeClass('selected');
                                $(this).addClass('selected');
                                return false;
                        }).filter(':first').click();
                });
        </script>
</head>
<body id="page">
    <div class="tabs">
        <ul class="tabNavigation">
            <li><a href="#first">Курс валют</a></li>
            <li><a href="#second">Калькулятор</a></li>
        </ul>
        <div id="first">
            <h2>Курс валют</h2>
            <script language="javascript"   src="http://ru.exchange-rates.org/GetCustomContent.aspx?sid=RT0006AVW&type=RatesTable&stk=0EY57DU7GI" charset="utf-8">
</script>
<div><a href="http://www.xignite.com" style="text-decoration:none;color:Black;">Источник:</a> <a href="http://ru.exchange-rates.org/">ru.exchange-rates.org</a></div>
        </div>
        <div id="second">

            <h2>Калькулятор</h2>

            <script language="javascript"   src="http://ru.exchange-rates.org/GetCustomContent.aspx?sid=CC0006AVV&type=CurrencyConverter&stk=-0H4D4XH7GA" charset="utf-8">
</script>
<div>Источник: <a href="http://ru.exchange-rates.org/">ru.exchange-rates.org</a></div><NOSCRIPT><IFRAME ID="frmExchRatesCC0006AVV" topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0" FRAMEBORDER="0" width="161" height="181" SRC="http://ru.exchange-rates.org/GetCustomContent.aspx?sid=CC0006AVV&type=CurrencyConverter&submit=submit&stk=-0K133BS7GB"></IFRAME></NOSCRIPT>


        </div>
            </div>
        <div class="waste"></div>
  </body>
</html>

Xploit · 20 Сен 2010

Сейчас расшифрую что куда:

Это стиль табов - настраивай css как тебе надо. можешь в отдельный файл вывести

Код:

    <style type="text/css" media="screen">
    <!--
                BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
                H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
                DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
                TEXTAREA { width: 80%;}
                FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
                LEGEND { color: #ccc; font-size: 120%; }
                INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
                LABEL { display: block; margin-top: 10px; } 
                IMG { margin: 5px; }

                UL.tabNavigation {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }

                UL.tabNavigation LI {
                    display: inline;
                }

                UL.tabNavigation LI A {
                    padding: 3px 5px;
                    background-color: #ccc;
                    color: #000;
                    text-decoration: none;
                }

                UL.tabNavigation LI A.selected,
                UL.tabNavigation LI A:hover {
                    background-color: #333;
                    color: #fff;
                    padding-top: 7px;
                }
                
                UL.tabNavigation LI A:focus {
                        outline: 0;
                }

                div.tabs > div {
                        padding: 5px;
                        margin-top: 3px;
                        border: 5px solid #333;
                }
                
                div.tabs > div h2 {
                        margin-top: 0;
                }

                #first {
                    background-color: #f00;
                }

                #second {
                    background-color: #0f0;
                }

                
                
                .waste {
                        min-height: 1000px;
                }
    -->
    </style>

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

HTML:

 .waste {
                        min-height: 1000px;
                }

Цвета табов

Код:

#first {
                    background-color: #f00;
                }

                #second {
                    background-color: #0f0;
                }

Я сюда

Код:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

вписал прямую ссылку с google на Jquery для примера. можешь ее оставить, либо загрузи на свой сервер (тогда пути замени на свои)

Смена информеров

areostar

Новые

Xploit

Новые

areostar

Новые

Xploit

Новые

Xploit

Новые