Вход • Регистрация

Всего найдено: 11

  • 26 января 2015 г.
  • Спасибо разобрался. Код нужно вставлять в site.php который находится в папке дизайна, стили в той же папке css ну и дальше все как написано... для кого то это покажется смешным но когда нет опыта то возникают и не такие вопросы :)

    Александр Биг Эпл (ba5) подскажите на примере сайта который вы указали http://www.komfort-son.ru/shop/pledy/traquair-dark13/ есть таблица по принципу ( вкладки на jQuery) доставка, уход, отзывы - очень хорошая вещь много информации и мало места.
    Внимание вопрос уважаемые знатоки: Как это сделать?

    Я сделал
    Код
    <!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" dir="ltr" lang="ru-RU">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
    <title>Вкладки со скошенными углами | pcvector.net</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <style>
    html{
    background: #222 url(bg.png);
    }

    body{
    width: 600px;
    margin: 100px auto 0 auto;
    font-family: 'Trebuchet MS', Arial, Helvetica;
    font-size: small;
    }

    h2, h3, p{
    margin: 0 0 15px 0;
    }

    #tabs{
    overflow: auto;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #tabs li{
    margin: 0;
    padding: 0;
    float: left;
    }

    #tabs a{
    -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
    }

    #tabs a:hover{
    background: #c93434;
    background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background: linear-gradient(220deg, transparent 10px, #c93434 10px);
    }

    #tabs a:focus{
    outline: 0;
    }

    #tabs #current a{
    background: #fff;
    background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
    background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
    background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
    background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;
    color: #333;
    }

    #content{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image: -moz-linear-gradient(top, #fff, #ddd);
    background-image: -ms-linear-gradient(top, #fff, #ddd);
    background-image: -o-linear-gradient(top, #fff, #ddd);
    background-image: linear-gradient(top, #fff, #ddd);
    -moz-border-radius: 0 2px 2px 2px;
    -webkit-border-radius: 0 2px 2px 2px;
    border-radius: 0 2px 2px 2px;
    -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
    }

    /* Remove the rule below if you want the content to be "organic" */
    #content div{
    height: 220px;
    }

    /* --- */
    #about{
    color: #999;
    }

    #about a{
    color: #eee;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
    e.preventDefault();
    $("#content div").hide(); //Hide all content
    $("#tabs li").attr("id",""); //Reset id's
    $(this).parent().attr("id","current"); // Activate this
    $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
    })();
    </script>
    </head>

    <body>

    <ul id="tabs">
    <li id="current"><a href="#" title="tab1">Один</a></li>
    <li><a href="#" title="tab2">Два</a></li>
    <li><a href="#" title="tab3">Три</a></li>
    <li><a href="#" title="tab4">Четыре</a></li>
    </ul>

    <div id="content">
    <div style="display: block;" id="tab1">
    <h2>Django (Джанго)</h2>
    <p>Свободный фреймворк для веб-приложений на языке Python. Изначально проект был создан для управления новостными сайтами LJWorld.com, lawrence.com и KUsports.com, принадлежащими компании The World Company (Лоуренс, Канзас (en), США).</p>
    <p>Сайт на Django строится из одного или нескольких приложений, которые рекомендуется делать отчуждаемыми и подключаемыми. Это одно из существенных архитектурных отличий этого фреймворка от некоторых других (например, Ruby on Rails).</p>
    </div>
    <div style="display: none;" id="tab2">
    <h2>Zend Framework</h2>
    <p>Свободный каркас на PHP для разработки веб-приложений и веб-сервисов. Zend пытается следовать духу PHP, предоставляет простые интерфейсы и мощную функциональность для разработки приложений. Он предоставляет расширения для построения современных, быстрых и безопасных сайтов.</p>
    <p>Основывается на идеях MVC. Разрабатывается компанией Zend, являющейся разработчиком самого PHP.</p>
    </div>
    <div style="display: none;" id="tab3">
    <h2>Kohana</h2>
    <p>Kohana, ранее Blue Flame, это PHP5 веб-фреймворк с открытым кодом, который использует архитектурную модель HMVC (Hierarchical Model View Controller - Иерарархические Модель-Контроллер-Вид). Его цели — быть безопасным, легким и простым в использовании.</p>
    <p>Проект Kohana был создан как ветвь PHP фреймворка CodeIgniter под именем Blue Flame. Главной причиной форка был переход к более открытой для общественности модели разработки, потому, что многие пользователи были недовольны скоростью разработки и исправления ошибок в CodeIgniter.</p>

    </div>
    <div style="display: none;" id="tab4">
    <h2>CodeIgniter</h2>
    <p>Популярный MVC фреймворк с открытым исходным кодом, написанный на языке программирования PHP, для разработки полноценных веб-систем и приложений. Разработан компанией EllisLab, а также Риком Эллисом (Rick Ellis) и Полом Бурдиком (Paul Burdick).</p>
    <p>Первый публичный релиз фреймворка произошел 28 февраля 2006 года. С выходом версии 2.0 28го января 2011 года CodeIgniter разделился на две ветки: CodeIgniter Core и CodeIgniter Reactor </p>
    </div>
    </div>

    Просто создал характеристику и вставил туда html код работает, но коряво.
  •
  • 26 января 2015 г.
  • Спасибо большое.
    Со скриптом мне не понятно нужно создать файл js ?
    Я вставил в css такой код
    Код
    #tabs{
    overflow: auto;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #tabs li{
    margin: 0;
    padding: 0;
    float: left;
    }

    #tabs a{
    -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
    }

    #tabs a:hover{
    background: #c93434;
    background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background: linear-gradient(220deg, transparent 10px, #c93434 10px);
    }

    #tabs a:focus{
    outline: 0;
    }

    #tabs #current a{
    background: #fff;
    background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
    background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
    background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
    background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;
    color: #333;
    }

    #content{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image: -moz-linear-gradient(top, #fff, #ddd);
    background-image: -ms-linear-gradient(top, #fff, #ddd);
    background-image: -o-linear-gradient(top, #fff, #ddd);
    background-image: linear-gradient(top, #fff, #ddd);
    -moz-border-radius: 0 2px 2px 2px;
    -webkit-border-radius: 0 2px 2px 2px;
    border-radius: 0 2px 2px 2px;
    -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
    }

    /* Remove the rule below if you want the content to be "organic" */
    #content div{
    height: 220px;
    }

    /* --- */
    #about{
    color: #999;
    }

    #about a{
    color: #eee;
    }

    В характеристиках создал (дополнительная информация)(поле с визуальным редактором) в html вставил такой код
    Код
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">// <![CDATA[
    $(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
    e.preventDefault();
    $("#content div").hide(); //Hide all content
    $("#tabs li").attr("id",""); //Reset id's
    $(this).parent().attr("id","current"); // Activate this
    $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
    })();
    // ]]></script>
    <ul id="tabs">
    <li id="current"><a href="#" title="tab1">Один</a></li>
    <li><a href="#" title="tab2">Два</a></li>
    <li><a href="#" title="tab3">Три</a></li>
    <li><a href="#" title="tab4">Четыре</a></li>
    </ul>
    <div id="content">
    <div style="display: block;" id="tab1">
    <h2>Django (Джанго)</h2>
    <p>Свободный фреймворк для веб-приложений на языке Python. Изначально проект был создан для управления новостными сайтами LJWorld.com, lawrence.com и KUsports.com, принадлежащими компании The World Company (Лоуренс, Канзас (en), США).</p>
    <p>Сайт на Django строится из одного или нескольких приложений, которые рекомендуется делать отчуждаемыми и подключаемыми. Это одно из существенных архитектурных отличий этого фреймворка от некоторых других (например, Ruby on Rails).</p>
    </div>
    <div style="display: none;" id="tab2">
    <h2>Zend Framework</h2>
    <p>Свободный каркас на PHP для разработки веб-приложений и веб-сервисов. Zend пытается следовать духу PHP, предоставляет простые интерфейсы и мощную функциональность для разработки приложений. Он предоставляет расширения для построения современных, быстрых и безопасных сайтов.</p>
    <p>Основывается на идеях MVC. Разрабатывается компанией Zend, являющейся разработчиком самого PHP.</p>
    </div>
    <div style="display: none;" id="tab3">
    <h2>Kohana</h2>
    <p>Kohana, ранее Blue Flame, это PHP5 веб-фреймворк с открытым кодом, который использует архитектурную модель HMVC (Hierarchical Model View Controller - Иерарархические Модель-Контроллер-Вид). Его цели &mdash; быть безопасным, легким и простым в использовании.</p>
    <p>Проект Kohana был создан как ветвь PHP фреймворка CodeIgniter под именем Blue Flame. Главной причиной форка был переход к более открытой для общественности модели разработки, потому, что многие пользователи были недовольны скоростью разработки и исправления ошибок в CodeIgniter.</p>
    </div>
    <div style="display: none;" id="tab4">
    <h2>CodeIgniter</h2>
    <p>Популярный MVC фреймворк с открытым исходным кодом, написанный на языке программирования PHP, для разработки полноценных веб-систем и приложений. Разработан компанией EllisLab, а также Риком Эллисом (Rick Ellis) и Полом Бурдиком (Paul Burdick).</p>
    <p>Первый публичный релиз фреймворка произошел 28 февраля 2006 года. С выходом версии 2.0 28го января 2011 года CodeIgniter разделился на две ветки: CodeIgniter Core и CodeIgniter Reactor</p>
    </div>
    </div>

    Нет ли ошибок? Как вынести файл js как его обозвать? Извиняюсь за скорее всего глупые вопросы :) пока изучаю...

Новости

  • Новая сборка DIAFAN.CMS 7.2.5
  • Вчера, 09:47
  • В преддверии 2025 года была выпущена сборка 7.2.5, которая не приносит радикальных изменений в функциональности, но способствует повышению стабильности работы системы и расширению возможностей облачного сервиса для создания сайтов.
  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня 2024 г.
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля 2024 г.
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
Все новости