vegUISiteKit Tutorials

« Previous Entries

Archive

Next Entries »

VegUiSiteKit - Remote Scripting with the VSK Tunnel Sometimes an xml request based solution won't suffice for a project. If, for example, you need to request data from a remote server then ajax is very limited due to browser security settings. You would always need to use server based software as a middle man for the requests.

The VSK Tunnel object uses both the IFRAME and SCRIPT elements to provide a means to send requests to remote locations.

The iframe portion of the library is very unfinished and untested, so this tutorial will focus mainly on remote scripting via the SCRIPT element.

So let's get started.


VegUISiteKit - Using the Autocomplete Library The VSK Autocomplete library allows you to add a customizeable auto-complete feature to one or more text input elements on your page.

It supports traditional auto-completion, where the feature is applied to the whole value in the text box as well as tag based auto-completion, which means that the feature is triggered individually for each tag.

So let's get started.

In order to use this library you will also need to include the VSK Form Tools and VSK Core libraries. The easiest way to do this is by compiling them all into one file by using our compiled download script.

This is script is fairly simple to set up, first we will need a text input field to apply it to.


vegUISiteKit - Compiled Download Instructions The compiled download script that you can find on this site, was added recently and it allows you download any vegUISiteKit library with one click.

It automatically includes any dependencies (libraries that the selected library may need to function) so you no longer need manually pick and download them.

Simply select the libraries that you wish to have included in your final javascript file from the list, then select the data and file compression. The data compression can either be "commented" - which is not compressed at all and includes source documentation - or "compressed"


VegUISiteKit - Dropping Down Some Menus In this tutorial i will show you how to implement the vsk dropdown menu into your website. We will take a look at menu styling and nested menus also.

Make sure the necessary vsk libraries are included in your html page. You can check what dependencies the vsk dropdown menu script has in the online documentation or the on this page.

If you're not sure on how to use vsk in your web project at all please read this tutorial before continuing on here.

We begin with the HTML code that builds the elements of the menus.


VegUISiteKit - Implementing the pulsating menu Argh, will never get over this name, but it's too late and i decided to stick with it. The pulsating menu is a navigation menu for your website that consists of multiple icons that grow when the mouse pointer hovers over them and can be clicked to navigate through the site.

When developing the VSK libraries i try to stick to a simplistic design as i want the vsk stuff to be very easy to implement - so hopefully this should be a fairly short tutorial.

Make sure you include the pulsating menu library in your webpage and all the other required VSK libraries. You can find out which vsk libraries the pulsating menu is dependent on by checking the online documentation or the library's page.

If you dont know how include the vsk libraries make sure you read this tutorial before proceeding.

Alright let's look at the icons first. As i said each icon will represent a menu node or menu point if you will. You will need two versions for each icon - which btw could be a jpeg, gif or any browser supported graphic file. The first version is a small version of the icon, this is the image that is displayed when the icon is in the shrunk (normal) state.


VegUISiteKit - Implementing Formcheck With VSK Formcheck you can add client-side validation of user input to any of your HTML forms. Before we start off with this tutorial let me make clear that this script is not supposed to replace server-side validation and doing so would be stupid.

The script's main purpose is to enhance the experience of the user as their input gets checked for errors and the user is notified before the request is sent to the server.

Let's start by creating a little test form that we will use to test formcheck on. This is a very simple form, with a name, email and URL field.


How to work with the VSK Shadow effect The VSK Shadow effect allows you to add a static shadow effect to any absolute or relative positioned html node in your document.

The shadow effect itself is being created by the addition of a node that is "glued" to the node it is attached to. When i say glued i mean it will move and resize with the node it belongs to.

In order to utilize the effect make sure the vegui.sk.ani.shadow.js library is loaded as well as any other libraries the effect is dependent on. You can check which files those are in the online documentation of VSK or the VSK Effect: Shadow page.


vegUISiteKit - Implementing the animated menu The animated menu library allows you to have collapse-able sections on your page. Many collapse-able sections in a row make a menu. A section is collapsed / expanded when the header element that is linked to the section is clicked by the user. The collapsing and expanding is handled with the morph effect of the VSK library.

The animated menu works in a way that assumes that a navigation menu has multiple sections and each section has a header that helps the user understand what the links in the section deal with.

A VERY simple menu could look like this for example:


vegUISiteKit - Using the animated tooltips One of the main reasons i started development of VSK was not that i wanted to create another javascript tool set (well not only) but was that i wanted a way to easily create little gadgets that people can integrate into their websites easily.

The animated tool-tip library is a prime example of that. It allows you to have tooltips for any element in your document that will fade or morph into few when the user mouses over said element.

Simply include the needed libraries in the head of your HTML and start setting the vsk_ttip attribute on the elements that you want to have a tooltip.


vegUISiteKit - Effect: Morph The morph effect - odd name i agree, must have been late when i named it - allows you to grow,shrink or move a node in a smooth animation. This is cool for popup effects or collapsing and expanding of elements.

As soon as the morph effect library is included the method fx_morph() is added to the VSK_Node object.

The first two arguments of the method define the size that the node will morph to in the time of the effect - width and height respectivly. Argument 3 and 4 are the coordinates that the node should move to in the time of the effect - x and y respectively and the last argument is the time of the effect (ms).

« Previous Entries

Show Overview

Next Entries »

---