A lightweight framework for rapid development with Javascript.
Download either the minified or un-minifed version from the dist
folder.
<script type="text/javascript" src="dist/unsplit.min.js"></script>
Clone our repository and install the modules to build unsplit with Grunt (NOTE: You will need to have nodeJS installed):
git clone https://github.com/unsplit/unsplit.git
cd unsplit && npm install
grunt
To change what is include in the build, edit the Gruntfile.js
and look for the fileOrder
array.
We provide a generator for unsplit, which allows you to specify in the url which modules/plugins get included. You can either clone the Generator repository and link through to it or you can link through to ours:
http://generator.unspl.it/?core,ajax,handlebars
Pass through an element such as document
or query based on CSS selectors.
$(document)
$(".main")
$("[name=woo]")
Include other modules here. (coming soon)
$(document).module(['ui'], function($ui){
// module has loaded
});
Configure and initialize a controller. (coming soon)
$(document).module(['ui'], function($ui){
$("body").controller({
url: "/",
view: "templates/test.html"
}, function($scope, $ajax) {
//controller has loaded
});
});
$(".hello").addClass("wooo");
$(".hello").removeClass("wooo");
$(".buttonToClick").click(function(e) {
// do whatever
});
To recieve the html:
$(".hello").html();
To change the html
$(".hello").html("New html");
var pos = $(".middle").position();
console.log(pos.x, pos.y);
To recieve the attribute's value:
$(".hello").attr("name");
To change the value:
$(".hello").attr("name", "Michael");
$(".hello").hasClass("there");
Insert text or HTML
$(".hello").append("new text");
$(".hello").append("<div><i>new</i> <b>html</b></div>");
$ajax.get("http://unspl.it/package.json").success(function(data){
// successfully got the json file with automatic json parse
});
$(document).module(['ui'], function($ui){
$("body").controller({
url: "/",
view: "templates/test.html"
}, function($scope, $ajax) {
//controller has loaded
$scope.games = [{
name: "resident evil",
tags: [{
name: "Playstation"
}, {
name: "Xbox"
}],
}];
$scope.state = "";
$scope.howdy = "";
$scope.test = function(){
console.log("im running son!");
};
});
});
Request a template via url, this is handy for keeping your code in small chunks.
<div data-template="templates/test.html"></div>
<!-- templates/test.html -->
{{#games}}
* {{name}}
{{/games}}
Repeat the DOM element by an array/object
<div data-repeat="games">
<h2>{{name}}</h2>
<ul>
{{#tags}}
<li>
{{name}}
</li>
{{/tags}}
</ul>
</div>
On a particular keypress, run a function in the scope
<input type="text" data-keypress="enter: test()"/>
We want to keep the core of unsplit minimal, so you can choose exactly what you need from the framework. Here you will find a list of plugins which are supported within the core:
Name | Status | Website | API |
---|---|---|---|
Mustache | development | http://mustache.github.io/ | .template(html) |
Handlebars | development | http://handlebarsjs.com/ | .template(html) |
Google Analytics | development | http://developers.google.com | .ga(category, label, value) |