All posts tagged CSS

At first we have to copy all the JavaScript file inside D:\xampp\htdocs\cakephp\app\webroot\js
Here we use jquery and jquery UI javascript file and css file.
We now copy all the css file inside D:\xampp\htdocs\cakephp\app\webroot\css
Leter we will load this css and java script file.

Now Create a controller articles_controller.php inside D:\xampp\htdocs\cakephp\app\controllers
And write bellow code

<?php
class ArticlesController extends AppController {
	
var $uses=null;
var $name = 'Articles';
var $helpers = array('Html','Form','Javascript'); 


 function index() {
		   
          $this->set('page_heading', 'Jquery Tab');       

       }
}
?>

To load JavaScript helper we write this code

var $helpers = array('Html','Form','Javascript'); 

Create a folder articles (D:\xampp\htdocs\cakephp\app\views\articles) and inside it create a file index.ctp write this bellow code inside index.ctp

<?php
$javascript->link('jquery-1.4.2.min.js', false);
$javascript->link('ui/jquery.ui.core.js', false);
$javascript->link('ui/jquery.ui.widget.js', false);
$javascript->link('ui/jquery.ui.tabs.js', false);

?>
<link rel="stylesheet" href="<?php echo $this->webroot . 'css/'; ?>/jquery-ui.css" type="text/css" media="screen" />

 <script type="text/javascript">
           $(function() {
               $("#tabs").tabs();
           });
	</script>

<div id="tabs" class="ui-tabs-nav">


	<ul>
		<li><a href="#tabs-1">tabs-1</a></li>
		<li><a href="#tabs-2">tabs-2</a></li>
		<li><a href="#tabs-3">tabs-3</a></li>
	</ul>
	<div id="tabs-1">

        <p>Tab 1. This is demo text. This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.</p>
	</div>
	<div id="tabs-2">
        <p>Tab 2. This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.</p>
	</div>
	<div id="tabs-3">

        <p>Tab 3.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.This is demo text.</p>
	</div>
</div>

we write bellow code to load the css from webroot/css. May be there is other technique to load css but this is easy to load css in cake php.

<link rel="stylesheet" href="<?php echo $this->webroot . 'css/'; ?>/jquery-ui.css" type="text/css" media="screen" />

[smProductImageAdd src="http://learneveryday.net/codecanyon/adverticement/add_codecnayon_smart-social-share-php.png" alt= "Smart Social Share" href="http://codecanyon.net/item/php-smart-social-share/202558" title="Smart Social Share (Php Plugin)" description="Smart Social share is a php plugin . Which helps you to give user to share your content with social book mark site. There are 4 plugin in this package." ref="marifdu"]

Now the you run http://localhost:85/cakephp/articles you will see the bellow out put.

You can download the code use in this tutorial.