JQueryPluginExamples < Sandbox

You are here: DBG/400>Sandbox Web>JQueryPluginExamples (19 Sep 2009, AdminUser) (raw view)EditAttach
---+!! %TOPIC%
%<nop>JQREQUIRE{"debug"}%

Demo of the <nop>FoswikiWidgets implemented by the %SYSTEMWEB%.JQueryPlugin

%TOC%
---++ Buttons
%BUTTON{"%MAKETEXT{"OK"}%" icon="tick" onclick="alert($(this).text());"}%
%BUTTON{"%MAKETEXT{"Cancel"}%" icon="cross" onclick="return false"}%
%BUTTON{"%MAKETEXT{"Info"}%" icon="information" onclick="return false"}%
%BUTTON{"%MAKETEXT{"Add"}%" icon="add" onclick="return false"}%
%BUTTON{"%MAKETEXT{"Delete"}%" icon="delete" onclick="return false"}%
%BUTTON{"%MAKETEXT{"Globe"}%" icon="world_key" onclick="return false"}%
%CLEAR%
%BR%

---++ Shake
%JQREQUIRE{"shake"}%
%BUTTON{"Shake it, baby" icon="bomb" onclick="$('#lorem').shake(3, 10, 180)"}%
%CLEAR%

<div id="lorem" style="width:300px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare fringilla est, eget condimentum quam auctor quis. Curabitur vitae nibh eu nisl scelerisque facilisis. Vestibulum posuere pretium magna, eu pulvinar libero cursus in. Phasellus tortor dui, viverra vitae molestie a, aliquam quis risus. Mauris fringilla mattis ligula, et laoreet dui rhoncus vel. Aliquam bibendum, nisi nec pellentesque convallis, augue elit rutrum sapien, nec molestie augue mauris et tellus. </div>

---++ Toggles
%TOGGLE{
  target="#lorem_area" 
  text="Toggle"
  effect="toggle"
}%

%TOGGLE{
  target="#lorem_area"
  text="Fade"
  effect="fade"
}%

%TOGGLE{
  target="#lorem_area"
  text="Slide" 
  effect="slide"
}%

%TOGGLE{
  target="#lorem_area"
  text="$percntX$percnt Bounce"
  effect="bounce"}%

%TOGGLE{
  target="#lorem_area"
  text="$percntX$percnt Ease"
  effect="ease"
}%

%TOGGLE{
  target="#lorem_area"
  text="$percntX$percnt Elastic"
  effect="elastic"
}%


<div id="lorem_area" style="border:1px solid #ccc;padding:5px;width:250px;display:none">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dui turpis,
convallis eget, lacinia id, vulputate ut, ipsum. Donec sed sem. Ut tempus. Nunc
egestas consectetuer augue. Sed a nibh. Duis rutrum nibh. Sed in orci at arcu
molestie ultrices. Quisque a lectus. In mollis, nulla id rutrum tincidunt,
lacus dui vestibulum sapien, vel tincidunt nulla lectus a elit. Nullam laoreet,
nunc ut varius pulvinar, lacus lectus condimentum orci, nec mattis augue erat
at mauris. Donec sollicitudin, sapien id lobortis vulputate, tellus sem
dignissim felis, in laoreet massa purus in mauris. Suspendisse tempus leo quis
massa. Curabitur tortor eros, dictum sed, tincidunt sit amet, tristique nec,
nisi. Mauris est urna, fermentum vel, luctus sed, luctus eu, elit. In nulla.
</div>

---++ Tooltips
%JQREQUIRE{"tooltip"}%
<div class="jqTooltip">

All elements with a <i title="I've got a title">title attribute</i> in here get a tooltip. Options can be given using metadata inside the class attribute like this:

<verbatim title="Help: How to pass arguments to the jquery.tooltip plugin" class="html {extraClass:'bubble', fade:'true'}">
<span title="Hello World: This is my first tooltip!!!" class="{extraClass:'bubble'}">
  Hover me
</span>
</verbatim>
  
</div>

---++ Treeview
%JQREQUIRE{"treeview"}%
<div class="jqTreeview">
   * list
      * item
      * item
      * item
   * list
      * item
      * item
      * item
   * list
      * item
      * item
      * item
</div>
---
<div class="jqTreeview closed red">
   * list
      * item
      * item
      * item
   * list
      * item
      * item
      * item
   * list
      * item
      * item
      * item
</div>

