Difference between revisions of "JQuery"
From Blue-IT.org Wiki
(→Accordion Plugin) |
|||
| (2 intermediate revisions by one other user not shown) | |||
| Line 42: | Line 42: | ||
</nowiki> | </nowiki> | ||
| − | == Be aware that the | + | == Be aware that the following is no valid code. == |
=== Only Snippets === | === Only Snippets === | ||
| Line 121: | Line 121: | ||
-------------------------------------------------------------------- | -------------------------------------------------------------------- | ||
| + | |||
| + | [[Category:Web Development]] | ||
| + | [[Category:Drupal]] | ||
Latest revision as of 20:28, 8 January 2012
Contents
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
};
};
--------------------------------------------------------------------