You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 24-04-2014 15:43:51

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

How to embed JQueryUI example in Pages

The following is an example of JQueryUI Tabs.

I would like to embed these tabs in the Metro UI Pages.   I am wondering how I would go about defining the <head></head> section.   Would I need to take .css and .js references and add them to my index.php?   If so, are http:// links allowed?    How do I best embed the code?

This may seem simple but I want to make sure I don't spin cycles doing something obvious.

[== HTML ==]
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Vertical Tabs functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });
  </script>
  <style>
  .ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
  </style>
</head>
<body>
 
<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">
    <h2>Content heading 1</h2>
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <h2>Content heading 2</h2>
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <h2>Content heading 3</h2>
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>
 
 
</body>
</html>

Offline

#2 24-04-2014 17:31:32

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: How to embed JQueryUI example in Pages

Just rename the needed js file to plugin.js and the css one to plugin.css
and put them in a folder plugins/jqueryui/

smile

Offline

#3 24-04-2014 18:50:36

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: How to embed JQueryUI example in Pages

Thomas

Thank you for the response.  However, I am having some difficulty....

I have created the jqueryui plugins (for both js and css).

I have done the following:

1.  Load the jqueryui framework from the plugin.  It does come back successful.   And followed with creating classes for the tabs.

[== JavaScript ==]
jQuery.getScript("/js/jquery-ui-1.10.4.js")
	.done(function() {
		alert('loaded ui interface');
	})
	.fail(function() {
		/* boo, fall back to something else */
});


  $(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });

2. Load the css as follows:

[== CSS ==]
@import url("/css/jquery-ui-1.10.4.css");

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
  
body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}  

I have confirmed that everything loads but I do not get the desired result.  Plugins load but the css is not applied.  That is, there are no tabs.

Offline

#4 24-04-2014 18:57:11

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: How to embed JQueryUI example in Pages

I meant copying the contents of /css/jquery-ui-1.10.4.css to plugins/jqueryui/plugin.css (and the same for the js file) wink
They'll be automaticly integrated in the template.

Offline

#5 24-04-2014 19:10:26

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: How to embed JQueryUI example in Pages

Thomas,

I did that too... but the result was the same.  I will look to see if I did something wrong. smile


OK confirmed.   The result is the same. It does not seem to be applying the CSS because the text shows up in UL rather than tabs.

Here is the page:

[== PHP ==]
<?php
session_start();
$subNav = array();
set_include_path("../");
include("inc/essentials.php");
?>

<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">
    <h2>Content heading 1</h2>
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <h2>Content heading 2</h2>
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <h2>Content heading 3</h2>
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit   </div>
</div>

Last edited by rsalomone (24-04-2014 19:25:58)

Offline

#6 24-04-2014 19:40:39

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: How to embed JQueryUI example in Pages

You are sure this code gets executed (put an alert in the function to test wink )

  $(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });

Offline

#7 24-04-2014 20:01:58

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: How to embed JQueryUI example in Pages

LOL.  I have now confirmed it executed. 

$(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

alert('executed');

  });

It does give me a message.

Offline

#8 24-04-2014 20:22:50

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: How to embed JQueryUI example in Pages

Hmm then I don't see what's wrong. Does the accordion get the extra classes?

Offline

#9 24-04-2014 20:39:08

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: How to embed JQueryUI example in Pages

Thomas,

The sidebar and accordian examples do work.

Offline

#10 24-04-2014 21:04:38

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: How to embed JQueryUI example in Pages

OK.  I did the following...

$(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
alert('executed');
  });

alert($( "#tabs" ).hasClass( "ui-tabs-vertical" ));


The second alert returns false.  It appears the class is not loading. Does the CSS get loaded after the JS plugin?

Offline

#11 24-04-2014 21:08:55

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: How to embed JQueryUI example in Pages

Wow.   Never mind.  Got it working.

The jquery code to add the necessary tab properties was in the wrong place (in the plugin.js).  I moved it to the page and it worked fine.

$(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
alert('executed');
  });

I just realized the problem when I tested if the class was indeed in the document with .hasClass!

Offline

Board footer

Powered by FluxBB