---++ Tabpane
%TABPANE%
%TAB{"Tab 1"}%
%TABPANE%
%TAB{"Tab 1.1"}%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
tellus id ante pretium aliquam. Etiam interdum, turpis in varius facilisis,
nibh neque tincidunt sapien, et viverra libero justo et leo. Pellentesque et mi
%ENDTAB%
%TAB{"Tab 1.2"}%
tristique ligula suscipit suscipit. Donec et tortor. Integer eros eros, commodo
in, aliquam sit amet, facilisis et, magna. Sed nisl. Pellentesque mattis, quam
ut nonummy rutrum, sem felis ultrices nunc, sed mollis dolor diam et purus.
%ENDTAB%
%TAB{"Tab 1.3"}%
Aenean urna. Morbi eros. Quisque mauris magna, rhoncus vitae, ullamcorper ac,
volutpat quis, nibh. 
%RED%end of tab 1%ENDCOLOR%
%ENDTAB%
%ENDTABPANE% 
%CLEAR%
%ENDTAB%
%TAB{"Tab 2"}%
Donec ultrices mollis velit. Integer sed eros. Nulla venenatis laoreet leo.
Etiam consectetuer, odio sagittis pharetra ornare, est nulla nonummy nisl, quis
ultricies nisl elit quis justo. In dictum interdum est. Duis accumsan, nibh
mollis commodo rhoncus, ante orci dapibus purus, at pharetra est massa et
velit. Fusce ornare nibh ut magna. Nunc sollicitudin, purus et eleifend
consectetuer, lectus justo faucibus arcu, et cursus velit felis eu lorem. Nulla
aliquet, turpis accumsan feugiat congue, mi arcu ultrices ligula, id ultrices
sem elit sed lectus. Curabitur dignissim, dolor non sodales luctus, mi magna
tincidunt tellus, at bibendum mauris magna dapibus metus. Donec et libero at
erat bibendum blandit. Proin enim nunc, rutrum et, congue mattis, ultrices at,
nisl. 
%RED%end of tab 2%ENDCOLOR%
%ENDTAB%
%TAB{"Tab 3"}%
Sed a nisi. Maecenas posuere vehicula orci. Proin purus. Nulla condimentum
laoreet pede. Morbi sodales, nunc a vestibulum dignissim, lectus felis varius
nisl, vitae lacinia sapien dui nec massa. Fusce tempus. Vivamus ac mi. Integer
leo. Proin blandit est et sem. Quisque mi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc imperdiet
viverra purus. Aenean ut turpis ut nibh varius adipiscing. 
%RED%end of tab 3%ENDCOLOR%
%ENDTAB%
%TAB{"Tab 4"}%
Sed non ante non nibh pharetra facilisis. Curabitur ut odio. Suspendisse
potenti. Fusce aliquam. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Etiam lacinia, sapien ut volutpat
lobortis, nisi ante auctor quam, vitae placerat dolor arcu dictum massa. Donec
dolor. Cras eget dolor. Curabitur id nunc non purus tristique iaculis. Vivamus
sit amet sapien.  Intege
%RED%end of tab 4%ENDCOLOR%
%ENDTAB%
%ENDTABPANE%
%CLEAR%
---++ Load tabs asynchronously
%STARTSECTION{"foo"}%
---+++!! Foo
%TABPANE{animate="on"}%
%TAB{"Later"}%
tristique ligula suscipit suscipit. Donec et tortor. Integer eros eros, commodo
in, aliquam sit amet, facilisis et, magna. Sed nisl. Pellentesque mattis, quam
ut nonummy rutrum, sem felis ultrices nunc, sed mollis dolor diam et purus.
%ENDTAB%
%TAB{"Ajax Foo" url="%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?section=foo;skin=text"}%
<span class="jqAjaxLoader">&nbsp;</span>
%ENDTAB%
%TAB{"Ajax Bar" url="%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?section=bar;skin=text"}%
<span class="jqAjaxLoader">&nbsp;</span>
%ENDTAB%
%ENDTABPANE%
%ENDSECTION{"foo"}%

<verbatim style="display:none">
%STARTSECTION{"bar"}%
Aenean urna. Morbi eros. Quisque mauris magna, rhoncus vitae, ullamcorper ac,
volutpat quis, nibh. 
%ENDSECTION{"bar"}%
</verbatim>


