Replace xpage tabbed panel with jQuery tabs. So that every time when the tabs are changing the refreshing won't occur. And it is fancy as you like.
Step1:
Paste the following code in the editor side of your xpage to get the tabs:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<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">
tab1 content
</div>
<div id="tabs-2">
tab2 content
</div>
<div id="tabs-3">
tab3 content
</div>
</div>
Step2:
Add the following files in the Resources--->File section of your domino designer
a)jquery-1.8.2.js
b)jquery-ui.js
download the above files from the http://jqueryui.com
Step3:
Add the following files in the Resources--->Style sheet section of your domino designer
a)jquery-ui.css
b)style.css
Step4:
Add the following files to your xpage where the tabs have been set.
add in the resources section of the xpage properties.
There you get your fancy xpage tabs
Step1:
Paste the following code in the editor side of your xpage to get the tabs:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<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">
tab1 content
</div>
<div id="tabs-2">
tab2 content
</div>
<div id="tabs-3">
tab3 content
</div>
</div>
Step2:
Add the following files in the Resources--->File section of your domino designer
a)jquery-1.8.2.js
b)jquery-ui.js
download the above files from the http://jqueryui.com
Step3:
Add the following files in the Resources--->Style sheet section of your domino designer
a)jquery-ui.css
b)style.css
Step4:
Add the following files to your xpage where the tabs have been set.
add in the resources section of the xpage properties.
There you get your fancy xpage tabs
Comments
Post a Comment