source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Open/development-bundle/samples/superpanel/customScroll.html @ 604

Last change on this file since 604 was 604, checked in by vmipsl, 12 years ago

images
File size: 9.5 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>wijsuperpanel - overview</title>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="description" content="%description%" />
8    <meta name="keywords" content="" />
9    <meta name="author" content="ComponentOne" />
10
11    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
12   
13    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
14    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
15    <link href="../../themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
16    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
17    <script src="../../wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
18    <style type="text/css">
19        .elements ul
20        {
21            padding: 8px 0 0 8px;
22            margin: 0px;
23            width: 750px;
24            float: left;
25            position: relative;
26            zoom: 1;
27        }
28       
29        .elements ul li
30        {
31            background: #fff;
32            color: #fff;
33            font-weight: 900;
34            margin: 0 8px 8px 0;
35            padding: 0;
36            position: relative;
37            text-align: center;
38            text-shadow: 1px 1px 2px #000000;
39        }
40       
41        .elements li:nth-child(odd) { height: 50px; }
42        .elements li:nth-child(even) { height: 80px; }
43               
44        .elements li
45        {
46            list-style: none;
47        }
48    </style>
49    <script id="scriptInit" type="text/javascript">
50        $(document).ready(function () {
51            var created = false;
52            var currentIdx = 0;
53            $('#superPanel').wijsuperpanel({
54                hScroller: { scrollBarVisibility: "hidden" },
55                scrolling: function (event, data) {
56                    var top,
57                    idx = data.direction == "top" ? --currentIdx : ++currentIdx,
58                    li = $(this).find("li").eq(idx),
59                    ulTop;
60                    if (li.length) {
61                        ulTop = li.parent("ul").offset().top;
62                        top = li.offset().top - ulTop;
63                        data.customScroll = top;
64                    }
65                }
66            });
67        });
68
69        function changeProperties() {
70            var animationOptions = {
71                queue: $('#chkQueue').val(),
72                easing: $('#selEasing').val()
73            };
74            $('#superPanel').wijsuperpanel({ animationOptions: animationOptions });
75        }
76    </script>
77</head>
78<body class="demo-single">
79    <div class="container">
80        <div class="header">
81            <h2>
82                Overview</h2>
83        </div>
84        <div class="main demo">
85            <!-- Begin demo markup -->
86            <div id="superPanel" style="width: 754px; height: 300px;">
87                <div class="elements">
88                    <ul>
89                        <li style="background: none repeat scroll 0% 0% activeborder;"><span>ActiveBorder</span>
90                        </li>
91                        <li style="background: none repeat scroll 0% 0% activecaption;"><span>ActiveCaption</span>
92                        </li>
93                        <li style="background: none repeat scroll 0% 0% captiontext;"><span>ActiveCaptionText</span>
94                        </li>
95                        <li style="background: none repeat scroll 0% 0% appworkspace;"><span>AppWorkspace</span>
96                        </li>
97                        <li style="background: none repeat scroll 0% 0% buttonface;"><span>Control</span>
98                        </li>
99                        <li style="background: none repeat scroll 0% 0% buttonshadow;"><span>ControlDark</span>
100                        </li>
101                        <li style="background: none repeat scroll 0% 0% threeddarkshadow;"><span>ControlDarkDark</span>
102                        </li>
103                        <li style="background: none repeat scroll 0% 0% buttonface;"><span>ControlLight</span>
104                        </li>
105                        <li style="background: none repeat scroll 0% 0% buttonhighlight;"><span>ControlLightLight</span>
106                        </li>
107                        <li style="background: none repeat scroll 0% 0% buttontext;"><span>ControlText</span>
108                        </li>
109                        <li style="background: none repeat scroll 0% 0% background;"><span>Desktop</span>
110                        </li>
111                        <li style="background: none repeat scroll 0% 0% graytext;"><span>GrayText</span>
112                        </li>
113                        <li style="background: none repeat scroll 0% 0% highlight;"><span>Highlight</span>
114                        </li>
115                        <li style="background: none repeat scroll 0% 0% highlighttext;"><span>HighlightText</span>
116                        </li>
117                        <li style="background: none repeat scroll 0% 0% highlight;"><span>HotTrack</span>
118                        </li>
119                        <li style="background: none repeat scroll 0% 0% inactiveborder;"><span>InactiveBorder</span>
120                        </li>
121                        <li style="background: none repeat scroll 0% 0% inactivecaption;"><span>InactiveCaption</span>
122                        </li>
123                        <li style="background: none repeat scroll 0% 0% inactivecaptiontext;"><span>InactiveCaptionText</span>
124                        </li>
125                        <li style="background: none repeat scroll 0% 0% infobackground;"><span>Info</span>
126                        </li>
127                        <li style="background: none repeat scroll 0% 0% infotext;"><span>InfoText</span>
128                        </li>
129                        <li style="background: none repeat scroll 0% 0% menu;"><span>Menu</span> </li>
130                        <li style="background: none repeat scroll 0% 0% menutext;"><span>MenuText</span>
131                        </li>
132                       
133                    </ul>
134                </div>
135            </div>
136            <!-- End demo markup -->
137            <div class="demo-options">
138                <!-- Begin options markup -->
139                <div>
140                    <label for="chkQueue">
141                        Animation Settings: Queue
142                    </label>
143                    <input id="chkQueue" type="checkbox" />
144                    <label for="selEasing">
145                        Easing
146                    </label>
147                    <select id="selEasing">
148                        <option value="easeInQuad">easeInQuad</option>
149                        <option value="easeOutQuad">easeOutQuad</option>
150                        <option value="easeInOutQuad">easeInOutQuad</option>
151                        <option value="easeInCubic">easeInCubic</option>
152                        <option value="easeOutCubic">easeOutCubic</option>
153                        <option value="easeInOutCubic">easeInOutCubic</option>
154                        <option value="easeInQuart">easeInQuart</option>
155                        <option value="easeOutQuart">easeOutQuart</option>
156                        <option value="easeInOutQuart">easeInOutQuart</option>
157                        <option value="easeInQuint">easeInQuint</option>
158                        <option value="easeOutQuint">easeOutQuint</option>
159                        <option value="easeInOutQuint">easeInOutQuint</option>
160                        <option value="easeInSine">easeInSine</option>
161                        <option value="easeOutSine">easeOutSine</option>
162                        <option value="easeInOutSine">easeInOutSine</option>
163                        <option value="easeInExpo">easeInExpo</option>
164                        <option value="easeOutExpo">easeOutExpo</option>
165                        <option value="easeInOutExpo">easeInOutExpo</option>
166                        <option value="easeInCirc">easeInCirc</option>
167                        <option value="easeOutCirc">easeOutCirc</option>
168                        <option value="easeInOutCirc">easeInOutCirc</option>
169                        <option value="easeInElastic">easeInElastic</option>
170                        <option value="easeOutElastic">easeOutElastic</option>
171                        <option value="easeInOutElastic">easeInOutElastic</option>
172                        <option value="easeInBack">easeInBack</option>
173                        <option value="easeOutBack">easeOutBack</option>
174                        <option value="easeInOutBack">easeInOutBack</option>
175                        <option value="easeInBounce">easeInBounce</option>
176                        <option value="easeOutBounce">easeOutBounce</option>
177                        <option value="easeInOutBounce">easeInOutBounce</option>
178                    </select>
179                    <input type="button" value="Apply" onclick="changeProperties()" />
180                </div>
181                <!-- End options markup -->
182            </div>
183        </div>
184        <div class="footer demo-description">
185            <p>
186                This sample demonstrates the wijsuperpanel widget, which allows you to easily scroll
187                overflowed elements. In this sample, <b>animationOptions</b>
188            are used to set the animation seen as the panel is scrolled.
189        </div>
190    </div>
191</body>
192</html>
Note: See TracBrowser for help on using the repository browser.