Bootstrap framework for dynamically generating Web page article contents _javascript tips

Introduction
in writing a blog, for the sake of rationality, often use a lot of small headings, when the article is long, need to go back and forth between the different titles shuttle, if manually add a directory, add anchor point, it is really trouble, for this, can dynamically generate a directory area, and use the affix plug-in provided by Bootstrap to secure the directory area on the page. The bootstrap document uses it

Preparation-Introduction of Bootstrap.min.js
put the bootstrap.min.js in the script tag before the body, Uikit.min.js is temporarily not introduced.
After the introduction of the relevant plug-ins, our idea is to first automatically generate anchor points and menu content according to the article, then add affix to create a fixed effect, and then use Uikit scrollspy plug-ins (Bootstrap also have scrollspy, the use of the method is almost consistent).
Use of primer-learning affix
The affix plug-in Karki helps us to fix the location of the navigation section and increases the vertical offset for the fixed element based on user scrolling, allowing the nav to switch between three classes:
1.affix-top: indicated at the top
2.affix: means scrolling through the page, increasing the fixed property and using a custom offset offset
3.affix-bottom: To reach the bottom

Enabling affix requires only the following code:

$ (' #nav '). Affix ({
  offset: {
          top:$ (' header '). Offset (). Top,
      bottom: ($ (' footer '). Outerheight (True) + 
        $ ('. Application '). Outerheight (True) +
    }
});

I. Organization of HTML code sections

<ul id= "Mysidebar" class= "Nav affix" >
</ul>

Must pay attention to the UL Add nav and affix class.

Second, generate packaging code
introduce this snippet into your own script scripts

 ; $.fn.extend ({
    "Createaffix": function (selector) {
      $list = $ ("" + selector),
        length = $list. Length,
        Affixvalue = "";
      for (var i = 0; i < length; i++) {
        //Add the name attribute to each title
        $list. EQ (i). attr ("id", ("node" + i));
        var text = $list. EQ (i). text ();
        if (i = = 0) {
          Affixvalue + = "<li><a href= #node" + i + "class= ' active ' >" + text + "</a></li> ";
        } else {
          Affixvalue + = "<li><a href= #node" + i + ">" + text + "</a></li>";
        }
      }
      This.append (affixvalue);
      This.affix {offset
        : {
          top:this.offset (). top//the offset at the top of the fixed length
        }
      });
      return, this;
    }

 });

The principle of the above code is to pass the Createaffix function to a label or class that needs to be considered a header unit, adding an anchor point link to it during the traversal.

Iii. Methods of Use
Write HTML section

 <ul id= "Mysidebar" class= "Nav affix" >
 <li><a href= "#node1" ></a></li>
 <li ><a href= "#node2" ></a></li>
 <li><a href= "#node3" ></a></li>
 </ul>

 
 
 

Writing the JavaScript section

 $ (function () {
 $ (' #mysidebar '). Createaffix (' H3 ');
 In the article, the use of ' H3 ' tags is where the anchor points need to be added.
 });

Solve the problem of Anchor point offset
because the anchor point offsets the page by default to the top of the anchor element, that is, if we do the above for Heading 1, when we click on the anchor point, the page will be offset to the top of the ' Heading 1 ', and if the top has a menu bar, it will be obscured, by setting the CSS style to solve.

. class{/
    *
    add padding to offset the anchor point down to Num px, which is to skip the height of the menu bar, and
    to ' make up ' for the blank part of the Padding-top by setting the margin-top as a negative value
    * *
    padding-top:num px;
    Margin-top:-num px;

Add scrolling Monitor
so far our DOM documentation is like this.

<ul id= "Mysidebar" class= "Nav affix" >
<li><a href= "#node1" ></a></li>
<li ><a href= "#node2" ></a></li>
<li><a href= "#node3" ></a></li>
</ul>

Processing, the introduction of Uikit properties, the specific view of the document

<ul id= "Mysidebar" class= "Nav affix uk-nav uk-nav-side" data-uk-scrollspy-nav= "{closest: ' Li ', smoothscrool:true}" >
<li><a href= "#node1" ></a></li>
<li><a href= "#node2" ></a> </li>
<li><a href= "#node3" ></a></li>
</ul>

Introduction of Uikit.min.js
Since our menu item (LI) is executed after the document is loaded, if the Uikit Scrollspy is changed before the menu item is generated, then it will not work, so to introduce the Uikit.min.js after the menu item is generated, the code is as follows:

$ (function () {
$ (' #mysidebar '). Createaffix (' H3 ');//Generate Menu
$.getscript ("Uikit.min.js"); The uikit.min.js is loaded asynchronously, and scrolling monitoring takes effect.
});