(For more resources on Scripty2, see here.)
Introduction to Scripty2
Some years ago the web started to see, with great amazement, the born of many JavaScript libraries. Most of them really helped us developers in working with JavasScript code, making life easier, and coding more fun and efective.
Some names that usually come to our minds are jQuery, MooTools, dojo, prototype, and surely many, many others. Among these, surely we can remember one called script.aculo.us.
It's not only about the cool name, but the great features it brings along with it. Now Thomas Fuchs, the developer behind script.aculo.us, is announcing a newer version. This time called Scripty2, and most interesting of all, this is a full rewrite, every line of code is new, with a big emphasis on making things better, faster and yet easy to use.
The three parts in which Scripty2 is divided is:
Core
Fx
Ui
We are going to take a quick glance to Fx and Ui, so you can see some of their impressive features.
First steps, downloading and placing the necessary code.
In order to download the library we need to go to http://scripty2.com/ here we will see an image just like the next one:
Clicking on it will result in the file being downloaded, and when the download finishes, we will be able to unzip it. Inside there are three more folders, and the necessary license documents. These folders are:
dist → we can find inside this folder the files we will need for the article.
doc → the documentation for the library, equal to the online one, but we can check it while offline. However, it's advisable to check the online documentation when possible, as it will be more up to date.
src → here we can find the source files for the library, each part of the library being on a separate file.
For the Scripty2 library to work, we will also need to included the prototype library, which is also included in the package. But we have another option, that's to include a file called prototype.s2.min.js. This file includes both libraries in it.
Summarizing it, if we want to use the Scripty2 libray we have 2 options, to include both libraries separately or simply include prototype.s2.min.js:
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/s2.js"></script>
Note that we are including the prototype-one first, as Scripty2 needs it. The second option, and the one we are going to follow in this article is:
<script type="text/javascript" src="js/prototype.s2.min.js"></script>
Now, let's take a look at what will be our base structure, first we will have a index.html file, with this code in it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml_lang="es-ES" lang="es-ES" ><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Scripty2</title><link rel="stylesheet" href="css/reset.css" type="text/css" /><link rel="stylesheet" href="css/styles.css" type="text/css" /> </head><body> <script type="text/javascript" src="js/prototype.s2.min.js"></script> </body></html>
Note that we have our JavaScript file placed at the end of the code, this is usually better for performance. This JavaScript file is located in a folder called js.
We have also included two css files, one styles.css, which is empty for now. And the other one is reset.css . I like to use Eric Meyer's css reset which you can find it here:http://meyerweb.com/eric/tools/css/reset/.
And that's all we need for now. We are ready to go, we will start with the UI part.
Scripty2 UI
The Scripty2 includes some very interesting UI controls, like accordion, tabs, autocompleter and many others. I think we could start with the accordion one, as it will make a nice example.
Accordion
For this we will need to add some code to our index.html file, a good start would be something like this:
<body> <div id="tabs_panel"> <ul> <li><a href="#tab1">Sample tab</a></li> <li><a href="#tab2">Another tab</a></li> <li><a href="#tab3">And another one</a></li> </ul> <div id="tab1">1.- This will be the content for the first tab.</div> <div id="tab2">2.- And here we can find the content for the second one.</div> <div id="tab3">3.- Of course we are adding some content to the third one.</div></div>
What have we done here? Just three things:
First we have created a tabs_panel div, inside which we will place the necessary code for tabs. It will be our container.
Next we have placed three div elements, with a link element inside each one, targeting a div. Inside each link, we find the title for the tab.
Finally we have placed the final divs, with the ids corresponding to these ones that where being targeted by the previous links. It will be in these divs that we will place the content for each tab.
Once we have this code in place we need something more to do the work, as this alone won't do anything. We need to make the necessary Scripty2 function call:
... <div id="tab3">3.- Of course we are adding some content to the third one.</div> </div> <script type="text/javascript" src="./js/prototype.s2.min.js"></script><script type="text/javascript"> new S2.UI.Tabs('tabs_panel');</script>
Easy, isn't it? We just need to add this call new S2.UI.Tabs('tabs_panel'); which targets our previously created div. Would this be enough? Let's take a look:
It seems nothing has happened, but that's far from true; if we check our page using Firebug, we will see something like the next image:
Want to learn more about Firebug? Check this Packt article: http://www.packtpub.com/article/installation-and-getting-started-with-firebug.
As we can see in the image, a whole bunch of css classes have been added to our quite simple html code. These classes are responsible for the tabs to work, does that mean that we have to create all of them? Well, not really.
Luckily for us, we can use jQuery UI themes for this. Yes, that's it, just go to this url:
http://jqueryui.com/themeroller/
And download your favourite one, from the gallery panel:
For example, I'm going to download the Hot sneaks one:
Once downloaded, we will be able to find the styles we need, inside the packaged file. If we unzip the file we will see these folders:
css
development-bundle
js
index.html
Opening the css folder we will see a folder called hot-sneaks, or the name of the theme you have downloaded. We will copy the entire folder into our own css folder. Thus we will have this structure:
css
hot-sneaks
reset.css
styles.css
Inside the hot-sneaks folder there's a file called jquery-ui-1.8.custom.css , we need to link this file in our index.html one, we will add these modifications:
… <title>Scripty2</title> <link rel="stylesheet" href="css/reset.css" type="text/css" /> <link rel="stylesheet" href="css/hot-sneaks/jquery-ui-1.8.custom.css" type="text/css" /> <link rel="stylesheet" href="css/styles.css" type="text/css" /> ...
But before taking a look at the result of these changes, we still need to do some modifications, this time in our own styles.css file:
body{ padding: 10px; }#tabs_panel{ width:350px; font-size: 12px;}
And we are done! Our site will look mostly like this:
In the image, we can see the three possible states of the tabs:
Normal tab
Active tab
Hover tab
It was easy to achieve, isn't it? Next example will be a text autocompleter, stay with us!
Text Autocompleter
In this example, we are going to use another of the Scripty2 nice feature, this time to build a text autocompleter.
This can be used to enhance site search, and it's pretty easy to achieve, thanks to Scripty2. First we need to add the necessary markup in our index.html file:
… <div id="tab3">3.- Of course we are adding some content to the third one.</div> </div> <br/><br/> <div id="text_autocompleter"> <input type="text" name="demo" /> </div>...
Not much added here, just another container div, and an input, so we can write in it. We now need our JavasCript code to make this work:
new S2.UI.Tabs('tabs_panel'); var favourite = [ 'PHP', 'Ruby', 'Python', '.NET', 'JavaScript', 'CSS', 'HTML', 'Java' ]; new S2.UI.Autocompleter('text_autocompleter', { choices: favourite }); </script> …
First what we need to do is to create an array of possible values, and then we call the Autocompleter method, with two parameters, first the div we are targetting, and then the array of values.
Also we are going to modify our styles.css file, just to add some styling to our text_autocompleter div:
...#tabs_panel, #text_autocompleter{ width:350px; ...
If we check our page after these changes, it will be looking this:
If we try to enter some text, like a p in the example, we will see how options appear in the box under the input. If we do click on the option, the input box will be filled:
Just after we select our desired option the suggestions panel will disappear, as it will do if we click outside the input box.
Note that if the theme we are using lacks the ui-helper-hidden class, the suggestions panel won't dissapear. But don't worry, solving this is as easy as adding this class to our styles.css file:
.ui-helper-hidden{ visibility: hidden; }
And we are done, now lets see an example about the accordion control.
Accordion
This is quite similar to the tabs example, quite easy too, first, as always, we are going to add some html markup to our index.html file:
<div id="accordion"> <h3><a href="#">Sample tab</a></h3> <div> 1.- This will be the content for the first tab. </div> <h3><a href="#">Another tab</a></h3> <div> 2.- And here we can find the content for the second one. </div> <h3><a href="#">And another one</a></h3> <div> 3.- Of course we are adding some content to the third one. </div> </div>
Good, this will be enough for now. We have a container div, where we are placing the necessary elements, each h3 element, with links inside, will be the headings, and the divs will be the contents for each tab.
Let's add some styles in our styles.css file:
#tabs_panel, #text_autocompleter, #accordion{ width:350px; font-size: 12px;}#accordion h3 a{ padding-left: 30px; }
I've placed the necessary changes in bold. Now to the JavaScript code, we will add this in our index.html file:
… new S2.UI.Accordion('accordion'); </script> ...
The first parameter will be the id of our container div, for now, we don't need anything more. How does all this look like? Just take a look:
Good, clicking on each one of the headings will result in closing the current tab and opening the clicked one. But, what if we want to be able to open each clicked tab, but without closing the others? Well, thanks to Scripty2 we can also achieve that. We only need to make some small modifications to the JavaScript call:
…new S2.UI.Accordion('accordion', { multiple: true }); </script> …
As we see, the second parameter for our accordion function can receive some options, this time we are selecting multiple to true. This way our accordion tabs won't close:
In the previous image we can see all our tabs open, but we have some more options, let's see them. The first one will help us define our prefered header selector. As our code is now we are using h3 elements:
<h3><a href="#">Sample tab</a></h3> <div> 1.- This will be the content for the first tab.</div>
But what if we wanted to use h1 elements? Well, it won't be very hard, just a tiny add to our JavaScript code:
new S2.UI.Accordion('accordion', { multiple: true, headerSelector: 'h1' });
The last option we are going to see is the icons one, by default, this option will use these values:
icons: { header:'ui-icon-triangle-1-e',headerSelected: 'ui-icon-triangle-1-s' }
Where do these icons come from? Well, these little icons are from the theme we downloaded, and we have plenty of them to use. If you open the theme package, the one we downloaded at the start of the article, and we click on the index.html file, we will be able to see a demo of all styles included in the package.
More or less at the bottom we will see a group of tiny icons:
If we hover over these little icons, its name will appear, and that's what we can use to change our options. So in our index.html file, we could change our JavaScript code just like this:
new S2.UI.Accordion('accordion', { multiple: true, headerSelector: 'h1', icons: { header: 'ui-icon-circle-plus', headerSelected: 'ui-icon-circle-minus' } });
We define one option for the headers, and other for the selected one, how will this look like:
And with this option we have seen all the three available. With them we can customize our accordion as we wish.
Summarizing, we have found that the Scripty2 library includes some very useful UI controllers. We have seen some of them, but there are many others, such as:
Buttons → Scripty2 helps us in creating good looking buttons. Not only normal buttons, but also buttons that behave as checkboxes, or even radio buttons.
Dialog → There are also some functions in the Scripty2 library that will help us in creating modal dialog boxes, with the contents we want.
Slider → If at anytime we are in need of creating a slider, be it for moving the contents of a div, for creating an image gallery or for creating an interesting price filter, it is pretty easy with Scripty2.
Progress bar → This one is pretty interesting, as will help us in the task of developing an animated progress bar, very nice!
Now we will be taking a look at another interesting part of the library, the FX one.
Read more
United States
Great Britain
India
Germany
France
Canada
Russia
Spain
Brazil
Australia
Singapore
Canary Islands
Hungary
Ukraine
Luxembourg
Estonia
Lithuania
South Korea
Turkey
Switzerland
Colombia
Taiwan
Chile
Norway
Ecuador
Indonesia
New Zealand
Cyprus
Denmark
Finland
Poland
Malta
Czechia
Austria
Sweden
Italy
Egypt
Belgium
Portugal
Slovenia
Ireland
Romania
Greece
Argentina
Netherlands
Bulgaria
Latvia
South Africa
Malaysia
Japan
Slovakia
Philippines
Mexico
Thailand
