Script Src Archives - SEO, SEM, Web, ECommerce, IOS And Android | SEO, SEM, Web, eCommerce, iOS and Android

Archive for 'Script Src'

Absolute basic skeleton of a Sencha Touch project

Friday, October 14th, 2011 at 12:55 pm

Sencha Touch is the latest and most powerful of web app frameworks. Web apps are mobile applications that run on a web browser (just browse the URL) but, with the look, feel and functionality of a native app

There are many examples out there for Sencha Touch but, I couldn’t find one that explains the absolute basic outline of a Sencha Touch project. Here I will explain what the basic outline of a Sencha Touch project looks like:

index.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Learn Sencha&lt;/title&gt;
        &lt;script src="lib/touch/sencha-touch.js" type="text/javascript"&gt;&lt;/script&gt;
	 &lt;link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /&gt;
        &lt;script&gt;
		Ext.setup({
			onReady: function() {
				// This is the absolute skeleton of a Sencha Touch file.
				// When the DOM is ready for you to play with, this function will be called.
				// All your Sencha Touch code should go in here.
			}
		});
		&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Learn Sencha</title>

Ext.setup({

onReady: function() {

// This is the absolute skeleton of a Sencha Touch file.

// When the DOM is ready for you to play with, this function will be called.

// All your Sencha Touch code should go in here.

}

});

</script>

</head>

</html>

It is always recommended not to embedded Javascript inline like this. Preferably, create a file called app.js and put the Javascript code in it. Include the js file in your HTML. So, finally you will end up with 2 files like this:
index.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Learn Sencha&lt;/title&gt;
        &lt;script src="lib/touch/sencha-touch.js" type="text/javascript"&gt;&lt;/script&gt;
	 &lt;link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /&gt;
        &lt;script src="app.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Learn Sencha</title>

</head>

</html>

app.js

Ext.setup({
    onReady: function() {
        // This is the absolute skeleton of a Sencha Touch file.
        // When the DOM is ready for you to play with, this function will be called.
        // All your Sencha Touch code should go in here.
    }
});

Ext.setup({

onReady: function() {

// This is the absolute skeleton of a Sencha Touch file.

// When the DOM is ready for you to play with, this function will be called.

// All your Sencha Touch code should go in here.

}

});

Adding tab bar button in Sencha

Monday, August 8th, 2011 at 8:52 am

Leave your comment

The following script adds tab bar buttons:

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;Hello World&lt;/title&gt;

&lt;script src="lib/touch/sencha-touch.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /&gt;
&lt;script type="text/javascript"&gt;

var bar = new Ext.TabBar({
dock : 'top',
ui   : 'dark',
items: [
{
text: 'Button1'
},
{
text: 'Button2'
}
]
});

new Ext.Application({
launch: function() {
new Ext.Panel({

dockedItems: [bar],
fullscreen : true,
html       : 'Test Panel'

});
}
});

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>Hello World</title>

