@@ -9,6 +9,42 @@ if(!javaxt.dhtml) javaxt.dhtml={};
9
9
* can cycle through the panels using the back() and next() functions. The
10
10
* carousel can store a fixed set of panels or you can create the illusion
11
11
* of having infinite panels by updating panels when they are out of view.
12
+ * Example:
13
+ <pre>
14
+ var carousel = new javaxt.dhtml.Carousel(parent,{
15
+ loop: true,
16
+ animate: true
17
+ });
18
+ </pre>
19
+ * Once the carousel is instantiated you can call any of the public methods.
20
+ * The first thing to do is to add panels. Example:
21
+ <pre>
22
+ var p1 = document.createElement('div');
23
+ p1.style.background = "#f0f8ff";
24
+ p1.style.height = "100%";
25
+ carousel.add(p1);
26
+
27
+ var p2 = document.createElement('div');
28
+ p2.style.background = "#96a5b2";
29
+ p2.style.height = "100%";
30
+ carousel.add(p2);
31
+
32
+ var p3 = document.createElement('div');
33
+ p3.style.background = "#ffd8d6";
34
+ p3.style.height = "100%";
35
+ carousel.add(p3);
36
+ </pre>
37
+ * After panels have been added to the carousel, you can call the back() and
38
+ * next() methods to switch panels. Typically these methods are called from
39
+ * "onclick" events fired from other DOM elements (e.g. button).
40
+ *
41
+ * Finally, you can also add event listeners by overriding any of the public
42
+ * "on" or "before" methods like this:
43
+ <pre>
44
+ carousel.onChange = function(currPanel, prevPanel){
45
+ console.log("currPanel", currPanel);
46
+ };
47
+ </pre>
12
48
*
13
49
******************************************************************************/
14
50
@@ -140,7 +176,7 @@ javaxt.dhtml.Carousel = function(parent, config) {
140
176
height : "100%" ,
141
177
position : "relative"
142
178
} ) ;
143
- outerDiv . setAttribute ( "desc" , me . className ) ;
179
+ outerDiv . className = "javaxt-carousel" ;
144
180
me . el = outerDiv ;
145
181
146
182
@@ -337,6 +373,8 @@ javaxt.dhtml.Carousel = function(parent, config) {
337
373
//**************************************************************************
338
374
//** resize
339
375
//**************************************************************************
376
+ /** Used to force the component to resize to fit the parent container
377
+ */
340
378
this . resize = function ( ) {
341
379
var w = outerDiv . offsetWidth ;
342
380
if ( w === 0 || isNaN ( w ) ) {
@@ -528,7 +566,7 @@ javaxt.dhtml.Carousel = function(parent, config) {
528
566
nextDiv = nextPanel . childNodes [ 0 ] . childNodes [ 0 ] ;
529
567
530
568
531
- me . beforeChange ( currDiv , nextDiv ) ;
569
+ me . beforeChange ( currDiv , nextDiv , "next" ) ;
532
570
533
571
var onChange = function ( ) {
534
572
me . onChange ( nextDiv , currDiv ) ;
@@ -574,7 +612,7 @@ javaxt.dhtml.Carousel = function(parent, config) {
574
612
575
613
nextDiv = clone . childNodes [ 0 ] . childNodes [ 0 ] ;
576
614
577
- me . beforeChange ( currDiv , nextDiv ) ;
615
+ me . beforeChange ( currDiv , nextDiv , "next" ) ;
578
616
579
617
var onChange = function ( ) {
580
618
innerDiv . style . left = start + "px" ;
@@ -682,7 +720,7 @@ javaxt.dhtml.Carousel = function(parent, config) {
682
720
683
721
nextDiv = nextPanel . childNodes [ 0 ] . childNodes [ 0 ] ;
684
722
685
- me . beforeChange ( currDiv , nextDiv ) ;
723
+ me . beforeChange ( currDiv , nextDiv , "back" ) ;
686
724
687
725
var onChange = function ( ) {
688
726
me . onChange ( nextDiv , currDiv ) ;
@@ -729,7 +767,7 @@ javaxt.dhtml.Carousel = function(parent, config) {
729
767
730
768
nextDiv = clone . childNodes [ 0 ] . childNodes [ 0 ] ;
731
769
732
- me . beforeChange ( currDiv , nextDiv ) ;
770
+ me . beforeChange ( currDiv , nextDiv , "back" ) ;
733
771
734
772
var onChange = function ( ) {
735
773
me . onChange ( nextDiv , currDiv ) ;
@@ -801,8 +839,9 @@ javaxt.dhtml.Carousel = function(parent, config) {
801
839
/** Called before the carousel switches panels.
802
840
* @param currPanel Content of the active panel
803
841
* @param prevPanel Content of the next active panel
842
+ * @param direction "back" or "next"
804
843
*/
805
- this . beforeChange = function ( currPanel , nextPanel ) { } ;
844
+ this . beforeChange = function ( currPanel , nextPanel , direction ) { } ;
806
845
807
846
808
847
//**************************************************************************
0 commit comments