source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/eventscalendar/uicustomization.html @ 638

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

wijmo
File size: 5.9 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head runat="server">
4    <title>Events calendar</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        <!-- *include -->
12    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
13    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
14    <script src="../../external/globalize.min.js" type="text/javascript"></script>
15    <script src="../../external/cultures/globalize.cultures.js" type="text/javascript"></script>
16    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
17    <script src="../../external/jquery.wijmo-open.all.2.2.2.min.js" type="text/javascript"></script>
18    <link href="../../themes/wijmo/jquery.wijmo-open.2.2.2.css" rel="stylesheet" type="text/css" />
19    <script src="../../wijmo/jquery.plugin.wijtextselection.js" type="text/javascript"></script>
20    <script src="../../wijmo/jquery.wijmo.wijinputcore.js" type="text/javascript"></script>
21    <script src="../../wijmo/jquery.wijmo.wijinputdate.js" type="text/javascript"></script>
22    <script src="../explore/js/amplify.core.min.js" type="text/javascript"></script>
23    <script src="../explore/js/amplify.request.min.js" type="text/javascript"></script>
24    <script src="../explore/js/amplify.store.min.js" type="text/javascript"></script>
25    <link href="../../themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
26    <link href="../../themes/wijmo/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
27    <script src="../../wijmo/jquery.wijmo.wijdatepager.js" type="text/javascript"></script>
28    <script src="../../wijmo/jquery.wijmo.wijevcal.js" type="text/javascript"></script>
29    <link href="../../themes/wijmo/jquery.wijmo.wijevcal.css" rel="stylesheet" type="text/css" />
30    <link href="../../themes/wijmo/jquery.wijmo.wijdatepager.css" rel="stylesheet" type="text/css" />
31        <!-- * -->
32
33    <script type="text/javascript">
34        $(document).ready(function () {
35                $("#eventscalendar").wijevcal(
36                                                {
37                                                        titleFormat: "Custom title, start date: {0:d}",
38                                                        statusBarVisible: false,
39                                                        rightPaneVisible: false
40                                                }
41                                        );
42        });
43    </script>
44        <style type="text/css">
45        #eventscalendar
46        {
47            width: 750px;
48        }
49    </style>
50</head>
51<body class="demo-single">
52    <div class="container">
53        <div class="header">
54            <h2>
55                UI customization</h2>
56        </div>
57        <div class="main demo">
58            <!-- Begin demo markup -->
59               <div id="eventscalendar"></div>
60            <!-- End demo markup -->
61            <div class="demo-options">
62                <!-- Begin options markup -->
63                                <label>Options</label>
64                                <p>
65                                        <span>
66                                                <input type="checkbox" id="option_headerBarVisible" checked="checked"
67                                                        title="Indicates whether the header bar will be visible." />
68                                                <label for="option_headerBarVisible">Show header bar</label>
69                                        </span>
70                                        <span>
71                                                <input type="checkbox" id="option_navigationBarVisible" checked="checked"
72                                                        title="Indicates whether the title bar will be visible." />
73                                                <label for="option_navigationBarVisible">Show navigation bar</label>
74                                        </span>
75                                        <span>
76                                                <input type="checkbox" id="option_statusBarVisible" 
77                                                        title="Indicates whether the status bar will be visible." />
78                                                <label for="option_statusBarVisible">Show status bar</label>
79                                        </span>
80                                        <span>
81                                                <input type="checkbox" id="option_rightPaneVisible" 
82                                                        title="Indicates whether the right pane will be visible." />
83                                                <label for="option_rightPaneVisible">Show right pane</label>
84                                        </span>         
85                                       
86                                        <script language="javascript" type="text/javascript">
87                                                $(document).ready(function () {
88
89                                                        $("#option_headerBarVisible").change(function () {
90                                                                $("#eventscalendar").wijevcal("option",
91                                                                                "headerBarVisible", $("#option_headerBarVisible")[0].checked);
92                                                        });
93                                                        $("#option_navigationBarVisible").change(function () {
94                                                                $("#eventscalendar").wijevcal("option",
95                                                                                "navigationBarVisible", $("#option_navigationBarVisible")[0].checked);
96                                                        });
97                                                        $("#option_statusBarVisible").change(function () {
98                                                                $("#eventscalendar").wijevcal("option",
99                                                                                "statusBarVisible", $("#option_statusBarVisible")[0].checked);
100                                                        });
101                                                        $("#option_rightPaneVisible").change(function () {
102                                                                $("#eventscalendar").wijevcal("option",
103                                                                                "rightPaneVisible", $("#option_rightPaneVisible")[0].checked);
104                                                        });
105                                                       
106
107                                                       
108                                                });
109                                        </script>
110                                       
111                                </p>
112                <!-- End options markup -->
113            </div>
114        </div>
115        <div class="footer demo-description">
116                        <p>
117                                This sample demonstrates how to customize the events calendar UI.
118                        </p>
119                        <p>&nbsp;</p>
120                        <p>Options used in the sample:</p>
121                        <ul>
122                        <li><strong>titleFormat</strong> - the title text format that will be shown in the header bar</li>
123                        <li><strong>headerBarVisible</strong> - indicates whether the header bar will be visible</li>
124                        <li><strong>navigationBarVisible</strong> - indicates whether the bottom navigation bar will be visible.</li>                   
125                        <li><strong>statusBarVisible</strong> - indicates whether the status bar will be visible</li>                   
126                        <li><strong>rightPaneVisible</strong> - indicates whether the right pane will be visible.
127                        By default the right pane are empty. You can use this pane in order to further customize the UI.</li>                           
128                        </ul>
129
130        </div>
131    </div>
132</body>
133</html>
Note: See TracBrowser for help on using the repository browser.