jakearchibald

<div id="hideLinkContainer"></div>

<div id="stuffToToggle">Hello!</div>

<script type="text/javascript">
	// we create the show / hide link in JavaScript so it isn't there for
	// users with JavaScript disabled
	var showHideLink = glow.dom.create('<a href="#">Hide</a>').appendTo('#hideLinkContainer');
	var stuffToToggle = glow.dom.get('#stuffToToggle');
	

jakearchibald

<script type="text/javascript">
(function() {
	var glow = ember.getSeed('2').load('widgets').ready(init);
	
	function init() {
		// now my application can start & use 'glow'
	}
})();
</script>

jakearchibald

<script type="text/javascript">
	gloader.getSeed(2).load('widgets').ready(function(glow) {
		glow.dom.get('#yey');
		// glow is the latest 2.x.x version
	});
</script>

jakearchibald

<script type="text/javascript" src="scripts/glow/2.0.0/seed.js"></script>

<script type="text/javascript">
	glow.load('widgets').ready(function() {
		glow.dom.get('#yey');
		// glow is version 2.0.0, the same version as the seed
	});
</script>

jakearchibald

<script type="text/javascript" src="scripts/glow/2.0.0/core.js"></script>
<script type="text/javascript" src="scripts/glow/2.0.0/widgets/widgets.js"></script>
<link rel="stylesheet" href="scripts/glow/2.0.0/widgets/widgets.css" type="text/css" />

<script type="text/javascript">
	glow.dom.get('#yey');
	// etc etc
</script>

jakearchibald

<script type="text/javascript" src="scripts/glow/2.0.0/core.js"></script>
<script type="text/javascript" src="scripts/glow/2.0.0/widgets/widgets.js"></script>
<link rel="stylesheet" href="scripts/glow/2.0.0/widgets/widgets.css" type="text/css" />

<script type="text/javascript">
	glow.dom.get('#yey');
	// etc etc
</script>

jakearchibald

<script type="text/javascript">
	gloader.load(['glow', '1', 'glow.dom', 'glow.anim'], {
		async: false,
		onLoad: function(glow) {
			window.glow2 = glow;
		}
	});
</script>
<script type="text/javascript">
	// glow2 is available here

jakearchibald

var mySortable = new glow.widgets.Sortable('#mySortable', {
	onSort : function () {
		// this will contain the IDs of the items in the sortable, in order
		var itemIds = [];
		
		// get the children of the sortable containers - these are the items you drag
		// Then sort them, and get the ID for each
		mySortable.containers.children().sort().each(function () {
			itemIds.push( this.id );
		});

jakearchibald

var mySortable = new glow.widgets.Sortable('#mySortable', {
	onSort : function () {
		// this will contain the IDs of the items in the sortable, in order
		var itemIds = [];
		
		// get the children of the sortable containers - these are the items you drag
		// Then sort them, and get the ID for each
		mySortable.containers.children().sort().each(function () {
			itemIds.push( this.id );
		});

jakearchibald

function Ball(colour) {
	// ...
}
Ball.prototype.on = function(eventName, callback) {
	glow.events.addListener(this, eventName, callback);
};
Ball.prototype._moved = function() {
	if (this._directionChange) {
		glow.events.fire(this, 'bounce');
	}