Interactive UI development using jQuery

Last updated on Aug 02, 2016

Alphanso Tech

jQuery / JS

3

Interactive UI development

A simple step by step guide that shows you how to Interactive UI development using jQuery and gives you brief introduction to DOM(Document Object Model) with code explanation, live example and sample download code that you can use to run solution on your own machine.

  • Interactive UI development is a significant part of any website.The Interactive UI development is mainly consist of HTML,CSS and JavaScript.
  • Use of jQuery in place of pure JavaScript is good for the programmer, since jQuery is a library of JavaScript and works on the principle “The write less,Do more”.
  • To start with Interactive UI development, A programmer must have a basic know how about DOM. Well, DOM is stands for Document Object Model.It defines the logical structure of documents and the way a document is accessed and manipulated.When a web page is loaded, the browser creates a Document Object Model of the page.
  • A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all of these using CSS, or interact with them using JS.
  • Consider the following case, it shows you that how JS interacts with DOM.

Suppose, we need to add/reomove textboxes to DOM.

Simple textbox

Simple textbox

Push textbox to dom

Push textbox to dom

Remove textbox from dom

Remove textbox from dom

 

Name of dynamic textbox

Name of dynamic textbox


We disunited the entire assignment into three parts.

Selectors are the most important parts in DOM while working on front-end programming, and especially when the JavaScript is interacting with DOM. The selectors are the entities which used to identify the particular element in DOM, so that The JS can interact with DOM by targeting a certain portion of DOM.

  1. Add the TextBox into DOM.
  2. Remove the TextBox from DOM.
  3. Index and Naming for the TextBoxes.

Add the TextBox into DOM


Interactive UI development: Add TextBox element to DOM

  • Initially one textbox is already in DOM,Now we will bind the JS code on given button click event.The following code add textbox to DOM under the DIV which id is at_textbox.

Remove the TextBox from DOM

Interactive UI development: Remove TextBox element to DOM

Index and Naming of TextBox

Well, Index and naming conventions are important while working with DOM. Especially naming is quite important ,as the taxboxes will going for submission further.So the name of textbox should be an array so we can access them by simple array iteration.

To Index the TextBox

add a hidden element to DOM, with every call of JavaScript thake the value from this hidden element and then add sequential increment value to this TaxtBox

Let’s see another example of jQuery Interactive UI Development.

The example contents moving the child elements from their parent elements.

For do that we use jQuery .contains() selector.

jQuery contains(text) selector is used to select all elements that are contains specified text.Visit our blog to know more about jQuery contains().

 

Let’s do it.

We have two different div,each has some content,In our case we have image.Now we will swap all content from div-1 to div-2.To do this first get entire content from div-1 and div-2 then append div-2 content to div-1 and div-1 content to div-2.

 

I hope you will find this post very useful regarding Interactive UI development using jQuery. Let me know any questions if you have in comment regarding jQuery. I will reply you ASAP.

Have you got cool idea about Web Application development? Contact us Now to get free consultation on your idea. Alphanso Tech is rated as one of the best Web Development Company in India.

Post by Alphanso Tech

Created in 2009, Alphanso Tech is a leading IT Consulting company with a presence in the USA, Canada, and India.We are a trusted and leading service provider to many top-tier companies in the area of Custom WordPress Development , Web Application Development , iOS App Development , Outsourcing Services, Online Marketing and many other related activities.

3 Responses to Interactive UI development using jQuery

  1. Pingback: Jquery Drag and Drop Tutorial | step by step tutorial guide

  2. Pingback: jQuery navigation menu examples | step by step tutorial guide

Leave a Reply

Your email address will not be published. Required fields are marked *