Ghost/docs/toggle.html
2013-05-11 17:44:25 +01:00

32 lines
4.5 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="en"><head><title>toggle</title></head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><meta name="groc-relative-root" content=""><meta name="groc-document-path" content="toggle"><meta name="groc-project-path" content="core/admin/assets/js/toggle.js"><link rel="stylesheet" type="text/css" media="all" href="assets/style.css"><script type="text/javascript" src="assets/behavior.js"></script><body><div id="meta"><div class="file-path">core/admin/assets/js/toggle.js</div></div><div id="document"><div class="segment"><div class="comments"><div class="wrapper"><h1 id="-toggle-support"> Toggle Support</h1></div></div></div><div class="segment"><div class="code"><div class="wrapper"><span class="cm">/**</span>
<span class="cm"> * globals document,</span>
<span class="cm"> * jQuery</span>
<span class="cm"> */</span>
<span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
<span class="s2">&quot;use strict&quot;</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span></div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="toggle-up-in-your-grill">Toggle Up In Your Grill</h2>
<p>Allows for toggling via data-attributes.</p>
<h3 id="usage">Usage</h3>
<pre><code> &lt;nav&gt;
&lt;a href="#" data-toggle=".toggle-me"&gt;Toggle&lt;/a&gt;
&lt;ul class="toggle-me"&gt;
&lt;li&gt;Toggled yo&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
</code></pre></div></div><div class="code"><div class="wrapper"> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;[data-toggle]&#39;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">toggle</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">&#39;toggle&#39;</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">children</span><span class="p">(</span><span class="nx">toggle</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;[data-toggle]&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">&#39;active&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">toggle</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">&#39;toggle&#39;</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">children</span><span class="p">(</span><span class="nx">toggle</span><span class="p">).</span><span class="nx">fadeToggle</span><span class="p">(</span><span class="mi">100</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">&#39;open&#39;</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="p">}(</span><span class="nx">jQuery</span><span class="p">));</span></div></div></div></div></body></html>