---++ Rating
%JQREQUIRE{"rating"}%
<script type="text/javascript">
(function($) {
$(function() {
  $(".rating").rating({
    focus: function(value, link) {
      $("#test-tip").html(link.title || link.value);
    },
    blur: function(value, link) {
      $("#test-tip").html('&nbsp;');
    }
  });
});
})(jQuery);
</script>

<form>
<input type="radio" name="test" value="1" class="rating" title="very low"/>
<input type="radio" name="test" value="2" class="rating" title="low" />
<input type="radio" name="test" value="3" class="rating" title="substandard" />
<input type="radio" name="test" value="4" class="rating" title="standard" />
<input type="radio" name="test" value="5" class="rating" title="superior" />
<input type="radio" name="test" value="6" class="rating" title="I like it" />
<input type="radio" name="test" value="7" class="rating" title="quite good" />
<input type="radio" name="test" value="8" class="rating" title="good" />
<input type="radio" name="test" value="9" class="rating" title="very good" />
<input type="radio" name="test" value="10" class="rating" title="excelent" />
<span id="test-tip" style="margin-left:10px">&nbsp;</span>
</form>

---++ Autocompletion
%JQREQUIRE{"autocomplete"}%

<literal>
<script>
(function($) {
  $(function(){
    $("#example").autocomplete(
      ["admin", 
       "backup",
       "bash",
       "emulation",
       "games",
       "irc",
       "linux",
       "mercurial",
       "patches",
       "perl",
       "php",
       "python",
       "site",
       "surfing",
       "tag",
       "test",
       "foswiki",
       "web",
       "wiki",
       "windows",
       "windsurfing",
       "wine"
      ],
      {multiple: true }
    );
  });
})(jQuery);
</script>
</literal>

*Enter tags:* 
<input class="foswikiInputField" id="example" size='42' />



---++ Client-side form validation
%JQREQUIRE{"validate"}%
%JQREQUIRE{"maskedinput"}%
<script type="text/javascript">
(function($) {
  $(function() {
    $("#validateForm").validate();
  });
})(jQuery);
</script>



<form id="validateForm">
<div class="foswikiFormSteps">
  <div class="foswikiFormStep">
    <h3>First name:</h3>
    <input type="text" size="30" class="required foswikiInputField" name="firstname" />

    <h3>Last name:</h3>
    <input type="text" size="30" class="required foswikiInputField" name="lastname" />

    <h3>Date of birth:</h3>
    <input type="text" size="10" class="date foswikiInputField" mask="99/99/9999" />
  </div>
  <div class="foswikiFormStep foswikiFormButtons foswikiFormLast">
    %BUTTON{"%MAKETEXT{"Submit"}%" type="submit" icon="tick"}%
    %CLEAR%
  </div>
</div>
</form>


---++ Animated slideshows
---+++ Using jquery.cycle
%JQREQUIRE{"cycle"}%
<script type="text/javascript">
(function($) {
  $(function() {
    $(".pics").cycle({fx:'scrollLeft'});
  });
})(jQuery);
</script>
<div class="pics">
<div>
  <img src="%ATTACHURLPATH%/beach1.jpg" />

  St Andrews State Park
</div>
<div>
  <img src="%ATTACHURLPATH%/beach2.jpg" />

  Located in the Florida panhandle
</div>
<div>
  <img src="%ATTACHURLPATH%/beach3.jpg" />
  
  Endless fun.
</div>
</div>
<literal>
<style type="text/css">
.pics  {  
 width:232px;
 height:262px;
 padding:0;  
 margin:0;
 text-align:center;
}
.pics img {  
 padding: 15px;  
 border:  1px solid #ccc;  
 background-color: #eee;  
 width:  200px; 
 height: 200px; 
 top:  0; 
 left: 0 
} 
</style>
</literal>

---+++ Using jquery.innerfade
%JQREQUIRE{"innerfade"}%
<div class="jqInnerfade {timeout:5000, type:'random', containerheight:'220px'}">
<img src="%PUBURLPATH%/%WEB%/JQueryPluginExamples/ggbg.gif" alt="Good Guy bad Guy" />
<img src="%PUBURLPATH%/%WEB%/JQueryPluginExamples/whizzkids.gif" alt="Whizzkids" />
<img src="%PUBURLPATH%/%WEB%/JQueryPluginExamples/km.jpg" alt="Königin Mutter" />
<img src="%PUBURLPATH%/%WEB%/JQueryPluginExamples/rt_arch.jpg" alt="RT Hybride Archivierung" />
<img src="%PUBURLPATH%/%WEB%/JQueryPluginExamples/tuev.jpg" alt="TÜV SÜD Gruppe" />
</div>
---++ Code highlightning
%JQREQUIRE{"chili"}%
<verbatim class="html">
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <font size="24px">Hello World</font>
  </body>
