[jquery UI] how to apply in .php or html?

**hosam** · 01-27-2012, 11:31 AM

well I've little information about how to handle jquery or even js inside my file anyway I have created custom interface using theme then I've choose all related plug-ins and then download them all so I get these folders and files:
folder [css]
folder [development-bundle]
folder [js]
and index.html
so what I wish to know how I could use tabs or apply anything related to this inside my php or html files? for example I wish to use with index.php tabs feature so what I should do as function to call or apply this to <div> that holds contents of page?
if you please give me example or hint then if I get used to work with one of them I could later make one change as I want with this plug-ins and then get used to apply them with practice, I know my question seems need pages of explanation but no just I want one example about any feature then I could after that do some test and try to use all together cause

**jscheuer1** · 01-27-2012, 01:41 PM

All the demos you could possibly want are in the development-bundle folder in a folder called demos.

For example, you say you want tabs. Go to the folder:

development-bundle > demos > tabs

and look at the default.html file there. You will see something like:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, v . . .

And if you load it up in the browser, it will work. All the linked in styles and scripts required are in the head along with the init for tabs. The only thing that's a little tricky are the paths to the linked in files as they point to their locations up the chain of folders, but I think you can figure that part out.

Or, load up the index.html in that folder into the browser and see some of the variations on tabs that are possible. If you find one you like, use its page as a template.

**hosam** · 01-28-2012, 12:55 AM

thank you now I get the idea how to work with the UI:
so I did this take these two files:
jquery-1.7.1.min , jquery-ui-1.8.17.custom.min then I called with <script> inside the document:

HTML Code:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>

then I've applied the css file related with:

HTML Code:

<link type="text/css" href="css/jquery-ui.css" rel="stylesheet">

after that I called it with function:

HTML Code:

<script type="text/javascript">
$(function(){
	// Tabs
				$('#tabs').tabs();
	// Accordion
				$("#accordion").accordion({ header: "h3" });
			});
</script>

but I still have little question sorry for getting ask too much about it, but are they used as objects here or I'm wrong about this point?

**jscheuer1** · 01-28-2012, 01:23 AM

They? Almost everything in javascript is an object. In this:

Code:

<script type="text/javascript">
$(function(){
	// Tabs
				$('#tabs').tabs();
	// Accordion
				$("#accordion").accordion({ header: "h3" });
			});
</script>

$(function(){ is a function object, more specifically shorthand for the jQuery $(document).ready function object which executes once the HTML of the page has been parsed. $('#tabs') is a jQuery collection object consisting of all that the element with the id of 'tabs' can be within the jQuery framework. .tabs(); is a function object, in this case initializing (creating an instance for) the $('#tabs') object of jQuery UI tabs. Similarly with $("#accordion").accordion({ header: "h3" }); except in this case it's the element with the id 'accordion' that's getting initialized to the jQuery UI accordion function object, and:

Code:

{ header: "h3" }

is an object that is being sent as an argument to the jQuery UI accordion function object, presumably telling it that the header tags used in this instance will be H3 tags.

Thread: [jquery UI] how to apply in .php or html?

Thread Tools

Search Thread

[jquery UI] how to apply in .php or html?

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions