64 lines
1.8 KiB
HTML
64 lines
1.8 KiB
HTML
|
<h1 id="setup">Setup</h1>
|
||
|
|
|
||
|
|
<div class="intro">
|
||
|
|
Adding HeadJS to your site
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="code-example" data-title="Setup">
|
||
|
|
<p>The most common way to include HeadJS on your site will be to include it in the <head></p>
|
||
|
|
|
||
|
|
{% highlight html %}
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="head.min.js"></script>
|
||
|
|
<script>
|
||
|
|
head.load("file1.js", "file2.js");
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- my content-->
|
||
|
|
|
||
|
|
<script>
|
||
|
|
head.ready(function () {
|
||
|
|
// some callback stuff
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
<p>But sometimes you might want it to load up a bunch of code right away, without having to declare that code in a new <script> tag. This can be very useful when using code-generation, or even if you just want to stick all your code in a centralized place.</p>
|
||
|
|
|
||
|
|
{% highlight html %}
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="head.min.js" data-headjs-load="init.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- my content-->
|
||
|
|
|
||
|
|
<script>
|
||
|
|
head.ready(function () {
|
||
|
|
// some callback stuff
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
<p>In the above example you would put your code in init.js, which would be called automagically</p>
|
||
|
|
|
||
|
|
{% highlight js %}
|
||
|
|
// init.js
|
||
|
|
head.load("file1.js", "file2.js");
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
<p>Note: Only the first detected instance of data-headjs-load will be used, so make sure there is only one on the page.</p>
|
||
|
|
|
||
|
|
<div style="width:100%;">
|
||
|
|
<div onclick="blog.loadComments(this, 'api/2.0.0/setup', 'Leave a comment')" style="cursor: pointer;">
|
||
|
|
<h2>Show Comments</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|