examples/webkit/webkit-guide/_index.html

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6 <!-- examples.qdoc -->
   7   <title>CSS: SAMPLE PAGES</title>
   8   <link rel="stylesheet" type="text/css" href="style/style.css" />
   9   <script src="scripts/jquery.js" type="text/javascript"></script>
  10   <script src="scripts/functions.js" type="text/javascript"></script>
  11   <script src="./scripts/superfish.js" type="text/javascript"></script>
  12   <link rel="stylesheet" type="text/css" href="style/superfish.css" />  <script src="./scripts/narrow.js" type="text/javascript"></script>
  13   <link rel="stylesheet" type="text/css" href="style/narrow.css" />
  14 </head>
  15 <body class="" onload="CheckEmptyAndLoadList();">
  16
  17  <style>
  18 div.header, div.toolbar, div.feedback, div#feedbackBox, div.footer, div.sidebar { display: none; background: pink }
  19 div.toc {
  20     background: #dddddd;
  21     border: thin solid #777777;
  22     padding: 1em;
  23     border-radius: 1em;
  24     margin: 1em
  25 }
  26 div.toc li:before { color: lightcoral; text-transform: uppercase; }
  27 h3 { border-top: thick pink solid }
  28 h4 { border-top: medium gold solid }
  29 h5 { border-top: medium lightgreen solid }
  30 h3,h4,h5 { padding-top: 1em }
  31 li.level1 { margin-left: 0 }
  32 li.level2 { margin-left: 2em }
  33 li.level3 { margin-left: 4em }
  34 li.level4 { margin-left: 6em }
  35 li.level5 { margin-left: 8em }
  36 table { border: solid #777777 thin }
  37 tr:nth-of-type(even) { background: beige }
  38 tr:nth-of-type(odd) { background: lightblue }
  39 th {
  40     background: #777777;
  41     color: #ffffff;
  42 }
  43
  44 img[src^='images/cnd_'] { float: right; margin: 1em ; padding: 1em; border-radius: 1em; border: thin #777777 solid; }
  45 tt, pre { background: #dddddd; border: thin #dddddd solid; }
  46 a[href^='http://waplabdc.nokia-boston.com'] { color: black; }
  47 a[href^='http://waplabdc.nokia-boston.com']:before { content: url(http://waplabdc.nokia-boston.com/browser/users/sierra/x/img/html.jpg); }
  48  </style>
  49  <div class="header" id="qtdocheader">
  50     <div class="content">
  51     <div id="nav-logo">
  52       <a href="index.html">Home</a></div>
  53     <a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
  54     <div id="narrowsearch"></div>
  55     <div id="nav-topright">
  56       <ul>
  57         <li class="nav-topright-home"><a href="http://qt.nokia.com/">Qt HOME</a></li>
  58         <li class="nav-topright-dev"><a href="http://developer.qt.nokia.com/">DEV</a></li>
  59         <li class="nav-topright-labs"><a href="http://labs.qt.nokia.com/blogs/">LABS</a></li>
  60         <li class="nav-topright-doc nav-topright-doc-active"><a href="http://doc.qt.nokia.com/">
  61           DOC</a></li>
  62         <li class="nav-topright-blog"><a href="http://blog.qt.nokia.com/">BLOG</a></li>
  63       </ul>
  64     </div>
  65     <div id="shortCut">
  66       <ul>
  67         <li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.7</a></span></li>
  68         <li class="shortCut-topleft-active"><a href="http://doc.qt.nokia.com">ALL VERSIONS        </a></li>
  69       </ul>
  70      </div>
  71  <ul class="sf-menu" id="narrowmenu">
  72                          <li><a href="#">API Lookup</a>
  73                                  <ul>
  74                                          <li><a href="classes.html">Class index</a></li>
  75            <li><a href="functions.html">Function index</a></li>
  76            <li><a href="modules.html">Modules</a></li>
  77            <li><a href="namespaces.html">Namespaces</a></li>
  78            <li><a href="qtglobal.html">Global Declarations</a></li>
  79            <li><a href="qdeclarativeelements.html">QML elements</a></li>
  80                      </ul>
  81                          </li>
  82                          <li><a href="#">Qt Topics</a>
  83                                  <ul>
  84                                             <li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
  85                                             <li><a href="qtquick.html">Device UIs &amp; Qt Quick</a></li>
  86                                             <li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
  87                                             <li><a href="developing-with-qt.html">Cross-platform and Platform-specific</a></li>
  88                                             <li><a href="platform-specific.html">Platform-specific info</a></li>
  89                                             <li><a href="technology-apis.html">Qt and Key Technologies</a></li>
  90                                             <li><a href="best-practices.html">How-To's and Best Practices</a></li>
  91                       </ul>
  92                                  </li>
  93                                  <li><a href="#">Examples</a>
  94                                          <ul>
  95                                <li><a href="all-examples.html">Examples</a></li>
  96                                <li><a href="tutorials.html">Tutorials</a></li>
  97                                <li><a href="qdeclarativeexamples.html">QML Examples</a></li>
  98                         </ul>
  99                                          </li>
 100                                  </ul>
 101     </div>
 102   </div>
 103   <div class="wrapper">
 104     <div class="hd">
 105       <span></span>
 106     </div>
 107     <div class="bd group">
 108       <div class="sidebar">
 109         <div class="searchlabel">
 110           Search index:</div>
 111         <div class="search" id="sidebarsearch">
 112           <form id="qtdocsearch" action="" onsubmit="return false;">
 113             <fieldset>
 114               <input type="text" name="searchstring" id="pageType" value="" />
 115  <div id="resultdialog">
 116  <a href="#" id="resultclose">Close</a>
 117  <p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
 118  <p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span>&nbsp;results:</p>
 119  <ul id="resultlist" class="all">
 120  </ul>
 121  </div>
 122             </fieldset>
 123           </form>
 124         </div>
 125         <div class="box first bottombar" id="lookup">
 126           <h2 title="API Lookup"><span></span>
 127             API Lookup</h2>
 128           <div  id="list001" class="list">
 129           <ul id="ul001" >
 130               <li class="defaultLink"><a href="classes.html">Class index</a></li>
 131               <li class="defaultLink"><a href="functions.html">Function index</a></li>
 132               <li class="defaultLink"><a href="modules.html">Modules</a></li>
 133               <li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
 134               <li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
 135               <li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
 136             </ul>
 137           </div>
 138         </div>
 139         <div class="box bottombar" id="topics">
 140           <h2 title="Qt Topics"><span></span>
 141             Qt Topics</h2>
 142           <div id="list002" class="list">
 143             <ul id="ul002" >
 144                            <li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
 145                            <li class="defaultLink"><a href="qtquick.html">Device UIs &amp; Qt Quick</a></li>
 146                            <li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
 147                            <li class="defaultLink"><a href="developing-with-qt.html">Cross-platform and Platform-specific</a></li>
 148                            <li class="defaultLink"><a href="platform-specific.html">Platform-specific info</a></li>
 149                            <li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
 150                            <li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
 151             </ul>
 152           </div>
 153         </div>
 154         <div class="box" id="examples">
 155           <h2 title="Examples"><span></span>
 156             Examples</h2>
 157           <div id="list003" class="list">
 158         <ul id="ul003">
 159               <li class="defaultLink"><a href="all-examples.html">Examples</a></li>
 160               <li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
 161               <li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
 162             </ul>
 163           </div>
 164         </div>
 165       </div>
 166       <div class="wrap">
 167         <div class="toolbar">
 168           <div class="breadcrumb toolblock">
 169             <ul>
 170               <li class="first"><a href="index.html">Home</a></li>
 171               <!--  Bread crumbs goes here -->
 172               <li>CSS: SAMPLE PAGES</li>            </ul>
 173           </div>
 174           <div class="toolbuttons toolblock">
 175             <ul>
 176               <li id="smallA" class="t_button">A</li>
 177               <li id="medA" class="t_button active">A</li>
 178               <li id="bigA" class="t_button">A</li>
 179               <li id="print" class="t_button"><a href="javascript:this.print();">
 180                 <span>Print</span></a></li>
 181             </ul>
 182         </div>
 183         </div>
 184         <div class="content mainContent">
 185 <div class="toc">
 186 <h3><a name="toc">Contents</a></h3>
 187 <ul>
 188 <li class="level1"><a href="#css-sample-pages">CSS: SAMPLE PAGES</a></li>
 189 <li class="level2"><a href="#media-queries">Media Queries</a></li>
 190 <li class="level2"><a href="#selectors">Selectors</a></li>
 191 <li class="level2"><a href="#visual-effects">Visual Effects</a></li>
 192 <li class="level2"><a href="#dynamic-css">Dynamic CSS</a></li>
 193 <li class="level1"><a href="#storage">Storage</a></li>
 194 </ul>
 195 </div>
 196 <h1 class="title">CSS: SAMPLE PAGES</h1>
 197 <span class="subtitle"></span>
 198 <!-- $$$examples-description -->
 199 <div class="descr"> <a name="details"></a>
 200 <a name="css-sample-pages"></a>
 201 <h2>CSS: SAMPLE PAGES</h2>
 202 <a name="media-queries"></a>
 203 <h3>1. Media Queries</h3>
 204 <ol type="1">
 205 <li><a target="test" href="mob_mediaquery.htm">MEDIA-QUERY, BASIC</a>: produces message indicating browser class (desktop/touch/low-end mobile)</li>
 206 <li><a target="test" href="mob_layout.htm">MEDIA-QUERY, LAYOUT</a>: same, but produces various skeletal layouts using media query criteria; large 3-column layout must appear only on desktop browser</li>
 207 <li><a target="test" href="mob_condjs.htm">MEDIA-QUERY, STYLEMEDIA</a>: Same as #1, but JS produces corresponding message via StyleMedia API</li>
 208 </ol>
 209 <a name="selectors"></a>
 210 <h3>2. Selectors</h3>
 211 <ol type="1">
 212 <li><a target="test" href="layout_link-fmt.htm">SELECTOR, ATTRIBUTE PREFIX/SUFFIX</a>: links appear w/different icons based on URL prefix/suffix; linebreaks should not appear within inline links</li>
 213 <li><a target="test" href="form_tapper.htm">SELECTOR, FORMS, TAP</a>: radio/checkbox inputs can be tapped (only 1 at a time within 'radio' set; any number within 'checkbox' set)</li>
 214 <li><a target="test" href="form_toggler.htm">SELECTOR, FORMS, TOGGLE</a>: radio/checkbox inputs can be toggled (only 1 at a time within 'radio' inputs; any number within 'checkbox' inputs); 2 "binary" examples at bottom use custom text</li>
 215 <li><a target="test" href="layout_tbl-keyhole.htm">SELECTOR, NAVIGATIONAL, TABLE</a>: pressing &quot;view listings&quot; displays stacked table rows, one at a time</li>
 216 <li><a target="test" href="css3_sel-nth.htm">SELECTOR, POSITIONAL</a>: displays 4x6 icon grid, implemted via nth-of-type()</li>
 217 </ol>
 218 <a name="visual-effects"></a>
 219 <h3>3. Visual Effects</h3>
 220 <ol type="1">
 221 <li><a target="test" href="css3_backgrounds.htm">CSS, BACKGROUNDS</a>: selected accordion tabs display both gradient background and icon; unselected only displays icon; uses scaleY transition</li>
 222 <li><a target="test" href="css3_border-img.htm">CSS, BORDER IMAGE</a>: border image surrounds box</li>
 223 <li><a target="test" href="css3_shadow.htm">CSS, BOX-SHADOW, PLAIN</a>: nav element has shadow; icons appear smaller while pressed</li>
 224 <li><a target="test" href="css3_gradientBack.htm">CSS, GRADIENT, BACKGROUND</a>: background fades vertically from light to dark</li>
 225 <li><a target="test" href="css3_gradientBackStop.htm">CSS, GRADIENT, BACKGROUND, COLOR-STOP</a>: as you scroll down page, background fades vertically from dark to light and back to dark again</li>
 226 <li><a target="test" href="css3_gradientButton.htm">CSS, GRADIENT, BUTTON</a>: buttons appear with vertical shading, appearing w/inverted gradient when pressed</li>
 227 <li><a target="test" href="css3_grad-radial.htm">CSS, GRADIENT, RADIAL</a>: touching within box produces colorful *splat* effect for duration of touch</li>
 228 <li><a target="test" href="css3_mask-grad.htm">CSS, MASK, GRADIENT</a>: images appear w/gradient; touching them removes gradient</li>
 229 <li><a target="test" href="css3_mask-img.htm">CSS, MASK, IMAGE</a>: image fills screen but fades to black around the edges</li>
 230 <li><a target="test" href="css3_reflect.htm">CSS, REFLECTION</a>: heading and image both appear w/mirror reflections along bottom</li>
 231 <li><a target="test" href="css3_scroll.htm">CSS, SCROLLBARS</a>: code block scrollable via big buttons</li>
 232 <li><a target="test" href="css3_text-overflow.htm">CSS, TEXT-OVERFLOW</a>: items appear w/ellipses; touching them expands them; pressing (X) collapses them</li>
 233 <li><a target="test" href="css3_text-shadow.htm">CSS, TEXT-SHADOW</a>: heading text appears with shadow</li>
 234 <li><a target="test" href="css3_text-stroke.htm">CSS, TEXT-STROKE</a>: first heading appears w/black outline</li>
 235 </ol>
 236 <a name="dynamic-css"></a>
 237 <h3>4. Dynamic CSS</h3>
 238 <ol type="1">
 239 <li><a target="test" href="anim_demo-rotate.htm">ANIMATION, DEMO, ROTATE</a>: animated demo of rotating boxes</li>
 240 <li><a target="test" href="anim_demo-scale.htm">ANIMATION, DEMO, SCALE</a>: animated demo of shrinking/expanding box</li>
 241 <li><a target="test" href="anim_demo-skew.htm">ANIMATION, DEMO, SKEW</a>: animated demo of box being pushed and piulled around</li>
 242 <li><a target="test" href="anim_pulse.htm">ANIMATION, KEYFRAME, PULSE</a>: pressing icons causes them to pulse indefinitely</li>
 243 <li><a target="test" href="anim_slide1.htm">ANIMATION, KEYFRAME, SLIDING</a>: drill-down menus</li>
 244 <li><a target="test" href="css3_multicol.htm">ANIMATION, KEYFRAME, BANNER</a>: banner scrolls through 5 colorful items</li>
 245 <li><a target="test" href="anim_tabbedSkew.htm">ANIMATION, TRANSFORM, SKEWED TABS</a>: touching parts of cube displays different tabbed text</li>
 246 <li><a target="test" href="anim_accord.htm">ANIMATION, TRANSITION, CHAINED, ACCORDION</a>: tapping icon animates in collapsed accordions; tapping them animates in display of subheads; tapping anywhere else reverses animation sequence, collapsing back to initial icon</li>
 247 <li><a target="test" href="anim_panel.htm">ANIMATION, TRANSITION, MAX-WIDTH, PANEL</a>: pressing icon animates to expand panel of choices; pressing anywhere collapses panel back down to initial icon</li>
 248 <li><a target="test" href="anim_skew.htm">ANIMATION, TRANSITION, SKEW</a>: tapping items causes them to wipe off right edge w/skew effect; remainder re-pack vertically; touching each category icon removes non-matching items and drops down matching ones</li>
 249 <li><a target="test" href="anim_gallery.htm">ANIMATION, TRANSITION, TRANSLATE, GALLERY</a>: tapping images adjacent to main image animates them in; tapping current image flips to display text; w/text displaying, tapping adjacent image animates both effects @ same time</li>
 250 </ol>
 251
 252 <a name="storage"></a>
 253 <h2>5. Storage</h2>
 254
 255 <ol type="1">
 256 <li><a target="test" href="storage.htm">LOCAL/SESSION STORAGE</a>:
 257 When opened for first time, form opens featuring
 258 login/password/credit-card fields. Fill them out. Each input's
 259 background will go pink if input is invalid.  Login & password
 260 validate simply as "required" so any string will do. Credit card
 261 validates as 16-digit numeral.  After filling out, press dismiss box.
 262 Then quit & reopen browser, go back to page, and press (i) info icon
 263 to get back into form. login/password should be same as initially
 264 entered (localStorage), but credit-card data s/b absent
 265 (sessionStorage).
 266
 267 </li>
 268 </ol>
 269
 270 </div>
 271 <!-- @@@examples -->
 272         <div class="feedback t_button">
 273           [+] Documentation Feedback</div>
 274       </div>
 275     </div>
 276     </div>
 277     <div class="ft">
 278       <span></span>
 279     </div>
 280   </div>
 281   <div class="footer">
 282     <p>
 283       <acronym title="Copyright">&copy;</acronym> 2008-2010 Nokia Corporation and/or its
 284       subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation
 285       in Finland and/or other countries worldwide.</p>
 286     <p>
 287       All other trademarks are property of their respective owners. <a title="Privacy Policy"
 288         href="http://qt.nokia.com/about/privacy-policy">Privacy Policy</a></p>
 289     <br />
 290     <p>
 291       Licensees holding valid Qt Commercial licenses may use this document in accordance with the      Qt Commercial License Agreement provided with the Software or, alternatively, in accordance      with the terms contained in a written agreement between you and Nokia.</p>
 292     <p>
 293       Alternatively, this document may be used under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU
 294       Free Documentation License version 1.3</a>
 295       as published by the Free Software Foundation.</p>
 296   </div>
 297   <div id="feedbackBox">
 298       <div id="feedcloseX" class="feedclose t_button">X</div>
 299     <form id="feedform" action="http://doc.qt.nokia.com/docFeedbck/feedback.php" method="get">
 300       <p id="noteHead">Thank you for giving your feedback.</p> <p class="note">Make sure it is related to this specific page. For more general bugs and
 301       requests, please use the <a href="http://bugreports.qt.nokia.com/secure/Dashboard.jspa">Qt Bug Tracker</a>.</p>
 302       <p><textarea id="feedbox" name="feedText" rows="5" cols="40"></textarea></p>
 303       <p><input id="feedsubmit" class="feedclose" type="submit" name="feedback" /></p>
 304     </form>
 305   </div>
 306   <div id="blurpage">
 307   </div>
 308   <script src="scripts/functions.js" type="text/javascript"></script>
 309   <!-- <script type="text/javascript">
 310   var _gaq = _gaq || [];
 311   _gaq.push(['_setAccount', 'UA-4457116-5']);
 312   _gaq.push(['_trackPageview']);
 313   (function() {
 314   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 315   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 316   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 317   })();
 318   </script> -->
 319 </body>
 320 </html>