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">
            <!-- <ul class="nav nav-list affix"> -->
            <li><a href="#keszites">R&ouml;viden a hogyan</a></li>
            <li><a href="#js">JS f&aacute;jl tartalma</a></li>
            <li><a href="#css">CSS f&aacute;jl tartalma</a></li>
            <li><a href="#xml">XML f&aacute;jlhoz hozz&aacute;fűzni</a></li>
            <li><a href="#html">HTML p&eacute;lda</a></li>
        </ul>
    </div>
    <div class="doc-content col-md-9">
        <section id="keszites">
            <p>(: Egy kicsi html vagy m&aacute;sol&aacute;s, beilleszt&eacute;s, f&aacute;jl k&eacute;sz&iacute;t&eacute;s, kiterjeszt&eacute;s tud&aacute;s az&eacute;rt kell a megval&oacute;s&iacute;t&aacute;shoz :)</p>
            <p>&Eacute;n is mind sokan m&aacute;sok a Notepad++ haszn&aacute;lom ilyen c&eacute;llal a szerkeszt&eacute;shez</p>
            <p>Az UBER sablon eset&eacute;n a k&ouml;vetkező f&aacute;jlokat kell l&eacute;trehozni:</p>
            <p>&nbsp;/templates/uber/js/progressive.js</p>
            <p>/templates/uber/css/progressive.css</p>
            <p>&eacute;s m&oacute;dos&iacute;tani a k&ouml;vetkező f&aacute;jlt:</p>
            <p>/templates/uber/etc/assets.xml</p>
            <p>a js f&aacute;jlba a k&ouml;vetkező soronak kell lennie:</p>
            <p>&nbsp;</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 &gt;= maxScroll) {
          $progress.css ('width', '100%');
          return ;
        }

        if (activeTarget &amp;&amp; scrollTop &lt;= offsets[0]) {
          $progress.css ('width', '0%');
          return ;
        }
        for (i = offsets.length; i--;) {
          if (scrollTop &gt;= offsets[i]
            &amp;&amp; (!offsets[i + 1] || scrollTop &lt;= 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 &lt; 2 ? 2 : p) + '%');
            return ;
          }
        }
      }, 100);
    });   

});

})(jQuery);

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

.doc-nav &gt; li.active &gt; 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>&nbsp;</p>
        </section>
        <section id="xml">
            <p>assets.xml f&aacute;jl tartalma</p>
            <p style="padding-left: 30px;">&lt;?xml version="1.0" encoding="utf-8"?&gt;<br />&lt;assets&gt;<br />&nbsp;&nbsp; &nbsp;&lt;scripts&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;file&gt;js/jquery.inview.min.js&lt;/file&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;file&gt;js/jquery.parallax-1.1.3.js&lt;/file&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;file&gt;js/jquery.placeholder.js&lt;/file&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;file&gt;js/script.js&lt;/file&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;file&gt;js/progressive.js&lt;/file&gt;<br />&nbsp;&nbsp; &nbsp;&lt;/scripts&gt;<br />&nbsp;&nbsp; &nbsp;<br />&nbsp;&nbsp; &nbsp;&lt;stylesheets&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;file&gt;fonts/font-awesome/css/font-awesome.min.css&lt;/file&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;file&gt;<a href="http://fonts.googleapis.com/css?family=Roboto+Slab">http://fonts.googleapis.com/css?family=Roboto+Slab</a>:300,400,700&lt;/file&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;file&gt;<a href="http://fonts.googleapis.com/css?family=Open+Sans">http://fonts.googleapis.com/css?family=Open+Sans</a>:400,300,600&lt;/file&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;file&gt;css/progressive.css&lt;/file&gt;<br />&nbsp;&nbsp; &nbsp;&lt;/stylesheets&gt;<br />&nbsp;&nbsp; &nbsp;<br />&lt;/assets&gt;</p>
            Ennek a cikknek a HTMLp&eacute;ld&aacute;ja</section>
        <section></section>
    </div>
</div>


Ez az oldal is sütiket használ, hogy jól működhessen.
Ok