ContainsJS is a tool to help create HTML using include. This means you can include any .html file inside your main html page. Helps you to reuse your code on other pages.
- Create your HTML snippets - Instantiate ContainsJS and pass your views folder's path as parameter
- Include any .html to your pages.
ContainJS needs jQuery in your project to work.
On Windows
$ cd into_your_app_root_folder
$ mkdir views
$ npm install contain -s
$ move /node_modules/constainsjs/contains.js /public/scripts/On Linux/Mac
$ cd into_your_app_root_folder
$ mkdir views
$ npm install contain -s
$ mv /node_modules/constainsjs/contains.js /public/scripts/<script src="https://cdn.jsdelivr.net/npm/containsjs@0.1.4/contains.js"></script>In your HTML
<head>
<!-- Your jQuery Import goes here -->
<script src="/scripts/contains.js"></script>
</head>After you've included Contain in your project, open your main JS file. Instantiate ContainsJS document.ready.
$(document).ready(() => {
// -> "/views/" is the path of the views folder we created.
// Must contain / before and after the folder path.
var contains = new ContainsJS('/views/');
contains.include('header.html');
});In your main HTML file, use the <contains> tag.
<body>
<contains view="header"></contains>
</body>Note that inside <contains> the name of the file you used inside your JS, is the same as the one in HTML, apart from the .html which is not necessary in HTML.
Inside your views folder, create a header.html file.
<div>
<nav>
<ul>
<li><a href="http://npmjs.org/packages/containsjs">Contain</a></li>
</ul>
</nav>
</div>If you want to include new script to your views, instantiate like this:
containjs.include('test.html', ['./test.js', './test2.js']);
Where the second parameter is a scripts array. Specify the path only from the views folder you defined. Example: Files test.js and test2.js inside /views folder.
Or even scripts from other sources
containjs.include('test.html', ['https://www.script.com/script']);
You can also run inline scripts in your HTML
<div>
<nav>
<ul>
<li><a href="http://npmjs.org/packages/containsjs">Contain</a></li>
</ul>
</nav>
</div>
<script>alert("Hello, I'm working!")</script>If you need synchronous including of your code, use the Promise in the function.
contains.include("header.html", [".header.js"]).then(() => {
// Now your HTML is included.
});If you want to use custom variables inside your HTML, you can do so by doing like this:
containjs.include('teste.html',['./teste.js'], {name: 'Bob'});
Where the third parameter is a object with the same name you will specify on your HTML.
And to access it on your HTML:
<div>
<nav>
<ul>
<li><a href="http://npmjs.org/packages/containsjs">Contain</a></li>
<p>$name</p>
</ul>
</nav>
</div>
<script>alert("Hello $name, I'm working!")</script>Add the same variable with a $ in front of it.
There's two ways to append elements to your included HTML.
With raw elements
contains.append("table.html", "<tr>Test</tr>")Or with another view
contains.append("table.html", null, "table-element.html", {name: "Test", age: "18"}).then(() => {
// Now your HTML is included.
}) The function takes 4 parameters, if you are using the raw element, you only need to pass your view, and the element to be included.
If you want to include another view to it, you need to pass your view, null, the path to the other view and optionally a attributes object to be included.
You can also hide/show your views programmatically.
You don't need to use show on your newly created <contains></contains>. The show function can be used for transitions for example.
contains.show('header.html');
contains.hide('footer.html');You can include as many tags you want, and you only need to instantiate each one, only one time.
<contains view="header"></contains>
<contains view="body"></contains>
<contains view="footer"></contains> $(document).ready(() => {
var contains = new ContainsJS('/views/');
contains.include('header.html');
contains.include('body.html');
contains.include('footer.html');
});MIT