jQuery UI Effects: Highlight : UI Effects « jQuery « JavaScript Tutorial

Home
JavaScript Tutorial
1.Language Basics
2.Operators
3.Statement
4.Development
5.Number Data Type
6.String
7.Function
8.Global
9.Math
10.Form
11.Array
12.Date
13.Dialogs
14.Document
15.Event
16.Location
17.Navigator
18.Screen
19.Window
20.History
21.HTML Tags
22.Style
23.DOM Node
24.Drag Drop
25.Object Oriented
26.Regular Expressions
27.XML
28.GUI Components
29.Dojo toolkit
30.jQuery
31.Animation
32.MS JScript
JavaScript Tutorial » jQuery » UI Effects 




<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c2009 AUTHORS.txt (http://jqueryui.com/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txtlicenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Effects - Show Demo</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/effects.core.js"></script>
  <script type="text/javascript" src="js/ui/effects.blind.js"></script>
  <script type="text/javascript" src="js/ui/effects.bounce.js"></script>
  <script type="text/javascript" src="js/ui/effects.clip.js"></script>
  <script type="text/javascript" src="js/ui/effects.drop.js"></script>
  <script type="text/javascript" src="js/ui/effects.explode.js"></script>
  <script type="text/javascript" src="js/ui/effects.fold.js"></script>
  <script type="text/javascript" src="js/ui/effects.highlight.js"></script>
  <script type="text/javascript" src="js/ui/effects.pulsate.js"></script>
  <script type="text/javascript" src="js/ui/effects.scale.js"></script>
  <script type="text/javascript" src="js/ui/effects.shake.js"></script>
  <script type="text/javascript" src="js/ui/effects.slide.js"></script>
  <script type="text/javascript" src="js/ui/effects.transfer.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    .toggler width: 500px; height: 200px; }
    #button padding: .5em 1em; text-decoration: none; }
    #effect width: 240px; height: 135px; padding: 0.4em; position: relative; }
    #effect h3 margin: 0; padding: 0.4em; text-align: center; }
    .ui-effects-transfer border: 2px dotted gray; 
  </style>
  <script type="text/javascript">
  $(function() {

    //run the currently selected effect
    function runEffect(){
      //get effect type from 
      var selectedEffect = $('#effectTypes').val();
      
      //most effect types need no options passed by default
      var options = {};
      //check if it's scale, transfer, or size - they need options explicitly set
      if(selectedEffect == 'scale'){  options = {percent: 100}}
      else if(selectedEffect == 'transfer'){ options = to: "#button", className: 'ui-effects-transfer' }}
      else if(selectedEffect == 'size'){ options = to: {width: 280,height: 185} }}
      
      //run the effect
      $("#effect").show(selectedEffect,options,500,callback);
    };
    
    //callback function to bring a hidden box back
    function callback(){
      setTimeout(function(){
        $("#effect:visible").removeAttr('style').hide().fadeOut();
      }1000);
    };
    
    //set effect from select menu value
    $("#button").click(function() {
      runEffect();
      return false;
    });
    
    $("#effect").hide();
  });
  </script>
</head>
<body>

<div class="demo">

<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Show</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<select name="effects" id="effectTypes">

  <option value="highlight">Highlight</option>
</select>

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>


</div><!-- End demo -->

<div class="demo-description">

<p>Click the button above to preview the effect.</p>

</div><!-- End demo-description -->

</body>
</html>














30.144.UI Effects
30.144.1.jQuery UI Effects: Blind
30.144.2.jQuery UI Effects: Bounce
30.144.3.jQuery UI Effects: Clip
30.144.4.jQuery UI Effects: Drop
30.144.5.jQuery UI Effects: Explode
30.144.6.jQuery UI Effects: Fold
30.144.7.jQuery UI Effects: Highlight
30.144.8.jQuery UI Effects: Puff
30.144.9.jQuery UI Effects: Pulsate
30.144.10.jQuery UI Effects: Scale
30.144.11.jQuery UI Effects: Shake
30.144.12.jQuery UI Effects: Size
30.144.13.jQuery UI Effects: Slide
30.144.14.jQuery UI Effects: Transfer
30.144.15.jQuery UI Effects - Hide Demo
30.144.16.jQuery UI Effects - switchClass Demo
30.144.17.jQuery UI Effects - Toggle Demo
30.144.18.jQuery UI Effects - removeClass Demo
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.