Joomlart tartalomjegyzék példa

Ebben a cikkben bemutatom, hogyan kell használható és jó tartalomjegyzéket készíteni a joomlart (Uber sablon) alá.

Természetesen ez a módszer a megfeleő javításokkal használható lesz a T3 framework féle sablononál.

A cikkben leírom mit hogyan kell elkészínei és egy példa fájl-t is raktam a letölthető példába. A cikk fő részét a cik hivatkozásából másoltam

Összegzés

(: Egy kicsi html vagy másolás, beillesztés, fájl készítés, kiterjesztés tudás azért kell a megvalósításhoz :)

Én is, mind sokan mások a Notepad++ használom ilyen céllal a szerkesztéshez. Ha frissíted a sablont, akkor ezek a módosítások elvesznek!

Az UBER sablon esetén a következő fájlokat kell létrehozni:

/templates/uber/js/progressive.js
/templates/uber/css/progressive.css

és módosítani a következő fájlt:

/templates/uber/etc/assets.xml

Letölteni a pedig innét lehet.

A js fájlba a következő soronak kell lennie:

/templates/uber/js/progressive.js

(function($){

$(document).ready(function(){
var $window = $(window),
        $body = $(document.body),
        $doc = $('.doc-container'),
        $nav = $doc.find ('.doc-nav');

    // make the document navigation affix when scroll
    $nav.affix({
      offset: {
        top: function () {
          return 200; // replace with your top position to start affix
        },
        bottom: function () {
          return 300; // replace your bottom position to release the affix
        }
      }
    });

    // change navigation active according to scroll
    $body.scrollspy({
      target: '.doc-sidebar'
    });   

    // add progress bar for navigation
    $nav.find ('a').before ($(''));

    $nav.on ('activate activate.bs.scrollspy', function () {
      $body.scrollspy("refresh");
      var $active = $nav.find('li.active');
      $active.prevAll().find('.docs-progress-bar').css ('width', '100%');
      $active.nextAll().find('.docs-progress-bar').css ('width', '0%');
    });

    $window.on ('scroll', function (event) {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout (function () {
        var $active = $nav.find('li.active'),
            $progress = $active.find('.docs-progress-bar'),
            $scrollspy = $body.data('bs.scrollspy'),
            scrollTop    = $scrollspy.$scrollElement.scrollTop() + $scrollspy.options.offset,
            scrollHeight = $scrollspy.$scrollElement[0].scrollHeight || $scrollspy.$body[0].scrollHeight,
            maxScroll    = scrollHeight - $scrollspy.$scrollElement.height(),
            offsets      = $scrollspy.offsets,
            targets      = $scrollspy.targets,
            activeTarget = $scrollspy.activeTarget,
            i;

        if (scrollTop >= maxScroll) {
          $progress.css ('width', '100%');
          return ;
        }

        if (activeTarget && scrollTop <= offsets[0]) {
          $progress.css ('width', '0%');
          return ;
        }
        for (i = offsets.length; i--;) {
          if (scrollTop >= offsets[i]
            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) {
            var p1 = offsets[i],
                p2 = scrollTop,
                p3 = !offsets[i + 1] ? maxScroll : offsets[i + 1],
                p = (p2-p1)/(p3-p1)*100;
            $progress.css ('width', (p < 2 ? 2 : p) + '%');
            return ;
          }
        }
      }, 100);
    });   

});

})(jQuery);

A css fájlban a következő sornak kell lennie:

/templates/uber/css/progressive.css

.doc-nav.affix {
  top: 60px;
}
.doc-nav.affix-bottom {
    position: relative;
}
.doc-nav > li {
    background: none repeat scroll 0 0 #F6F8FA;
    margin-bottom: 1px;
    width: 200px;
}

.doc-nav > li.active > a {
    font-weight: bold;
}

.doc-nav .docs-progress-bar {
    background: none repeat scroll 0 0 #DEE4EC;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
}

assets.xml fájl tartalma

/templates/uber/etc/assets.xm

természetesen csak az újonnan készített fájlokat kell beleírni a megfelelő helyre

<?xml version="1.0" encoding="utf-8"?>
<assets>
   <scripts>
       <file>js/jquery.inview.min.js</file>
       <file>js/jquery.parallax-1.1.3.js</file>
       <file>js/jquery.placeholder.js</file>
       <file>js/script.js</file>
       <file>js/progressive.js</file>
   </scripts>

   <stylesheets>
       <file>fonts/font-awesome/css/font-awesome.min.css</file>
       <file>http://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700</file>
       <file>http://fonts.googleapis.com/css?family=Open+Sans:400,300,600</file>
       <file>css/progressive.css</file>
   </stylesheets>

</assets>

Ennek a cikknek a HTML példája:

a bővebben rész utáni sorok

