Difference between revisions of "JQuery"

From Blue-IT.org Wiki

(cycle Plugin)
(Accordion Plugin)
Line 24: Line 24:
  
 
== Accordion Plugin ==
 
== Accordion Plugin ==
 
+
<nowiki>
 
  <?php
 
  <?php
 
  drupal_add_library('system', 'ui.accordion');
 
  drupal_add_library('system', 'ui.accordion');
Line 40: Line 40:
 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
  </div>
 
  </div>
   
+
  </nowiki>
+
 
 
== Be aware that the follwoing is no valid code. ==
 
== Be aware that the follwoing is no valid code. ==
 
=== Only Snippets ===
 
=== Only Snippets ===

Revision as of 22:01, 4 March 2011

Drupal

cycle Plugin

 <?php
 
 drupal_add_library('jquery_plugin', 'cycle');
 drupal_add_js('jQuery(document).ready(function() {jQuery("#mySlideshow").cycle({
     fx:  \'scrollDown\',
     speed: 2000,
     timeout: 20000
 });});', 'inline');
 
 <div id="mySlideshow" class="slideshow">
     <img src="1.png" />
     <img src="2.png" />
 </div>
 
 ?>
 

IE 7 / 8 Bugs

cleartype: true,
cleartypeNoBg: true // jQuery cycle bug for IE 7 and 8 - backgrounds added to cycle elements

Accordion Plugin

 <?php
 drupal_add_library('system', 'ui.accordion');
 drupal_add_js('jQuery(document).ready(function(){jQuery("#myCustomDiv").accordion();});', 'inline');
 ?>
 
 <div id="myCustomDiv">
 <h3><a href="#">Section 1</a></h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  
 <h3><a href="#">Section 2</a></h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  
 <h3><a href="#">Section 3</a></h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>
 

Be aware that the follwoing is no valid code.

Only Snippets

(function ($) {

Drupal.behaviors.naturalessenceTheme = {

attach: function(context, settings) {
$('#navigation ul', context).superfish({

animation: { opacity: 'show', height:'show' },
speed: 250,
autoArrows: false,
dropShadows: false /* Needed for IE */

});

}
};

})(jQuery);(function ($) {

Drupal.behaviors.naturalessenceTheme = {

attach: function(context, settings) {
$('#navigation ul', context).superfish({

animation: { opacity: 'show', height:'show' },
speed: 250,
autoArrows: false,
dropShadows: false /* Needed for IE */

});

}
};

})(jQuery);

------------------------------------------------------------------------

$settings['jquery_plugin.cycle'] = array (
    'fx' => 'fade',
    'speed' => '10000'
);
drupal_add_js($settings, 'setting');

-------------------------------------------------------------------

drupal_add_js( array ( 'jquery_plugin.cycle' => array (
   'fx' => 'scrollDown',
   'speed' => 700,
   'timout' => 2000
)), 'setting');

--------------------------------------------------------------------

drupal_add_js( array ( 'jquery_plugin.cycle' =>  array ( 'fx' => 'scrollDown' ) )  , 'setting' );

--------------------------------------------------------------------

function cycle_init () {
   $settings['cycle'] = array (
      'fx' => 'scrollDown',
      'speed' => '700',
      'timeout' => '2000'
   );
   drupal_add_js ( $settings, 'setting' );
}

Drupal.behaviors.cycle = function (context) {
var option = {
   fx: 'Drupal.settings.cycle.fx',
   speed: Drupal.settings.cycle.speed,
   timeout: Drupal.settings.cycle.timeout
};
};

--------------------------------------------------------------------