corrade-http-templates – Blame information for rev 57
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
57 | office | 1 | <!doctype html> |
2 | <html lang="en"> |
||
3 | <head> |
||
4 | <meta charset="utf-8"> |
||
5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
||
6 | <title>jQuery UI Tooltip - Video Player demo</title> |
||
7 | <link rel="stylesheet" href="../../themes/base/all.css"> |
||
8 | <link rel="stylesheet" href="../demos.css"> |
||
9 | <style> |
||
10 | .player { |
||
11 | width: 500px; |
||
12 | height: 300px; |
||
13 | border: 2px groove gray; |
||
14 | background: #ccc; |
||
15 | text-align: center; |
||
16 | line-height: 300px; |
||
17 | } |
||
18 | .ui-tooltip { |
||
19 | border: 1px solid white; |
||
20 | background: #111; |
||
21 | color: white; |
||
22 | } |
||
23 | .ui-menu { |
||
24 | position: absolute; |
||
25 | } |
||
26 | .set { |
||
27 | display: inline-block; |
||
28 | } |
||
29 | .notification { |
||
30 | position: absolute; |
||
31 | display: inline-block; |
||
32 | font-size: 2em; |
||
33 | padding: .5em; |
||
34 | box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); |
||
35 | } |
||
36 | </style> |
||
37 | <script src="../../external/requirejs/require.js"></script> |
||
38 | <script src="../bootstrap.js" data-modules="button controlgroup menu effect effect-blind"> |
||
39 | function notify( input ) { |
||
40 | var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() ); |
||
41 | $( "<div>" ) |
||
42 | .appendTo( document.body ) |
||
43 | .text( msg ) |
||
44 | .addClass( "notification ui-state-default ui-corner-bottom" ) |
||
45 | .position({ |
||
46 | my: "center top", |
||
47 | at: "center top", |
||
48 | of: window |
||
49 | }) |
||
50 | .show({ |
||
51 | effect: "blind" |
||
52 | }) |
||
53 | .delay( 1000 ) |
||
54 | .hide({ |
||
55 | effect: "blind", |
||
56 | duration: "slow" |
||
57 | }, function() { |
||
58 | $( this ).remove(); |
||
59 | }); |
||
60 | } |
||
61 | |||
62 | $( "button" ).each(function() { |
||
63 | var button = $( this ).button({ |
||
64 | icons: { |
||
65 | primary: $( this ).data( "icon" ) |
||
66 | }, |
||
67 | text: !!$( this ).attr( "title" ) |
||
68 | }); |
||
69 | button.not( ".menu" ).on( "click", function() { |
||
70 | notify( button ); |
||
71 | }); |
||
72 | }); |
||
73 | $( ".set" ).controlgroup({ |
||
74 | items: { |
||
75 | "button" : "button" |
||
76 | } |
||
77 | }); |
||
78 | |||
79 | $( "button.menu" ) |
||
80 | .on( "click", function() { |
||
81 | $( document ).tooltip( "close", { currentTarget: this }); |
||
82 | var menu = $( this ).next().show().position({ |
||
83 | my: "left top", |
||
84 | at: "left bottom", |
||
85 | of: this |
||
86 | }); |
||
87 | $( document ).one( "click", function() { |
||
88 | menu.hide(); |
||
89 | }); |
||
90 | return false; |
||
91 | }) |
||
92 | .next() |
||
93 | .hide() |
||
94 | .menu({ |
||
95 | selected: function( event, ui ) { |
||
96 | notify( ui.item ); |
||
97 | } |
||
98 | }); |
||
99 | |||
100 | $( document ).tooltip({ |
||
101 | position: { |
||
102 | my: "center top", |
||
103 | at: "center bottom+5", |
||
104 | }, |
||
105 | show: { |
||
106 | duration: "fast" |
||
107 | }, |
||
108 | hide: { |
||
109 | effect: "hide" |
||
110 | } |
||
111 | }); |
||
112 | </script> |
||
113 | </head> |
||
114 | <body> |
||
115 | |||
116 | <div class="player">Here Be Video (HTML5?)</div> |
||
117 | <div class="tools"> |
||
118 | <span class="set"> |
||
119 | <button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button> |
||
120 | <button data-icon="ui-icon-circle-arrow-s">I dislike this</button> |
||
121 | </span> |
||
122 | <div class="set"> |
||
123 | <button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button> |
||
124 | <button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button> |
||
125 | <ul> |
||
126 | <li><div>Favorites</div></li> |
||
127 | <li><div>Funnees</div></li> |
||
128 | <li></li> |
||
129 | <li><div>New playlist...</div></li> |
||
130 | </ul> |
||
131 | </div> |
||
132 | <button title="Share this video">Share</button> |
||
133 | <button data-icon="ui-icon-alert">Flag as inappropriate</button> |
||
134 | </div> |
||
135 | |||
136 | <div class="demo-description"> |
||
137 | <p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p> |
||
138 | </div> |
||
139 | </body> |
||
140 | </html> |