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
To load JavaScript helper we write this code
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
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.
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.
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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | <?phpclass ArticlesController extends AppController {var $uses=null;var $name = 'Articles';var $helpers = array('Html','Form','Javascript'); function index() { $this->set('page_heading', 'Jquery Tab'); }}?> |
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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?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> |
1 | <link rel="stylesheet" href="<?php echo $this->webroot . 'css/'; ?>/jquery-ui.css" type="text/css" media="screen" /> |
You can download the code use in this tutorial.
where is the link ???