Toolkit:quickstart guide

From Surebert wiki

Contents

Installation

Getting the surebert javascript toolkit up and running on your site is easy. If you are using the surebert framework for your application you can skip the next step of exporting as the toolkit is integrated with the framework. See Framework:toolkit_integration for more info.

  1. Simply export the surebert toolkit into the document root of your web application/site using SVN.

    bash code

     svn export http://surebert.com/svn/toolkit/trunk/ surebert
  2. Include the toolkit on the bottom of your webpage

    html4strict code

    <script type="text/javascript" src="/surebert/sb.js"><script>

Simple Examples

Once surebert is installed you use it in another script block after the one above and test out the following examples

Selecting Nodes

Surebert excels at making cross browser node selection and creation. The s$ supports many CSS selectors. See Toolkit:node selection for more information. Every node selected with s$ has all the properties of a Toolkit:sb.element

Selecting a single node

Retuns a reference to myDiv as referenced by ID

javascript code

var myDiv = s$('#myDiv);

Select groups of nodes

gets a reference to all nodes with the className .myClass

javascript code

var nodeList = s$('.myClass')

When using s$ to select groups of nodes, it returns an instance of Toolkit:sb.nodeList.

Events

Here is an example script that fires anytime you mousedown on any node on the page and alerts the node name

javascript code

var myEvent = sb.events.add('#parent', 'click', function(e){
	alert(this.innerHTML);
});

to remove the event

javascript code

sb.events.remove(myEvent);

If you are going to be firing events on multiple child nodes, (e.g. list items in an ordered list or paragraphs in a div) it is always better to add it to the parent node. It uses less memory and is easier to maintain.

In this example we are adding a click event to a list with the id myOl. When the list is clicked, its click event fires. The event alerts the innerHTML of the child node clicked. If you had 30 child list items in the list, you now have one event that detects click on any of them, and has reference to that list item instead of have 30 individual click events.


javascript code

s$('#myOl').events({
	click : function(e){
		var target = sb.events.target(e);
		alert(target.innerHTML);
	}
});

Loading Ajax Data

This is a very simple ajax example, there are many options that are left out in this example. For more information see the Toolkit:ajax. In the example we are loading text data from /some/servsidescript and then alerting the data returned. The fetch() method of the sb.ajax instance is what fires the ajax request. You could have this fire on a click event by moving the aj.fetch() call into a nodes click event.

javascript code

var aj = new sb.ajax({
	url : '/some/servsidescript',
	handler : function(response){
		alert(response);
		//e.g. $('#myDiv').innerHTML = repsonse;
	}
});
aj.fetch();

Creating New Nodes

You can create

javascript code

var myElement = new sb.element({
	tag : 'div',
	innerHTML : 'Hello world',
	className : 'helloworld',
	styles : {
		backgroundColor : 'red',
		fontSize : '2em'
	},
	events : {
		click : function(e){
			var target = sb.events.target(e);
			alert(target.nodeName);
		}
	}
});

More Complex Example

e.g.

javascript code

sb.include('element.prototype.cssTransition');
sb.include('colors.getTweenColor');
 
//creates a pseudo namespace for your application
var app = {
	//referencees the html node on the page
	html : s$('html'),
 
	feedback : new sb.element({
		tag : 'div',
		innerHTML : '',
		styles : {
			border : '1px dotted red',
			padding : '10px',
			marginBottom : '10px'
		}
	}),
	//adds events to the html node, in this case mousedown
	addEvents : function(){
		this.html.events({
			mousedown : function(e){
				var target = sb.events.target(e);
				app.feedback.appendToTop('body');
				app.feedback.innerHTML = 'mousedown detected on '+target.nodeName;
 
				//don't perform color transition on BODY or HTML
				if(target.nodeName.match('BODY|HTML')){
					return false;
				}
 
				var transitions = target.cssTransition([
				{
					prop : 'backgroundColor',
					begin : 'FF0000',
					end : 'rgb(0,255,0)',
					onEnd : function(){
						target.style.backgroundColor = '';
					},
					duration : 24
				}]);
 
                transitions.start();
			}
		});
	},
	init : function(){
		this.addEvents();
 
	}
 
};
app.init();

Troubleshooting

If for some reason you have the surebert toolkit in a location other than /surebert you must also set the sbBase variable to specify that location.

html4strict code

<script type="text/javascript">
var sbBase = '/other';
<script>
<script type="text/javascript" src="/js/my.compressed.surebert.js"><script>

You may ask why I don't just read this automagically by checking the path of the sb.js script tag. The reason this is done is that you may have the sb.js file or additional surebert toolkit modules compressed and served from a file not even in the surebert toolkit root, however, the toolkit needs to know where the toolkit root is located because it may need to load additional items as required.

Retrieved from "http://wiki.surebert.com/index.php/Toolkit:quickstart_guide"