var bar = new Ext.TabBar({

dock : 'top',

ui : 'dark',

items: [

{

text: 'Button1'

{

text: 'Button2'

}

]

});

new Ext.Application({

launch: function() {

new Ext.Panel({

dockedItems: [bar],

fullscreen : true,

html : 'Test Panel'

});

}

});

</script>

</head>

</html>

Incoming search terms:

sencha add tabbar to list
sencha touch how to add tab to tabbar

Child selector example in jQuery

Monday, August 1st, 2011 at 8:39 am

Leave your comment

<code>The following script will illustrate the use of child selector using jQuery:
 &lt;html&gt; 
 &lt;head&gt;   
 &lt;script src="http://code.<a href="http://en.wikipedia.org/wiki/JQuery">jquery</a>.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;/head&gt; 
 &lt;body&gt;
&lt;ul class="main"&gt;     
&lt;li&gt;Product1&lt;/li&gt;     
&lt;li&gt;Product2         
&lt;ul&gt; &lt;li&gt;Sub Product 1&lt;/li&gt; 
&lt;li&gt;Sub Product 2&lt;/li&gt; 
&lt;li&gt;Sub Product 3&lt;/li&gt; &lt;/ul&gt;     
&lt;/li&gt;     
&lt;li&gt;Product 3&lt;/li&gt; &lt;/ul&gt; 
&lt;script&gt; 
jQuery("ul.main &gt; li").css("border", "1px solid #999999"); 
&lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt;</code>

<code>The following script will illustrate the use of child selector using jQuery:

<html>

<head>

<body>

<li>Product1</li>

<li>Product2

<ul> <li>Sub Product 1</li>

<li>Sub Product 2</li>

<li>Sub Product 3</li> </ul>

</li>

<li>Product 3</li> </ul>

jQuery("ul.main > li").css("border", "1px solid #999999");

</script>

</body>

</html></code>

jQuery makeArray function usage

Thursday, April 21st, 2011 at 9:59 am

Leave your comment

The following example shows you how to use makeArray function:

&lt;html&gt;
&lt;head&gt;
&lt;script src="http://code.jquery.com/jquery-1.5.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;United States&lt;/div&gt;
&lt;div&gt;Japan&lt;/div&gt;
&lt;div&gt;Germany&lt;/div&gt;
&lt;div&gt;England&lt;/div&gt;
&lt;div&gt;France&lt;/div&gt;
&lt;script&gt;

// Collects contents from div

var elems = document.getElementsByTagName("div");

//Creates myarray
var myarray = jQuery.makeArray(elems);

//reversing array
myarray.reverse();

// Appending the array  to the existing content
$(myarray).appendTo(document.body);
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<div>United States</div>

<div>Japan</div>

<div>Germany</div>

<div>England</div>

<div>France</div>

// Collects contents from div

var elems = document.getElementsByTagName("div");

//Creates myarray

var myarray = jQuery.makeArray(elems);

//reversing array

myarray.reverse();

// Appending the array to the existing content

$(myarray).appendTo(document.body);

</script>

</body>

</html>

Incoming search terms:

2D makeArray jquery
jquery makearray() exemple

Simple image slide down effect using jQuery

Monday, March 28th, 2011 at 8:38 am

Leave your comment

jQuery’s slideDown() function is used to create slide down effect in the following example:

<html>
<head>
<style>
div { background:#ee0000; margin:3px; width:100px;
height:50px; display:none; float:left; }
</style>
<script src=”http://code.jquery.com/jquery-1.5.js”></script>
</head>
<body>
Click here to silde down
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($(“div:first”).is(“:hidden”)) {
$(“div”).slideDown(“slow”);
} else {
$(“div”).hide();
}
});

</script>

</body>
</html>

Incoming search terms:

jquery image slidedown

jQuery inArray() usage

Friday, March 25th, 2011 at 2:41 pm

Leave your comment

jQuery.inArray( value, array )

The jQuery inArray() function searches the given value is there in the array.

Example

&lt;html&gt;

&lt;head&gt;

&lt;body&gt;

&lt;script src="http://code.jquery.com/jquery-1.5.js"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;script type="text/javascript"&gt;

var arr = [ "US", "Japan", "India", "Canada" ];

if ( jQuery.inArray("US", arr) == -1 ){
alert("Record not found!");
}else{
alert("Record found at " + jQuery.inArray("US", arr));
}

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<body>

</head>

var arr = [ "US", "Japan", "India", "Canada" ];

if ( jQuery.inArray("US", arr) == -1 ){

alert("Record not found!");

}else{

alert("Record found at " + jQuery.inArray("US", arr));

}

</script>

</body>

</html>

Attribute Contains Prefix Selector [name|="value"]

Tuesday, January 11th, 2011 at 8:49 am

Leave your comment

jQuery(‘[attribute|="value"]‘)

attribute
An attribute name.
value
An attribute value. Quotes are mandatory.
Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.4.4.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  
  &lt;a href="example.html" hreflang="en"&gt;Some text&lt;/a&gt; 

  &lt;a href="example.html" hreflang="in"&gt;Some other text&lt;/a&gt;
  
&lt;script&gt;$('a[hreflang|="en"]').css('border','3px dotted green');&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="example.html" hreflang="in">Some other text</a>

</body>

</html>

Some text

Some other text

SEO, SEM, Web, eCommerce, iOS and Android

Categories

Archives

Archive for 'Script Src'

Absolute basic skeleton of a Sencha Touch project

Adding tab bar button in Sencha

Incoming search terms:

Child selector example in jQuery

jQuery makeArray function usage

Incoming search terms:

Simple image slide down effect using jQuery

Incoming search terms:

jQuery inArray() usage

jQuery.inArray( value, array )

Attribute Contains Prefix Selector [name|="value"]

Blogroll

Pages