Difference between revisions of "JQuery"

From Blue-IT.org Wiki

(Created page with "= Drupal = == cycle Plugin == <?php drupal_add_library('jquery_plugin', 'cycle'); drupal_add_js('jQuery(document).ready(function() {jQuery("#mySlideshow").cycle({ fx: ...")
 
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
= Drupal =
 
= Drupal =
== cycle Plugin ==  
+
== cycle Plugin ==
 +
<nowiki>
 
  <?php
 
  <?php
 
   
 
   
Line 9: Line 10:
 
     timeout: 20000
 
     timeout: 20000
 
  });});', 'inline');
 
  });});', 'inline');
 
+
 
  <div id="mySlideshow" class="slideshow">
 
  <div id="mySlideshow" class="slideshow">
 
     <img src="1.png" />
 
     <img src="1.png" />
Line 16: Line 17:
 
   
 
   
 
  ?>
 
  ?>
 +
</nowiki>
  
 
=== IE 7 / 8 Bugs ===
 
=== IE 7 / 8 Bugs ===
Line 22: Line 24:
  
 
== Accordion Plugin ==
 
== Accordion Plugin ==
 
+
<nowiki>
 
  <?php
 
  <?php
 
  drupal_add_library('system', 'ui.accordion');
 
  drupal_add_library('system', 'ui.accordion');
Line 38: 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 following is no valid code. ==
 
=== Only Snippets ===
 
=== Only Snippets ===
 
   
 
   
Line 119: Line 121:
 
   
 
   
 
  --------------------------------------------------------------------
 
  --------------------------------------------------------------------
 +
 +
[[Category:Web Development]]
 +
[[Category:Drupal]]

Latest revision as of 20:28, 8 January 2012

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 following 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
};
};

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