-
Example #1: Using only Default values
$('#preFeature').siteFeature();
-
Example #2: Progressive Enhancement style (no javascript)
// javascript turned off
-
Example #3: Mix of Vertical and Horizontal Text Boxes (default values)
$('#preFeature').siteFeature();
-
Example #4: Different Animation Options w/ AutoPlay
$('#preFeature').siteFeature({
txtBoxAnimateInType: 'slideDown',
txtBoxAnimateOutType: 'slideDown',
txtBoxAnimateInHorzType: 'fade',
txtBoxAnimateOutHorzType: 'blink',
txtBoxPauseBetweenInOut: 0,
autoPlay: true,
autoPlayInterval: 3000
});
-
Example #5: Moving the Tabs to the Right and styling to match the Default
$('#preFeature').siteFeature({
tabsLocation: 'right',
tabBgImg: 'images/arrow-right.png',
tabBgImgIE6: 'images/arrow-right.gif',
txtBoxAnimateInType: 'slideRight',
txtBoxAnimateOutType: 'slideLeft'
});
-
Example #6: endCreateFunction callback
$('#preFeature').siteFeature({
endCreateFunction: function(options){
$('#' + options.tabIdPrefix + 'Container a h4').prepend('***').append('***').css({'color':'#ff0000'});
},
autoPlay: true,
autoPlayInterval: 3000
});
-
Example #7: Fade-To-Color effect (as requested by users)
$('#preFeature').siteFeature({
imgBgsAnimateInDuration: 1250,
imgBgsAnimateOutDuration: 100,
txtBoxAnimateOutDuration: 0,
txtBoxPauseBetweenInOut: 1000
});
-
Example #8: Change on Hover (as requested by users)
$('#preFeature').siteFeature({
tabControl: 'hover'
});