ref: master
public/javascripts/vendor/jquery-ui-1.10.4/development-bundle/docs/explode-effect.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI explode-effect documentation</title> <style> body { font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif" } .gutter { display: none; } </style> </head> <body> <script>{ "title": "Explode Effect", "excerpt": "\n\t\tThe explode effect hides or shows an element by splitting it into pieces.\n\t", "termSlugs": { "category": [ "effects" ] } }</script><article id="explode1" class="entry effect"><h2 class="section-title"><span>Explode Effect</span></h2> <div class="entry-wrapper"> <p class="desc"><strong>Description: </strong> The explode effect hides or shows an element by splitting it into pieces. </p> <ul class="signatures"><li class="signature"> <h4 class="name">explode</h4> <ul><li> <div> <strong>pieces</strong> (default: <code>9</code>)</div> <div>Type: <a href="http://api.jquery.com/Types/#Integer">Integer</a> </div> <div>The number of pieces to explode, should be a perfect square, any other values are rounded to the nearest square.</div> </li></ul> </li></ul> <section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0"> <h4><span class="desc">Toggle a div using the explode effect.</span></h4> <div class="syntaxhighlighter xml "> <table> <tbody> <tr> <td class="gutter"> <div class="line n1">1</div> <div class="line n2">2</div> <div class="line n3">3</div> <div class="line n4">4</div> <div class="line n5">5</div> <div class="line n6">6</div> <div class="line n7">7</div> <div class="line n8">8</div> <div class="line n9">9</div> <div class="line n10">10</div> <div class="line n11">11</div> <div class="line n12">12</div> <div class="line n13">13</div> <div class="line n14">14</div> <div class="line n15">15</div> <div class="line n16">16</div> <div class="line n17">17</div> <div class="line n18">18</div> <div class="line n19">19</div> <div class="line n20">20</div> <div class="line n21">21</div> <div class="line n22">22</div> <div class="line n23">23</div> <div class="line n24">24</div> <div class="line n25">25</div> <div class="line n26">26</div> <div class="line n27">27</div> <div class="line n28">28</div> <div class="line n29">29</div> </td> <td class="code"> <pre><div class="container"><div class="line"><code><span class="doctype"><!doctype html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">title</span>></span>explode demo<span class="tag"></<span class="title">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="id">#toggle</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ccc</span>;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.10.2.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.10.4/jquery-ui.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">p</span>></span>Click anywhere to toggle the box.<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"toggle"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( document ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"#toggle"</span> ).toggle( <span class="string">"explode"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre> </td> </tr> </tbody> </table> </div> <h4>Demo:</h4> <div class="demo code-demo" data-height="200"></div> </div></section> </div></article> </body> </html> |