</html>
</verbatim>

---++ Gradients

%JQREQUIRE{"gradient"}%
<div class="jqGradient {from: '00088', to: '0088ff', direction: 'horizontal'}" style="width:300px;padding:10px;border:1px solid #08f;color:white;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare fringilla est, eget condimentum quam auctor quis. Curabitur vitae nibh eu nisl scelerisque facilisis. Vestibulum posuere pretium magna, eu pulvinar libero cursus in. Phasellus tortor dui, viverra vitae molestie a, aliquam quis risus. Mauris fringilla mattis ligula, et laoreet dui rhoncus vel. Aliquam bibendum, nisi nec pellentesque convallis, augue elit rutrum sapien, nec molestie augue mauris et tellus. 
</div>

<div class="jqGradient {from: 'ffcccc', to: 'FFFD00', direction: 'horizontal'}" style="width:300px;padding:10px;border:1px solid #ddd">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare fringilla est, eget condimentum quam auctor quis. Curabitur vitae nibh eu nisl scelerisque facilisis. Vestibulum posuere pretium magna, eu pulvinar libero cursus in. Phasellus tortor dui, viverra vitae molestie a, aliquam quis risus. Mauris fringilla mattis ligula, et laoreet dui rhoncus vel. Aliquam bibendum, nisi nec pellentesque convallis, augue elit rutrum sapien, nec molestie augue mauris et tellus. 
</div>

<div class="jqGradient {from: '000088', to: 'FF0000', direction: 'vertical'}" style="width:300px;padding:10px;border:1px solid #ddd;color:white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare fringilla est, eget condimentum quam auctor quis. Curabitur vitae nibh eu nisl scelerisque facilisis. Vestibulum posuere pretium magna, eu pulvinar libero cursus in. Phasellus tortor dui, viverra vitae molestie a, aliquam quis risus. Mauris fringilla mattis ligula, et laoreet dui rhoncus vel. Aliquam bibendum, nisi nec pellentesque convallis, augue elit rutrum sapien, nec molestie augue mauris et tellus. 
</div>

<div class="jqGradient {from: 'f9f9f9', to: 'dddddd', length:10, position:'bottom'}" style="width:300px;padding:10px 10px 20px 10px;border:1px solid #aaa; background:f9f9f9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare fringilla est, eget condimentum quam auctor quis. Curabitur vitae nibh eu nisl scelerisque facilisis. Vestibulum posuere pretium magna, eu pulvinar libero cursus in. Phasellus tortor dui, viverra vitae molestie a, aliquam quis risus. Mauris fringilla mattis ligula, et laoreet dui rhoncus vel. Aliquam bibendum, nisi nec pellentesque convallis, augue elit rutrum sapien, nec molestie augue mauris et tellus. 
</div>
Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
jpg	beach1.jpg	manage	19.9 K	19 Sep 2009 - 06:04	AdminUser	Saved by install script
bak	beach1.jpg.bak	manage	19.9 K	26 Jan 2009 - 23:27	UnknownUser
jpg	beach2.jpg	manage	21.0 K	19 Sep 2009 - 06:04	AdminUser	Saved by install script
bak	beach2.jpg.bak	manage	21.0 K	26 Jan 2009 - 23:27	UnknownUser
jpg	beach3.jpg	manage	22.1 K	19 Sep 2009 - 06:04	AdminUser	Saved by install script
bak	beach3.jpg.bak	manage	22.1 K	26 Jan 2009 - 23:27	UnknownUser
gif	ggbg.gif	manage	4.4 K	19 Sep 2009 - 06:04	AdminUser	Saved by install script
jpg	km.jpg	manage	13.3 K	19 Sep 2009 - 06:04	AdminUser	Saved by install script
jpg	rt_arch.jpg	manage	39.4 K	19 Sep 2009 - 06:04	AdminUser	Saved by install script
jpg	tuev.jpg	manage	36.6 K	19 Sep 2009 - 06:04	AdminUser	Saved by install script
gif	whizzkids.gif	manage	8.7 K	19 Sep 2009 - 06:04	AdminUser	Saved by install script
Topic revision: r3 - 19 Sep 2009 - 06:04:26 - AdminUser
Sandbox
Send a link to this page
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding DBG/400? Send feedback