I using TinyMCE in ASP.NET MVC 3 but I think this is not a problem.
Error:
jquery-1.9.0.min.js:3Uncaught ReferenceError: tinyMCE is not defined
localhost:67678/Scripts/jquery-1.9.0.min.js
<!-- TinyMCE -->
<script type="text/javascript" src="~/Scripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
<!-- /TinyMCE -->
<h3>
Simple theme example</h3>
<p>
This page shows you the simple theme and it's core functionality you can extend
it by changing the code use the advanced theme if you need to configure/add more
buttons etc. There are more examples on how to use TinyMCE in the <a href="http://tinymce.moxiecode.com/examples/">
Wiki</a>.
</p>
<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
<p>
This is some example text that you can edit inside the <strong>TinyMCE editor</strong>.
</p>
<p>
Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros.
</p>
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<script type="text/javascript">
if (document.location.protocol == 'file:') {
alert("The examples might not work properly on the local file system due to security settings in your browser. Please use a real webserver.");
}
</script>
Image:
fixed:
this is working
../../Scripts/tiny_mce/tiny_mce.js
my question is why this does not work? and why VS 2010 doesn`t show error with path?
~/Scripts/tiny_mce/tiny_mce.js
Correct Answer -> ../../Scripts/tiny_mce/tiny_mce.js
Related
I've got a long list of links in an offcanvas div. These are in the form because I want to use them to navigate a very long background page. (Effectively, it is a table of contents)
The offcanvas pops up happily. The navigation links work; jumping the background page to the correct position. Hurrah!
But... when you've selected and link and navigated the background page to a location and then close the offcanvas the background page resets to the top of the page! Argghh...
How can I keep the background page from resetting position, when I close the offcanvas?
Thanks for any help available.
div.head{
font-weight: bold;
margin-top: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="btn-group btn-group-sm" role="group" aria-label="spec_tools">
<a class="btn btn-outline-primary" data-bs-toggle="offcanvas" href="#offcanvasNav" role="button" aria-controls="offcanvasNav">Navigator</a>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavLabel">Navigator</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<strong>
<div>
Item0
</div>
</strong>
<div class="ms-2">
Item 1
</div>
<div class="ms-2">
Item 2
</div>
<div class="ms-2">
Item 3
</div>
<div class="ms-2">
Item 4
</div>
<div class="ms-2">
Item 5
</div>
</div>
</div>
<!-- Page Content -->
<div class="head" id="item0">Item 0</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem, id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis, nec vehicula massa congue in. Sed urna quam, sollicitudin ac felis et, ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>
<div class="head" id="item1">Item 1</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem, id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis, nec vehicula massa congue in. Sed urna quam, sollicitudin ac felis et, ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>
<div class="head" id="item2">Item 2</div>
<div>Phasellus at efficitur orci. In imperdiet ut purus a semper. Mauris cursus ipsum vel finibus efficitur. Sed sit amet sem euismod, volutpat lacus ac, euismod justo. Pellentesque tincidunt justo in quam vulputate tincidunt. Curabitur porttitor felis arcu, et pellentesque odio malesuada quis. Aliquam hendrerit sapien tortor, eu ornare lorem laoreet interdum. Suspendisse velit lectus, sagittis eget ex nec, dictum finibus ex. Proin eget mollis nisl. Suspendisse porttitor placerat gravida. Vestibulum nec tempor eros, a congue ipsum. Ut est libero, viverra semper dapibus et, consectetur non risus. Cras at mauris pulvinar mauris accumsan ullamcorper. Aliquam nec ex libero. Suspendisse rhoncus erat sit amet tellus congue, sit amet sodales leo faucibus. Fusce risus diam, ullamcorper sit amet pulvinar eu, tempor vulputate eros.</div>
<div class="head" id="item3">Item 3</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem, id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis, nec vehicula massa congue in. Sed urna quam, sollicitudin ac felis et, ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>
<div class="head" id="item4">Item 5</div>
<div>Phasellus at efficitur orci. In imperdiet ut purus a semper. Mauris cursus ipsum vel finibus efficitur. Sed sit amet sem euismod, volutpat lacus ac, euismod justo. Pellentesque tincidunt justo in quam vulputate tincidunt. Curabitur porttitor felis arcu, et pellentesque odio malesuada quis. Aliquam hendrerit sapien tortor, eu ornare lorem laoreet interdum. Suspendisse velit lectus, sagittis eget ex nec, dictum finibus ex. Proin eget mollis nisl. Suspendisse porttitor placerat gravida. Vestibulum nec tempor eros, a congue ipsum. Ut est libero, viverra semper dapibus et, consectetur non risus. Cras at mauris pulvinar mauris accumsan ullamcorper. Aliquam nec ex libero. Suspendisse rhoncus erat sit amet tellus congue, sit amet sodales leo faucibus. Fusce risus diam, ullamcorper sit amet pulvinar eu, tempor vulputate eros.</div>
Bootstrap is re-focusing and scrolling to the offcanvas trigger element when the offcanvas is closed. I've opened a bug report on this: https://github.com/twbs/bootstrap/issues/34447, however the behavior may be by-design.
Workaround:
Bootstrap currently checks to see if the trigger element is visible in the viewport when the offcanvas is hidden. Therefore, a workaround is to make the trigger element always visible on the page using fixed positioning...
For example,
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" data-bs-scroll="true" aria-labelledby="offcanvasNavLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavLabel">Navigator</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" tabindex="-1"></button>
</div>
<div class="offcanvas-body">
...TOC nav
</div>
</div>
<div class="container-fluid py-2">
<div class="row">
<div class="col-2">
<!-- fixed position trigger always visible -->
<button class="btn btn-outline-primary position-fixed" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav" role="button" id="btnTrigger" aria-controls="offcanvasNav">Navigator</button>
</div>
<div class="col">
<div class="head" id="item0">Item 0</div>
.. more page content
</div>
</div>
</div>
https://codeply.com/p/gALtKp3xd4
If anyone finds this still, using the "hidden" event of the offcanvas to stop the scroll to top worked for me:
let y = window.scrollY;
let offcanvas = document.getElementById('offcanvas');
offcanvas.addEventListener('hidden.bs.offcanvas', (e) => {
window.scrollTo(0, y);
});
I have sinatra, jquery-ui and haml. I want to replicate http://jqueryui.com/tabs/#default in haml.
this is may Sinatra rb file
require 'sinatra'
get '/' do
haml :index
end
I downloaded jquery-ui-1.11.4.custom.zip and unzipped it into public directory
then I created index.haml file that sits in views directory
%html
%head
%title simple tab page
%script{:type => "text/javascript", :src => "external/jquery/jquery.js"}
%script{:type => "text/javascript", :src => "jquery-ui.min.js"}
%link{:rel => :stylesheet, :type => :"text/css", :href => "jquery-ui.min.css"}
%link{:rel => :stylesheet, :type => :"text/css", :href => "jquery-ui.structure.min.css"}
%link{:rel => :stylesheet, :type => :"text/css", :href => "jquery-ui.theme.min.css"}
:javascript
$(document).ready(function() {
$( "#tabs" ).tabs();
});
%body
%div#tabs
%ul
%li
%a{:href => "#devices-tab"}Devices
%li
%a{:href => "#options-tab"}System Options
%li
%a{:href => "#reports-tab"}Reports
%li
%a{:href => "#notes-tab"}Notes
#devices-tab
Devices Page
#options-tab
Options Page
#reports-tab
Reports Page
#notes-tab
Notes Page
but what I get does not look like UI-lightness theme
Tested with ff & chrome. Both have not error showing on console. All resources (.js and .css) were loaded.
Clicking the text (Notes, Reports ..) would update the text 'below tabs'.
using
haml (4.0.7)
sinatra (1.4.6)
on ruby 2.0.0p481 (2014-05-08) [x64-mingw32]
Could someone tell me how I can make tabs work?
update
Thanks to #Siguza I tried to use https://jqueryui.com/resources/download/jquery-ui-1.11.4.zip and it worked!
Then I downloaded custom build from http://jqueryui.com/download/ where I just simply clicked 'download' button. I did not select nor unchecked anything. The result is like that
Apparently, a custom jquery-ui 1.11.4 zip with all components checked is not the same as the 1.11.4 stable.
I downloaded both, copied the HTML from the tabs demo page and modified the resource URLs to point to the local directory:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="jquery-ui.structure.css">
<link rel="stylesheet" href="jquery-ui.theme.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<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">
<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">
<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>
Then I put the exact same file in jquery-ui-1.11.4 and jquery-ui-1.11.4.custom and opened it in my browser.
jquery-ui-1.11.4:
jquery-ui-1.11.4.custom:
I was wondering why this was happening, so I went to inspect the CSS files, and I found the reason:
Most CSS selectors in the custom build are prefixed with smoothness, as in
smoothness .ui-helper-hidden {
display: none;
}
where the stable build uses
.ui-helper-hidden {
display: none;
}
So I went ahead and put <smoothness></smoothness> around the tabs div in my HTML, and the result looked pretty acceptable
However, I don't really know what to think of this find... I wanted to say "the custom builds aren't broken, you just have to use them differently", but that's not true - they rely on a non-existing (read: invalid) HTML element to work, which I consider "broken".
Conclusion: Unless you're fine with invalid HTML, stay away from custom jqueryUI builds, at least for now.
I am trying to use jQuery tabs with cookies. I got it working but the CSS to style the tabs isn't working and I need some help to get it working. I downloaded jQuery and extratced it into a folder called development-bundle
Here is my link to the css but it's not working.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sticky Tab</title>
<link rel="stylesheet" href="development-bundle/externals/css/jquery-ui/ui-lightness/1.7.2/jquery-ui-lightness.css" media="screen" />
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<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">
<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">
<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>
<script type="text/javascript" src="development-bundle/externals/jquery/core/1.4.1/jquery.js"></script>
<script type="text/javascript" src="development-bundle/externals/jquery/ui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript" src="development-bundle/cookies/jquery.cookies.js"></script>
<script type="text/javascript">
$( function()
{
var cookieName, $tabs, stickyTab;
cookieName = 'stickyTab';
$tabs = $( '#tabs' );
$tabs.tabs( {
select: function( e, ui )
{
$.cookies.set( cookieName, ui.index );
}
} );
stickyTab = $.cookies.get( cookieName );
if( ! isNaN( stickyTab ) )
{
$tabs.tabs( 'select', stickyTab );
}
} );
</script>
</body>
This is what am getting
But this is what am trying to achieve
Any suggestions on what am doing wrong here with my css link ??
You are not adding CSS classes to your markup.
http://jqueryui.com/tabs/
See the source for this example. Make sure your browser isn't reporting any errors.
I'm trying to use the JQuery UI tabs by pointing one of the tabs to another jsp in my app. The link is in 1st tab and the button will show the dialog for the first time it is render. If I click on any other tab and go back to the 1st tab the dialog will not open.
The example is based on JQuery UI tab examples but added a link to the Dialog box
http://jqueryui.com/demos/tabs/#default
Did I construct the tabs incorrectly? Or is there a way to reset the JQuery state back to an initial state like a refresh?
Here's the code for page with all the tabs:
<%#include file="/WEB-INF/jsp/taglibs.jsp"%>
<html>
<title>Recon Blotter Results</title>
<link rel="stylesheet" type="text/css" media="screen"
href="resources/css/jquery-ui-1.8.15/redmond/jquery-ui-1.8.15.custom.css" />
<script type="text/javascript" language="javascript"
src="resources/js/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript"
src="resources/js/jquery/plugins/jquery-ui-1.8.15/jquery-ui-1.8.15.custom.min.js"></script>
<script>
$(document).ready( function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-2">
<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">
<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>
Here's the page that contains the dialog for the 1st tab.
<%#include file="/WEB-INF/jsp/taglibs.jsp"%>
<html>
<title>Recon Blotter Results</title>
<link rel="stylesheet" type="text/css" media="screen"
href="resources/css/jquery-ui-1.8.15/redmond/jquery-ui-1.8.15.custom.css" />
<script type="text/javascript" language="javascript"
src="resources/js/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript"
src="resources/js/jquery/plugins/jquery-ui-1.8.15/jquery-ui-1.8.15.custom.min.js"></script>
<script>
$(document).ready( function() {
$("#testButton").
button().
click(function(){
$("#dialogMsg").dialog("open");
});
$("#dialogMsg").dialog({
title: "Dialog Message",
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="tabs">
<div id="tabs-1">
<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>
<button id="testButton">Hello</button>
<div id="dialogMsg"> Testing Dialog Control </div>
</div>
</div>
</body>
The page loaded via AJAX should only contain the content; i.e. it shouldn't be a full HTML page. Try to cut down your tab1 page to the following:
<script>
$(document).ready(function() {
$("#testButton").
button().
click(function() {
$("#dialogMsg").dialog("open");
});
$("#dialogMsg").dialog({
title: "Dialog Message",
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
});
</script>
<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>
<button id="testButton">Hello</button>
<div id="dialogMsg"> Testing Dialog Control </div>
How do I work with widgets? Here's what I've got so far:
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<div class="ui-widget">
<div class="ui-widget-header">
header
</div>
<div class="ui-widget-content">
content
</div>
</div>
</body>
</html>
I'm trying to make a nice little div with a shaded header.
As easy as 1, 2, 3 and 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Html</title>
<!-- 1. Include the javascript files -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<!-- 2. Include the CSS files (you can change the theme changing /base/ -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
<!-- 3. Add the markup for the widget you want (see below) -->
<!-- 4. Call the jQuery UI javascript function that performs the magic -->
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<!-- 3. Add the markup for the widget you want -->
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<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">
<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">
<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>
All you need added to your current code is the stylesheet to make those lovely classes have some meaning, like this:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css" type="text/css" rel="stylesheet" />
Here's your example with that theme (dot-luv)
For other themes, look at this question, just change the version number in the url from 1.7.0 to current, which is 1.8 as of this answer time. Alternatively, you can design your own theme in ThemeRoller and point to that stylesheet :)
The UI effect are mostly obtained with the use of css files.
You can use javascript to make some effects that play with add and remove class from an element.
JQuery UI is a good example of some effects.