Как создать несколько html разметок в шаблоне и почему joomla не любит jquery.

Discussion in 'Внешний вид, шаблоны, графика' started by Beyl, Jul 14, 2016.

  1. Offline

    Beyl Недавно здесь

    Joined:
    Jul 14, 2016
    Messages:
    5
    Likes Received:
    1
    Gender:
    Male
    1)Ребят всем привет, занялся созданием шаблона, и сделал разметку в index.php шаблона, когда закончил
    шаблон,
    все вроде бы ничего ,но тут меня осенило что шаблон визуально статичен, то есть
    файл с html разметкой всего один, это index.php и только он 1 подстраивается под
    все переходы по ссылкам категориям и так далее на сайте ,но хотелось бы создать хотябы
    парочку допустим 1 html файл отвечает за главную страницу, другой за остальные
    ,я бы хотел узнать как это реализовать
    Докопался пока про то что если установить несколько одинаковых шаблонов ,но с разной разметкой в index.php
    ,потом через стили шаблонов назначить каждому пункту меню свой шаблон допустим если у меня 7 пунктов меню то нужно семь шаблонов разных и будет
    и будет везде разное оформление.

    2)Плюс создал меню на html css js
    в чем фишка меню , в том что при наведении на элемент списка меню, начинает
    светится блок под элементом меню ,каким образом работает код:

    $(".beetwen__position__li1").hover(function(e)

    {

    $("#block1").css("background", "#7CC900");



    });


    класс меню <li> это .beetwen__position__li1 ,и на него наводится курсор, и срабатывает функция на блок
    с идентификатором #block1, и у него меняется цвет фона.

    Теперь зачем же я сделал у списка класс, а у блока идентификатор ,потому что просто на html css js,
    js подхватывает и с классом и с идентификатором элементы без проблем.
    Но как известно joomla списки меню создает сама, и только с классом, id прописать нельзя.
    Так вот вставляю рабочий код html css js в index.php шаблона ,а там скрипт не работает
    Куда копать?
    blockmenu.jpg
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beyl</title>
    <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />
    <link href="css/style.css" type="text/css" rel="stylesheet">


    </head>


    <body>
    <div class="wrapper">
    <div class="beetwen">
    <div class="beetwen__position">
    <ul>
    <li id="link1" class="beetwen__position__li1"><a href="">1</a></li>
    <li id="link2" class="beetwen__position__li2"><a href="">2</a></li>
    <li id="link3" class="beetwen__position__li3"><a href="">3</a></li>
    <li id="link4" class="beetwen__position__li4"><a href="">4</a></li>
    <li id="link5" class="beetwen__position__li5"><a href="">5</a></li>
    <li id="link6" class="beetwen__position__li6"><a href="">6</a></li>
    <li id="link7" class="beetwen__position__li7"><a href="">7</a></li>
    </ul>
    </div>
    </div>
    <div class="beetwen1">
    <div class="beetwen__position1">
    <div id="block1" class="beetwen__position1__li1"></div>
    <div id="block2" class="beetwen__position1__li2"></div>
    <div id="block3" class="beetwen__position1__li3"></div>
    <div id="block4" class="beetwen__position1__li4"></div>
    <div id="block5" class="beetwen__position1__li5"></div>
    <div id="block6" class="beetwen__position1__li6"></div>
    <div id="block7" class="beetwen__position1__li7"></div>

    </div>
    </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="js/navigation.js"></script>

    </body>
    </html>

    .wrapper {
    width: 500px;
    height: 700px;
    }


    .beetwen {
    background-repeat: repeat-x;
    margin-top: 50px;
    margin-bottom: 0px;
    height: 43px;
    clear: both;
    }


    .beetwen__position {
    background: url(../images/bg.png);
    width: 475px;
    height: 40px;
    margin:0 auto;
    }


    .beetwen ul {
    height: 40px;
    padding-left: 0;
    padding-right: 0;
    font-weight: bold;
    }


    .beetwen li {
    float: left;
    position: relative;
    list-style-type: none;
    }


    .beetwen ul li:hover {
    background: linear-gradient(to bottom ,#FD1511, #FC7677);
    }

    .beetwen ul li a {
    border-right: 4px solid #FFD9D8;
    font-size: 14px;
    line-height: 14px;
    color: #FFFFFE;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    display: inline-block;
    padding: 13px 28px;
    text-decoration: none;
    }

    .beetwen ul li:first-child>a {
    padding-left: 29px;
    }


    .beetwen ul li:last-child>a {
    padding-left: 29px;
    border-right: none;
    }

    .beetwen1 {
    background-repeat: repeat-x;
    margin-bottom: 50px;
    height: 30px;
    clear: both;
    }


    .beetwen__position1 {
    width: 875px;
    height: 0px;
    margin:0 auto;
    padding:0;

    }

    .beetwen__position1__li1 {
    margin-top: 1px;
    background-color: red;
    width: 108px;
    height: 8px;
    display: block;
    float: left;

    }

    .beetwen__position1__li2 {
    margin-top: 1px;
    margin-left: 4px;
    background-color: red;
    width: 156px;
    height: 8px;
    display: inline-block;
    float: left;

    }


    .beetwen__position1__li3 {
    margin-top: 1px;
    margin-left: 4px;
    background-color: red;
    width: 107.5px;
    height: 8px;
    float: left;
    display: inline-block;

    }


    .beetwen__position1__li4 {
    margin-top: 1px;
    margin-left: 4px;
    background-color: red;
    width: 92px;
    height: 8px;
    float: left;
    display: inline-block;

    }


    .beetwen__position1__li5 {
    margin-top: 1px;
    margin-left: 4px;
    background-color: red;
    width: 120px;
    height: 8px;
    float: left;
    display: inline-block;

    }


    .beetwen__position1__li6 {
    margin-top: 1px;
    margin-left: 4px;
    background-color: red;
    width: 103.5px;
    height: 8px;
    float: left;
    display: inline-block;

    }


    .beetwen__position1__li7 {
    margin-top: 1px;
    margin-left: 4px;
    background-color: red;
    width: 164px;
    height: 8px;
    float: left;
    display: inline-block;

    }


    #parent1 {
    width: 200px;
    height: 200px;
    background-color: green;
    }

    #parent2 {
    width: 200px;
    height: 200px;
    background-color: red;
    }




    #parent3 {
    width: 200px;
    height: 200px;
    background-color: green;
    }

    #parent4 {
    width: 200px;
    height: 200px;
    background-color: red;
    }
    $(".beetwen__position__li1").hover(function(e)

    {

    $("#block1").css("background", "#7CC900");




    $("#block2").css("background", "red");
    $("#block3").css("background", "red");
    $("#block4").css("background", "red");
    $("#block5").css("background", "red");
    $("#block6").css("background", "red");
    $("#block7").css("background", "red");

    });




    $("#link1").mouseout(function(e)

    {

    $("#block1").css("background", "red");

    });




    $("#link2").hover(function(e)

    {

    $("#block2").css("background", "#7CC900");



    $("#block1").css("background", "red");
    $("#block3").css("background", "red");
    $("#block4").css("background", "red");
    $("#block5").css("background", "red");
    $("#block6").css("background", "red");
    $("#block7").css("background", "red");


    });




    $("#link2").mouseout(function(e)

    {

    $("#block2").css("background", "red");

    });


    $("#link3").hover(function(e)

    {

    $("#block3").css("background", "#7CC900");

    $("#block1").css("background", "red");
    $("#block2").css("background", "red");
    $("#block4").css("background", "red");
    $("#block5").css("background", "red");
    $("#block6").css("background", "red");
    $("#block7").css("background", "red");

    });




    $("#link3").mouseout(function(e)

    {

    $("#block3").css("background", "red");

    });



    $("#link4").hover(function(e)

    {

    $("#block4").css("background", "#7CC900");

    $("#block1").css("background", "red");
    $("#block2").css("background", "red");
    $("#block3").css("background", "red");
    $("#block5").css("background", "red");
    $("#block6").css("background", "red");
    $("#block7").css("background", "red");

    });





    $("#link4").mouseout(function(e)

    {

    $("#block4").css("background", "red");

    });



    $("#link5").hover(function(e)

    {

    $("#block5").css("background", "#7CC900");

    $("#block1").css("background", "red");
    $("#block2").css("background", "red");
    $("#block3").css("background", "red");
    $("#block4").css("background", "red");
    $("#block6").css("background", "red");
    $("#block7").css("background", "red");

    });




    $("#link5").mouseout(function(e)

    {

    $("#block5").css("background", "red");

    });





    $("#link6").hover(function(e)

    {

    $("#block6").css("background", "#7CC900");

    $("#block1").css("background", "red");
    $("#block2").css("background", "red");
    $("#block3").css("background", "red");
    $("#block4").css("background", "red");
    $("#block5").css("background", "red");
    $("#block7").css("background", "red");

    });






    $("#link6").mouseout(function(e)

    {

    $("#block6").css("background", "red");

    });





    $("#link7").hover(function(e)

    {

    $("#block7").css("background", "#7CC900");

    $("#block1").css("background", "red");
    $("#block2").css("background", "red");
    $("#block3").css("background", "red");
    $("#block4").css("background", "red");
    $("#block5").css("background", "red");
    $("#block6").css("background", "red");

    });




    $("#link7").mouseout(function(e)

    {

    $("#block7").css("background", "red");

    });
     
    Beyl, Jul 14, 2016
    #1

  2. Ads Master

     
    3. Best Answer:
    Post #2 by CB9T, Jul 14, 2016
  3. CB9T
    Offline

    CB9T Преподаватель по J! Staff Member ⇒ Профи ⇐

    Joined:
    May 21, 2010
    Messages:
    2,604
    Likes Received:
    322
    Gender:
    Male
    Best Answer
    PHP IF - проверять по itemid например или контроллеру.

    Если меню у Вас не динамическое - сделайте прямо в шаблоне или в модуле и все))

    Про jquery - Просто оборачивайте в конструкцию вида:

    Код (CODE):
    1. jQuery(document).ready(function($) {
    2.     //do jQuery stuff when DOM is ready
    3.    //тут Ваш код выше
    4. });
     
    CB9T, Jul 14, 2016
    #2
    Beyl likes this.
  4. Offline

    Beyl Недавно здесь

    Joined:
    Jul 14, 2016
    Messages:
    5
    Likes Received:
    1
    Gender:
    Male

    Сработало!!! Спасибо!!! Все заработало теперь joomla понимает jquery.
     
    Beyl, Jul 14, 2016
    #3
    CB9T likes this.
< Ищу шаблон.Желательно Быстрый старт.Типа Салон красоты. | Как сделать таблицу в шаблоне >

Share This Page

Loading...