<div class="doc-container row">
   <div class="doc-sidebar col-md-3">
       
       <ul class="doc-nav nav nav-list">
           
           <li><a href="#keszites">Röviden a hogyan</a></li>
           <li><a href="#js">JS fájl tartalma</a></li>
           <li><a href="#css">CSS fájl tartalma</a></li>
           <li><a href="#xml">XML fájlhoz hozzáfűzni</a></li>
           <li><a href="#html">HTML példa</a></li>
       </ul>
   </div>
   <div class="doc-content col-md-9">
       <section id="keszites">
           <p>(: Egy kicsi html vagy másolás, beillesztés, fájl készítés, kiterjesztés tudás azért kell a megvalósításhoz :)</p>
           <p>Én is mind sokan mások a Notepad++ használom ilyen céllal a szerkesztéshez</p>
           <p>Az UBER sablon esetén a következő fájlokat kell létrehozni:</p>
           <p> /templates/uber/js/progressive.js</p>
           <p>/templates/uber/css/progressive.css</p>
           <p>és módosítani a következő fájlt:</p>
           <p>/templates/uber/etc/assets.xml</p>
           <p>a js fájlba a következő soronak kell lennie:</p>
           <p> </p>
       </section>
       <section id="js">
           <pre class="prettyprint linenums pre-scrollable prettyprinted">(function($){

$(document).ready(function(){
var $window = $(window),
        $body = $(document.body),
        $doc = $('.doc-container'),
        $nav = $doc.find ('.doc-nav');

    // make the document navigation affix when scroll
    $nav.affix({
      offset: {
        top: function () {
          return 200; // replace with your top position to start affix
        },
        bottom: function () {
          return 300; // replace your bottom position to release the affix
        }
      }
    });

    // change navigation active according to scroll
    $body.scrollspy({
      target: '.doc-sidebar'
    });

// add progress bar for navigation
$nav.find ('a').before ($('<span class="docs-progress-bar"></span>'));

    $nav.on ('activate activate.bs.scrollspy', function () {
      $body.scrollspy("refresh");
      var $active = $nav.find('li.active');
      $active.prevAll().find('.docs-progress-bar').css ('width', '100%');
      $active.nextAll().find('.docs-progress-bar').css ('width', '0%');
    });

    $window.on ('scroll', function (event) {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout (function () {
        var $active = $nav.find('li.active'),
            $progress = $active.find('.docs-progress-bar'),
            $scrollspy = $body.data('bs.scrollspy'),
            scrollTop    = $scrollspy.$scrollElement.scrollTop() + $scrollspy.options.offset,
            scrollHeight = $scrollspy.$scrollElement[0].scrollHeight || $scrollspy.$body[0].scrollHeight,
            maxScroll    = scrollHeight - $scrollspy.$scrollElement.height(),
            offsets      = $scrollspy.offsets,
            targets      = $scrollspy.targets,
            activeTarget = $scrollspy.activeTarget,
            i;

        if (scrollTop >= maxScroll) {
          $progress.css ('width', '100%');
          return ;
        }

        if (activeTarget && scrollTop <= offsets[0]) {
          $progress.css ('width', '0%');
          return ;
        }
        for (i = offsets.length; i--;) {
          if (scrollTop >= offsets[i]
            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) {
            var p1 = offsets[i],
                p2 = scrollTop,
                p3 = !offsets[i + 1] ? maxScroll : offsets[i + 1],
                p = (p2-p1)/(p3-p1)*100;
            $progress.css ('width', (p < 2 ? 2 : p) + '%');
            return ;
          }
        }
      }, 100);
    });

});

})(jQuery);

</pre>
       </section>
       <section id="css">
           <p> </p>
           <p>A css fájlban a következő sornak kell lennie:</p>
           <p> </p>
           <pre class="prettyprint linenums pre-scrollable prettyprinted">.doc-nav.affix {
top: 60px;
}
.doc-nav.affix-bottom {
    position: relative;
}
.doc-nav > li {
    background: none repeat scroll 0 0 #F6F8FA;
    margin-bottom: 1px;
    width: 200px;
}

.doc-nav > li.active > a {
font-weight: bold;
}

.doc-nav .docs-progress-bar {
    background: none repeat scroll 0 0 #DEE4EC;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
}

</pre>
           <p> </p>
       </section>
       <section id="xml">
           <p>assets.xml fájl tartalma</p>
           <p style="padding-left: 30px;"><?xml version="1.0" encoding="utf-8"?><br /><assets><br />    <scripts><br />        <file>js/jquery.inview.min.js</file><br />        <file>js/jquery.parallax-1.1.3.js</file><br />        <file>js/jquery.placeholder.js</file><br />        <file>js/script.js</file><br />        <file>js/progressive.js</file><br />    </scripts><br />    <br />    <stylesheets><br />        <file>fonts/font-awesome/css/font-awesome.min.css</file><br />        <file><a href="http://fonts.googleapis.com/css?family=Roboto+Slab">http://fonts.googleapis.com/css?family=Roboto+Slab</a>:300,400,700</file><br />        <file><a href="http://fonts.googleapis.com/css?family=Open+Sans">http://fonts.googleapis.com/css?family=Open+Sans</a>:400,300,600</file><br />        <file>css/progressive.css</file><br />    </stylesheets><br />    <br /></assets></p>
           Ennek a cikknek a HTMLpéldája</section>
       <section></section>
   </div>
</div>