Skip to content

K
kpp
Commit 81256dcc authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Дописал Dropdown

parent 11d18c83
Hide whitespace changes
Inline Side-by-side
Showing with 35 additions and 26 deletions
src/blocks/dropdown/dropdown.js
View file @ 81256dcc
...@@ -44,6 +44,9 @@ ...@@ -44,6 +44,9 @@
if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
// Выходим, если клик пришелся на элемент внутри .dropdown__menu
if (e && e.type == 'click' && /dropdown__menu/i.test(e.toElement.offsetParent.className)) return
// $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) // $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
// $parent.trigger(e = $.Event('hide.nth.dropdown', relatedTarget)) // $parent.trigger(e = $.Event('hide.nth.dropdown', relatedTarget))
...@@ -56,6 +59,7 @@ ...@@ -56,6 +59,7 @@
} }
Dropdown.prototype.toggle = function (e) { Dropdown.prototype.toggle = function (e) {
console.log('закрыть');
var $this = $(this) var $this = $(this)
// if ($this.is('.disabled, :disabled')) return // if ($this.is('.disabled, :disabled')) return
......
src/blocks/dropdown/dropdown.less
View file @ 81256dcc
...@@ -40,7 +40,6 @@ ...@@ -40,7 +40,6 @@
z-index: -1; z-index: -1;
background-color: #fff; background-color: #fff;
color: @text-color; color: @text-color;
padding: 1em;
margin: 0; margin: 0;
border: 1px solid @border-color; border: 1px solid @border-color;
border-radius: @border-radius; border-radius: @border-radius;
...@@ -84,6 +83,10 @@ ...@@ -84,6 +83,10 @@
} }
} }
&__menu-inner {
padding: 1em;
}
&__menu-separator { &__menu-separator {
&:not(:last-child) { &:not(:last-child) {
padding-bottom: 0.3em; padding-bottom: 0.3em;
......
src/blocks_library.html
View file @ 81256dcc
...@@ -3266,20 +3266,20 @@ ...@@ -3266,20 +3266,20 @@
</ul> </ul>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="p"> <div class="p">
<span role="presentation" class="dropdown" id="test"> <span role="presentation" class="dropdown">
<a id="test_link" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка с выпадением</a> <a href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка с выпадением</a>
<ul class="dropdown__menu" aria-labelledby="qwer"> <ul class="dropdown__menu">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li> <li><a href="">Пункт списка (выпадает <code>ul</code>)</a></li>
<li class="dropdown__menu-separator"><a href="#">Пункт списка, после которого следует разделитель</a></li> <li class="dropdown__menu-separator"><a href="">Пункт списка, после которого следует разделитель</a></li>
<li><a href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li> <li><a href="">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li>
</ul> </ul>
</span> </span>
<span role="presentation" class="dropdown" id="test_2"> <span role="presentation" class="dropdown">
<button class="dropdown__toggler btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список Выпадает список
</button> </button>
<ul class="dropdown__menu" id="qwer"> <ul class="dropdown__menu">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li> <li><a href="">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li> <li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li> <li><a href="">Второй пункт</a></li>
</ul> </ul>
...@@ -3290,16 +3290,18 @@ ...@@ -3290,16 +3290,18 @@
Выпадает блок Выпадает блок
</button> </button>
<div class="dropdown__menu"> <div class="dropdown__menu">
Выпадает <code>div</code> с произвольным контентом. <a href="">Ссылка какая-то</a>. <div class="dropdown__menu-inner">
<hr> Выпадает <code>div</code> с произвольным контентом. <a href="">Ссылка какая-то</a>.
<form action=""> <hr>
<input type="text"> <form action="">
<select name="" id=""> <input type="text">
<option value="">Название пункта</option> <select name="" id="">
</select> <option value="">Название пункта</option>
<textarea name="" id="" rows="3"></textarea> </select>
<button class="btn">Отправить эту форму</button> <textarea name="" id="" rows="3"></textarea>
</form> <button class="btn">Отправить эту форму</button>
</form>
</div>
</div> </div>
</span> </span>
</div> </div>
...@@ -3309,20 +3311,20 @@ ...@@ -3309,20 +3311,20 @@
<div class="blocks-library__code"> <div class="blocks-library__code">
<pre class="code"> <pre class="code">
<code class="code__syntax html"> <code class="code__syntax html">
<span class="code__line">&lt;span role=&quot;presentation&quot; class=&quot;dropdown&quot; id=&quot;test&quot;&gt;</span> <span class="code__line">&lt;span role=&quot;presentation&quot; class=&quot;dropdown&quot;&gt;</span>
<span class="code__line"> &lt;a href=&quot;#&quot; class=&quot;dropdown__toggler&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;</span> <span class="code__line"> &lt;a href=&quot;#&quot; class=&quot;dropdown__toggler&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;</span>
<span class="code__line"> Ссылка с выпадением</span> <span class="code__line"> Ссылка с выпадением</span>
<span class="code__line"> &lt;/a&gt;</span> <span class="code__line"> &lt;/a&gt;</span>
<span class="code__line"> &lt;ul class=&quot;dropdown__menu&quot; aria-labelledby=&quot;qwer&quot;&gt;</span> <span class="code__line"> &lt;ul class=&quot;dropdown__menu&quot; aria-labelledby=&quot;drop&quot;&gt;</span>
<span class="code__line"> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x41f;&#x443;&#x43d;&#x43a;&#x442; &#x441;&#x43f;&#x438;&#x441;&#x43a;&#x430; (&#x432;&#x44b;&#x43f;&#x430;&#x434;&#x430;&#x435;&#x442; &lt;code&gt;ul&lt;/code&gt;)&lt;/a&gt;&lt;/li&gt;</span> <span class="code__line"> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x41f;&#x443;&#x43d;&#x43a;&#x442; &#x441;&#x43f;&#x438;&#x441;&#x43a;&#x430; (&#x432;&#x44b;&#x43f;&#x430;&#x434;&#x430;&#x435;&#x442; &lt;code&gt;ul&lt;/code&gt;)&lt;/a&gt;&lt;/li&gt;</span>
<span class="code__line"> &lt;/ul&gt;</span> <span class="code__line"> &lt;/ul&gt;</span>
<span class="code__line">&lt;/span&gt;</span> <span class="code__line">&lt;/span&gt;</span>
<span class="code__line"> </span> <span class="code__line"> </span>
<span class="code__line">&lt;span role=&quot;presentation&quot; class=&quot;dropdown&quot; id=&quot;test&quot;&gt;</span> <span class="code__line">&lt;span role=&quot;presentation&quot; class=&quot;dropdown&quot;&gt;</span>
<span class="code__line"> &lt;button class=&quot;dropdown__toggler btn&quot; id=&quot;dLabel&quot; type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;</span> <span class="code__line"> &lt;button class=&quot;dropdown__toggler btn&quot; type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;</span>
<span class="code__line"> Кнопка с выпадением</span> <span class="code__line"> Кнопка с выпадением</span>
<span class="code__line"> &lt;/button&gt;</span> <span class="code__line"> &lt;/button&gt;</span>
<span class="code__line"> &lt;ul class=&quot;dropdown__menu&quot; aria-labelledby=&quot;qwer&quot;&gt;</span> <span class="code__line"> &lt;ul class=&quot;dropdown__menu&quot; aria-labelledby=&quot;drop&quot;&gt;</span>
<span class="code__line"> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x41f;&#x443;&#x43d;&#x43a;&#x442; &#x441;&#x43f;&#x438;&#x441;&#x43a;&#x430; (&#x432;&#x44b;&#x43f;&#x430;&#x434;&#x430;&#x435;&#x442; &lt;code&gt;ul&lt;/code&gt;)&lt;/a&gt;&lt;/li&gt;</span> <span class="code__line"> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x41f;&#x443;&#x43d;&#x43a;&#x442; &#x441;&#x43f;&#x438;&#x441;&#x43a;&#x430; (&#x432;&#x44b;&#x43f;&#x430;&#x434;&#x430;&#x435;&#x442; &lt;code&gt;ul&lt;/code&gt;)&lt;/a&gt;&lt;/li&gt;</span>
<span class="code__line"> &lt;/ul&gt;</span> <span class="code__line"> &lt;/ul&gt;</span>
<span class="code__line">&lt;/span&gt;</span> <span class="code__line">&lt;/span&gt;</span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment