Split drag.* and input.* docs
This commit is contained in:
Samuel Georges
parent
85c47bea7a
commit
f34257f598
|
|
@ -0,0 +1,25 @@
|
|||
# Drag.Scroll
|
||||
|
||||
Allows the dragging of things.
|
||||
|
||||
# Example
|
||||
|
||||
<div id="scrollExample">
|
||||
<div class="scroll-stripes-example"></div>
|
||||
</div>
|
||||
Drag the area above left-to-right
|
||||
|
||||
<style>
|
||||
#scrollExample {
|
||||
width: 100%; height: 50px; overflow: hidden;
|
||||
}
|
||||
.scroll-stripes-example {
|
||||
height: 50px; width: 5000px;
|
||||
background-image: linear-gradient(90deg, gray, white, gray);
|
||||
background-size: 500px 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$('#scrollExample').dragScroll();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
# Drag.Sort
|
||||
|
||||
Allows the dragging of things.
|
||||
|
||||
# Example
|
||||
|
||||
<ol id="sortExample">
|
||||
<li>First</li>
|
||||
<li>Second</li>
|
||||
<li>Third</li>
|
||||
</ol>
|
||||
|
||||
<script>
|
||||
$('#sortExample').sortable()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body.dragging, body.dragging * {
|
||||
cursor: move !important
|
||||
}
|
||||
.dragged {
|
||||
position: absolute; opacity: 0.5; z-index: 2000;
|
||||
}
|
||||
#sortExample li.placeholder {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
# Drag.Value
|
||||
|
||||
Allows the dragging of things.
|
||||
|
||||
# Example
|
||||
|
||||
<input placeholder="Drag a button to me" />
|
||||
|
||||
<button
|
||||
data-control="dragvalue"
|
||||
data-text-value="Foo">
|
||||
Drop "Foo"
|
||||
</button>
|
||||
|
||||
<button
|
||||
data-control="dragvalue"
|
||||
data-text-value="Bar">
|
||||
Drop "Bar"
|
||||
</button>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
# Drag
|
||||
|
||||
Allows the dragging of things.
|
||||
|
||||
# Example
|
||||
|
||||
<h4>Example: drag.value</h4>
|
||||
|
||||
<input placeholder="Drag a button to me" />
|
||||
|
||||
<button
|
||||
data-control="dragvalue"
|
||||
data-text-value="Foo">
|
||||
Drop "Foo"
|
||||
</button>
|
||||
|
||||
<button
|
||||
data-control="dragvalue"
|
||||
data-text-value="Bar">
|
||||
Drop "Bar"
|
||||
</button>
|
||||
|
||||
<!-----------------------------------------------------------------><hr />
|
||||
|
||||
<h4>Example: drag.scroll</h4>
|
||||
|
||||
<div id="scrollExample">
|
||||
<div class="scroll-stripes-example"></div>
|
||||
</div>
|
||||
Drag the area above left-to-right
|
||||
|
||||
<style>
|
||||
#scrollExample {
|
||||
width: 100%; height: 50px; overflow: hidden;
|
||||
}
|
||||
.scroll-stripes-example {
|
||||
height: 50px; width: 5000px;
|
||||
background-image: linear-gradient(90deg, gray, white, gray);
|
||||
background-size: 500px 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$('#scrollExample').dragScroll();
|
||||
</script>
|
||||
|
||||
<!-----------------------------------------------------------------><hr />
|
||||
|
||||
<h4>Example: drag.sort</h4>
|
||||
|
||||
<ol id="sortExample">
|
||||
<li>First</li>
|
||||
<li>Second</li>
|
||||
<li>Third</li>
|
||||
</ol>
|
||||
|
||||
<script>
|
||||
$('#sortExample').sortable()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body.dragging, body.dragging * {
|
||||
cursor: move !important
|
||||
}
|
||||
.dragged {
|
||||
position: absolute; opacity: 0.5; z-index: 2000;
|
||||
}
|
||||
#sortExample li.placeholder {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,32 +1,7 @@
|
|||
/*
|
||||
* The trigger API.
|
||||
* The trigger API
|
||||
*
|
||||
* The API allows to change elements' visibility or status (enabled/disabled) basing on
|
||||
* other elements' statuses. Example: enable a button if any checkbox inside another
|
||||
* element is checked.
|
||||
*
|
||||
* Supported data attributes:
|
||||
* - data-trigger-action, values: show, hide, enable, disable, empty
|
||||
* - data-trigger: a CSS selector for elements that trigger the action (checkboxes)
|
||||
* - data-trigger-condition, values:
|
||||
* - checked: determines the condition the elements specified in the data-trigger
|
||||
* should satisfy in order the condition to be considered as "true".
|
||||
* - value[somevalue]: determines if the value of data-trigger equals the specified value (somevalue)
|
||||
* the condition is considered "true".
|
||||
* - data-trigger-closest-parent: optional, specifies a CSS selector for a closest common parent
|
||||
* for the source and destination input elements.
|
||||
*
|
||||
* Example: <input type="button" class="btn disabled"
|
||||
* data-trigger-action="enable"
|
||||
* data-trigger="#cblist input[type=checkbox]"
|
||||
* data-trigger-condition="checked" ... >
|
||||
*
|
||||
* Supported events:
|
||||
* - oc.triggerOn.update - triggers the update. Trigger this event on the element the plugin is bound to to
|
||||
* force it to check the condition and update itself. This is useful when the page content is updated with AJAX.
|
||||
*
|
||||
* JavaScript API:
|
||||
* $('#mybutton').triggerOn({ triggerCondition: 'checked', trigger: '#cblist input[type=checkbox]', triggerAction: 'enable' })
|
||||
* - Documentation: ../docs/input-trigger.md
|
||||
*/
|
||||
+function ($) { "use strict";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue