Source of file tiles.php
Size: 31,957 Bytes - Last Modified: 2021-12-24T07:20:59+00:00
/var/www/docs.ssmods.com/process/src/public/tiles.php
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624 | <?php include("header.php")?> <div class="page secondary"> <div class="page-header"> <div class="page-header-content"> <h1>Tiles<small>demo</small></h1> <a href="/" class="back-button big page-back"></a> </div> </div> <div class="page-region"> <div class="page-region-content"> <div class="grid"> <div class="row"> <div class="span10"> <h2>Windows 8 Start Page Demo</h2> <p> <a href="windows8start.php">Demo page</a> </p> <h2>General info</h2> <p> Tiles are the representation of your app or sub module. The content shown on your tile can, and ideally should, change regularly, especially if your tile can communicate new, real-time information to your user. Tiles can show a combination of text and images, and a badge to show status. Tile is a block object and can be placed in any container. </p> <p>The default tile size is 150x150 pixels. Tile size may be increased with add the next subclasses for tile object: <code>.double(-vertical)</code>, <code>.triple(-vertical)</code>, <code>.quadro(-vertical)</code>.</p> <p>For tile may be set status "selected". You also may be change background color for tile with classes <code>.bg-color-*</code></p> <h3>Tile definition:</h3> <pre class="prettyprint linenums"> <div class="tile"></div> <div class="tile double"></div> <div class="tile selected"></div> <div class="tile bg-color-orange"></div> </pre> <div class="clearfix"> <div class="tile"></div> <div class="tile double"></div> <div class="tile selected"></div> <div class="tile bg-color-orange"></div> </div> <h2>Tile content</h2> <p>Tile content can be placed in sub container with class <code>.tile-content</code>. Class .tile-content has padding 10px from top, bottom and 15px from left, right.</p> <pre class="prettyprint linenums"> <div class="tile"> <div class="tile-content"> <small>...content here...</small> </div> </div> </pre> <div class="clearfix"> <div class="tile double bg-color-green"> <div class="tile-content"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img class="icon" src="images/Mail128.png"/> </div> </div> <div class="tile bg-color-red icon"> <b class="check"></b> <div class="tile-content"> <img src="images/Market128.png"/> </div> <div class="brand"> <span class="name">Store</span> <span class="badge">6</span> </div> </div> <div class="tile double bg-color-blueDark"> <div class="tile-content"> <img src="images/michael.jpg" class="place-right"/> <h4 style="margin-bottom: 5px;">michael_angiulo</h4> <p> I just saw Thor last night. It was awesome! I think you'd love it. <h5>RT @julie_green</h5> </p> </div> <div class="brand"> <span class="name">Tweet@rama</span> </div> </div> </div> <h3>Tiles content built-in subclasses</h3> <p>Tiles content can be organized with built-in subclasses: <code>.icon</code>, <code>.image</code>, <code>.image-set</code>, <code>.image-slider</code>.</p> <div class="grid"> <div class="row"> <div class="span2"> <h5>Subclass .icon</h5> <div class="tile icon"> <div class="tile-content"> <img src="images/armor.png" /> </div> </div> </div> <div class="span4"> <h5>Subclass .image</h5> <div class="tile double image"> <div class="tile-content"> <img src="images/5.jpg" alt="" /> </div> </div> </div> <div class="span4"> <h5>Subclass .image-set</h5> <div class="tile double image-set"> <div class="tile-content"> <img src="images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="images/5.jpg" alt=""> </div> </div> </div> </div> </div> <pre class="prettyprint linenums"> <div class="tile icon(image)"> <div class="tile-content"> <img /> </div> </div> <div class="tile icon"> <div class="tile-content"> <i class="icon-"><i/> </div> </div> ------------ <div class="tile image-set"> <div class="tile-content"> <img /> </div> <div class="tile-content"> <img /> </div> <div class="tile-content"> <img /> </div> <div class="tile-content"> <img /> </div> <div class="tile-content"> <img /> </div> </div> ------------ <div class="tile image-slider" data-role="image-slider"> <div class="tile-content"> <img /> </div> ... <div class="tile-content"> <img /> </div> </div> </pre> <div class="grid"> <div class="clearfix"> <div class="tile icon"> <div class="tile-content"> <img src="images/armor.png" /> </div> <div class="brand bg-color-red"> <p class="text">Subclass .icon</p> </div> </div> <div class="tile double image"> <div class="tile-content"> <img src="images/5.jpg" alt="" /> </div> <div class="brand bg-color-red"> <p class="text">Subclass .image</p> </div> </div> <div class="tile double image-set"> <div class="tile-content"> <img src="images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="images/5.jpg" alt=""> </div> <div class="brand bg-color-red"> <p class="text">Subclass .image-set</p> </div> </div> <div class="tile icon"> <div class="tile-content"> <i class="icon-calculate"></i> </div> <div class="brand bg-color-red"> <p class="text">Tag <i /></p> </div> </div> </div> <h2 id="tile-slider-plugin">Tile Slider Plugin</h2> <p> For use <code>tile-slider</code> you mus include <code>tile-slider.js</code> in head of you page and add attribute <code>data-role="tile-slider"</code> to tile object. To set specific parameters such as <code>direction</code>, <code>duration</code> and <code>period</code> you must add param <code>data-param-direction(duration, period)</code> to tile object. </p> <div class="tile double image-slider" data-role="tile-slider"> <div class="tile-content"> <img src="images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="images/5.jpg" alt=""> </div> </div> <div class="tile double image-slider" data-role="tile-slider" data-param-direction="left" data-param-period="3000"> <div class="tile-content"> <img src="images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="images/5.jpg" alt=""> </div> </div> <div class="tile double image-slider" data-role="tile-slider" data-param-direction="down" data-param-period="3000"> <div class="tile-content"> <img src="images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="images/5.jpg" alt=""> </div> </div> <div class="tile double image-slider" data-role="tile-slider" data-param-direction="right" data-param-period="3000" data-param-duration="3000"> <div class="tile-content"> <img src="images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="images/5.jpg" alt=""> </div> </div> <div class="tile double bg-color-green" data-role="tile-slider" data-param-period="3000"> <div class="tile-content"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="tile-content"> <h2>tina@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img class="icon" src="images/Mail128.png"/> </div> </div> </div> </div> <p> The default value of params: <ul> <li>Duration - 1000ms </li> <li>Period - 2000ms</li> <li>Direction - "up"</li> </ul> </p> <h3>Tile status</h3> <p>Tile status (branding info) can be placed in sub container with class <code>.brand</code> or <code>.tile-status</code>. Tile status background color can be changed, example with built-in classes <code>.bg-color-* </code></p> <pre class="prettyprint linenums"> <div class="tile"> <div class="brand"> <small>...status content here...</small> </div> </div> </pre> <h3>Tile status > badge</h3> <p> A badge can display either a number from 1-99 or a status glyph. badge is positioned in tile status container on the bottom right corner. Metro UI CSS support main Windows 8 badges: <span class="fg-color-blue">activity, alert, available, away, busy, newMessage, paused, playing, unavailable, error and attention</span> as built-in. Default badge background color is blue but may be changed, example with built-in classes <code>.bg-color-*</code>. </p> <pre class="prettyprint linenums"> <div class="tile"> <div class="brand"> <div class="badge activity"></div> </div> </div> </pre> <div class="clearfix"> <div class="tile"> <div class="tile-status"> <div class="badge bg-color-blue">99</div> </div> </div> <div class="tile"> <div class="tile-status"> <div class="badge activity"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge alert"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge available"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge away"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge busy"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge newMessage"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge paused"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge playing"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge unavailable"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge error"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge attention"></div> </div> </div> </div> <h3>Tile status > Branding info</h3> <p> A branding info can display brand name or a brand glyph. Branding info is positioned in tile status container on the bottom left corner. </p> <pre class="prettyprint linenums"> <div class="tile"> <div class="brand"> <div class="name">Name</div> </div> </div> <div class="tile"> <div class="brand"> <div class="icon"> <img /> </div> </div> </div> </pre> <div class="clearfix"> <div class="tile"> <div class="brand"> <div class="badge">10</div> <div class="name">Mail</div> </div> </div> <div class="tile double bg-color-green"> <div class="brand"> <div class="badge">12</div> <img class="icon" src="images/Mail128.png"/> </div> </div> <div class="tile double bg-color-pink"> <div class="brand"> <div class="name">Photos</div> </div> </div> </div> </div> </div> <div class="tiles clearfix"> <h3>Examples of tiles made with Metro UI CSS</h3> <div class="tile image"> <div class="tile-content"> <img src="images/myface.jpg" alt=""> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="images/Mail128.png"/> </div> <div class="brand"> <div class="badge">10</div> <div class="name">Mail</div> </div> </div> <div class="tile bg-color-orangeDark icon selected"> <b class="check"></b> <div class="tile-content"> <img src="images/Video128.png" alt="" /> </div> <div class="brand"> <span class="name">Video</span> </div> </div> <div class="tile double image"> <div class="tile-content"> <img src="images/5.jpg" alt="" /> </div> <div class="brand"> <span class="name">Pictures</span> <div class="badge bg-color-orange">5</div> </div> </div> <div class="tile double-vertical bg-color-yellow icon"> <div class="tile-content"> <img src="images/Calendar128.png" /> </div> <div class="brand"> <span class="name">Calendar</span> </div> </div> <div class="tile bg-color-green icon selected"> <b class="check"></b> <div class="tile-content"> <img src="images/Market128.png"/> </div> <div class="brand"> <span class="name">Store</span> <span class="badge">6</span> </div> </div> <div class="tile bg-color-red icon selected"> <div class="tile-content"> <img src="images/Music128.png" alt="" /> </div> <div class="brand"> <span class="name">Music</span> </div> </div> <div class="tile double bg-color-blueDark"> <div class="tile-content"> <img src="images/michael.jpg" class="place-left"/> <h3 style="margin-bottom: 5px;">michael_angiulo</h3> <p> I just saw Thor last night. It was awesome! I think you'd love it. <h5>RT @julie_green</h5> </p> </div> <div class="brand"> <span class="name">Tweet@rama</span> </div> </div> <div class="tile bg-color-darken icon"> <div class="tile-content"> <img src="images/YouTube128.png" alt="" /> </div> <div class="brand"> <span class="name">YouTube</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="images/excel2013icon.png"/> </div> <div class="brand"> <span class="name">Excel 2013</span> </div> </div> <div class="tile double bg-color-green"> <div class="tile-content"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img class="icon" src="images/Mail128.png"/> </div> </div> <div class="tile double image"> <div class="tile-content"> <img src="images/4.jpg" alt="" /> </div> <div class="brand bg-color-orange"> <img class="icon" src="images/Rss128.png"/> <p class="text">This is a desert eagle. He is very hungry and angry bird.</p> <div class="badge">10</div> </div> </div> <div class="tile double image-set"> <div class="tile-content"> <img src="images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="images/5.jpg" alt=""> </div> <div class="brand"> <span class="name">Photos</span> </div> </div> <div class="tile bg-color-blue icon"> <div class="tile-content"> <img src="images/InternetExplorer128.png"/> </div> <div class="brand"> <span class="name">Internet Explorer</span> </div> </div> </div> <br /> <div class="grid"> <div class="row"> <?php include("adsense.php")?> </div> </div> </div> </div> </div> <?php include("footer.php")?> |