source: ether_iasi/trunk/web/resources/js/library/jquery-ui-1.9.2.custom/development-bundle/docs/clip-effect.html @ 786

Last change on this file since 786 was 786, checked in by cbipsl, 10 years ago

commit temp
bug libraries
File size: 7.6 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <meta charset="utf-8">
5        <title>jQuery UI clip-effect documentation</title>
6
7        <style>
8        body {
9                font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
10        }
11        .gutter {
12                display: none;
13        }
14        </style>
15</head>
16<body>
17
18<script>{
19                "title":
20                        "Clip Effect",
21                "excerpt":
22                        "\n\t\tThe clip effect will hide or show an element by clipping the element vertically or horizontally.\n\t",
23                "termSlugs": {
24                        "category": [
25                                "effects"
26                        ]
27                }
28        }</script><article id="clip1" class="entry effect"><h2 class="section-title"><span>Clip Effect</span></h2>
29<div class="entry-wrapper">
30<p class="desc"><strong>Description: </strong>
31                The clip effect will hide or show an element by clipping the element vertically or horizontally.
32        </p>
33<ul class="signatures"><li class="signature">
34<h4 class="name">clip</h4>
35<ul><li>
36<div>
37<strong>direction</strong> (default: <code>"up"</code>)</div>
38<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
39</div>
40<div>
41                                <p>The plane in which the clip effect will hide or show its element.</p>
42                                <p><code>vertical</code> clips the top and bottom edges, while <code>horizontal</code> clips the right and left edges.</p>
43                        </div>
44</li></ul>
45</li></ul>
46<section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0">
47<h4><span class="desc">Toggle a div using the clip effect.</span></h4>
48<div class="syntaxhighlighter xml ">
49        <table>
50                <tbody>
51                        <tr>
52                                <td class="gutter">
53                                       
54                                                <div class="line n1">1</div>
55                                       
56                                                <div class="line n2">2</div>
57                                       
58                                                <div class="line n3">3</div>
59                                       
60                                                <div class="line n4">4</div>
61                                       
62                                                <div class="line n5">5</div>
63                                       
64                                                <div class="line n6">6</div>
65                                       
66                                                <div class="line n7">7</div>
67                                       
68                                                <div class="line n8">8</div>
69                                       
70                                                <div class="line n9">9</div>
71                                       
72                                                <div class="line n10">10</div>
73                                       
74                                                <div class="line n11">11</div>
75                                       
76                                                <div class="line n12">12</div>
77                                       
78                                                <div class="line n13">13</div>
79                                       
80                                                <div class="line n14">14</div>
81                                       
82                                                <div class="line n15">15</div>
83                                       
84                                                <div class="line n16">16</div>
85                                       
86                                                <div class="line n17">17</div>
87                                       
88                                                <div class="line n18">18</div>
89                                       
90                                                <div class="line n19">19</div>
91                                       
92                                                <div class="line n20">20</div>
93                                       
94                                                <div class="line n21">21</div>
95                                       
96                                                <div class="line n22">22</div>
97                                       
98                                                <div class="line n23">23</div>
99                                       
100                                                <div class="line n24">24</div>
101                                       
102                                                <div class="line n25">25</div>
103                                       
104                                                <div class="line n26">26</div>
105                                       
106                                                <div class="line n27">27</div>
107                                       
108                                                <div class="line n28">28</div>
109                                       
110                                                <div class="line n29">29</div>
111                                       
112                                </td>
113                                <td class="code">
114                                        <pre><div class="container"><div class="line"><code><span class="doctype">&lt;!doctype html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">title</span>&gt;</span>clip demo<span class="tag">&lt;/<span class="title">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<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.9.2/themes/base/jquery-ui.css"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</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">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.8.3.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.9.2/jquery-ui.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span>Click anywhere to toggle the box.<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"toggle"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</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">"clip"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
115                                </td>
116                        </tr>
117                </tbody>
118        </table>
119</div>
120
121<h4>Demo:</h4>
122<div class="demo code-demo" data-height="200"></div>
123</div></section>
124</div></article>
125
126</body>
127</html>
Note: See TracBrowser for help on using the repository browser.