PHP Classes

PHP MySQL jQuery Accordion and Tabs: Show MySQL results as jQuery UI tabs or accordion

Recommend this page to a friend!
  Info   View files Example   Screenshots Screenshots   View files View files (30)   DownloadInstall with Composer Download .zip   Reputation   Support forum (3)   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 565 All time: 5,403 This week: 138Up
Version License PHP version Categories
jquery-ui-db 0.1Artistic License5.0HTML, PHP 5, Databases
Description 

Author

This package can show MySQL results as jQuery UI tabs or accordion.

It can query a given MySQL database tab using PDO and generates HTML lists and JavaScript to use jQuery UI plugins to display the results as sections that can be switched to be visible by the user.

The visible sections can be switch using either tabs or accordion jQuery plugins.

Picture of pedram marandi
Name: pedram marandi <contact>
Classes: 2 packages by
Country: Iran Iran
Age: 28
All time rank: 229432 in Iran Iran
Week rank: 524 Up12 in Iran Iran Up

Example

<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI tabs Example Page</title>
    <link href="jquery-ui-1.11.1/jquery-ui.css" rel="stylesheet">
</head>
<body>
<h1> tabs </h1>
<div id="tabs">

    <?php
   
include_once('class.jqueryUI.php');
   
$tab = new tab();
   
$tab->showTab("user", "website");
   
?>

</div>
<h1> accordion </h1>

<div id="accordion">
    <?php
    $tab
= new tab();
   
$tab->accordian("user", "website");
   
?>

    </div>

<script src="jquery-ui-1.11.1/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.1/jquery-ui.js"></script>
<script>
    $( "#tabs" ).tabs();
    $( "#accordion" ).accordion();

</script>
</body>
</html>


Details

jQueryUI-PDO

you can make accordian and tabs with your database


Screenshots  
  • tabandaccordian
  Files folder image Files  
File Role Description
Files folder imagejquery-ui-1.11.1 (9 files, 2 directories)
Plain text file class.database.php Class Class source
Plain text file class.jqueryUI.php Class Class source
Plain text file jquery-ui.css Data Auxiliary data
Plain text file README.md Data Auxiliary data
Plain text file README.txt Data Documentation
Plain text file tabs.php Example Example script

  Files folder image Files  /  jquery-ui-1.11.1  
File Role Description
Files folder imageexternal (1 directory)
Files folder imageimages (14 files)
  HTML file index.html Data Documentation
  Plain text file jquery-ui.css Data Auxiliary data
  Plain text file jquery-ui.js Data Auxiliary data
  Plain text file jquery-ui.min.css Data Auxiliary data
  Plain text file jquery-ui.min.js Data Auxiliary data
  Plain text file jquery-ui.structure.css Data Auxiliary data
  Plain text file jquery-ui.structure.min.css Data Auxiliary data
  Plain text file jquery-ui.theme.css Data Auxiliary data
  Plain text file jquery-ui.theme.min.css Data Auxiliary data

  Files folder image Files  /  jquery-ui-1.11.1  /  external  
File Role Description
Files folder imagejquery (1 file)

  Files folder image Files  /  jquery-ui-1.11.1  /  external  /  jquery  
File Role Description
  Plain text file jquery.js Data Auxiliary data

  Files folder image Files  /  jquery-ui-1.11.1  /  images  
File Role Description
  Image file ui-bg_diagonals-th...18_b81900_40x40.png Icon Icon image
  Image file ui-bg_diagonals-th...20_666666_40x40.png Icon Icon image
  Image file ui-bg_flat_10_000000_40x100.png Icon Icon image
  Image file ui-bg_glass_100_f6f6f6_1x400.png Icon Icon image
  Image file ui-bg_glass_100_fdf5ce_1x400.png Icon Icon image
  Image file ui-bg_glass_65_ffffff_1x400.png Icon Icon image
  Image file ui-bg_gloss-wave_35_f6a828_500x100.png Icon Icon image
  Image file ui-bg_highlight-so...00_eeeeee_1x100.png Icon Icon image
  Image file ui-bg_highlight-soft_75_ffe45c_1x100.png Icon Icon image
  Image file ui-icons_222222_256x240.png Icon Icon image
  Image file ui-icons_228ef1_256x240.png Icon Icon image
  Image file ui-icons_ef8c08_256x240.png Icon Icon image
  Image file ui-icons_ffd27a_256x240.png Icon Icon image
  Image file ui-icons_ffffff_256x240.png Icon Icon image

 Version Control Unique User Downloads Download Rankings  
 96%
Total:565
This week:0
All time:5,403
This week:138Up
User Comments (2)
this is really usefull ! good job
9 years ago (amir reza Tahani)
70%StarStarStarStar
This is a good and useful class ;-) nice job ;-)
9 years ago (Josť Filipe Lopes Santos)
70%StarStarStarStar