Revise Script UI docs
This commit is contained in:
Samuel Georges
parent
c17d47bf3e
commit
2b3f17adea
|
|
@ -43,3 +43,13 @@ Allows a user to select from a small set of binary options.
|
|||
|
||||
<input type="hidden" name="balloonValue" value="1" />
|
||||
</div>
|
||||
|
||||
If you don't define `data-control="balloon-selector"` then the control will act as a static list of labels.
|
||||
|
||||
<div class="control-balloon-selector">
|
||||
<ul>
|
||||
<li>Monday</li>
|
||||
<li>Tuesday</li>
|
||||
<li>Happy days!</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
# Drag.Scroll
|
||||
|
||||
Allows the dragging of things.
|
||||
Allows the elements with `overflow: hidden` to be dragged.
|
||||
|
||||
# Example
|
||||
### Example
|
||||
|
||||
Drag the area above left-to-right.
|
||||
|
||||
<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;
|
||||
}
|
||||
#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>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,34 @@
|
|||
# Drag.Sort
|
||||
|
||||
Allows the dragging of things.
|
||||
Allows the dragging and sorting of lists.
|
||||
|
||||
### JavaScript API:
|
||||
### Example
|
||||
|
||||
Sort the buttons
|
||||
|
||||
<ol id="sortExample">
|
||||
<li><a class="btn btn-sm btn-default">First</a></li>
|
||||
<li><a class="btn btn-sm btn-primary">Second</a></li>
|
||||
<li><a class="btn btn-sm btn-success">Third</a></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>
|
||||
|
||||
## JavaScript API:
|
||||
|
||||
The `sortable()` method must be invoked on valid containers, meaning they must match the containerSelector option.
|
||||
|
||||
|
|
@ -80,27 +106,3 @@ Serialize all selected containers. Returns a jQuery object . Use .get() to retri
|
|||
- `nested`: If true, search for nested containers within an item.If you nest containers, either the original selector with which you call the plugin must only match the top containers, or you need to specify a group (see the bootstrap nav example)
|
||||
|
||||
- `vertical`: If true, the items are assumed to be arranged vertically
|
||||
|
||||
# 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>
|
||||
|
|
@ -1,19 +1,52 @@
|
|||
# Drag.Value
|
||||
|
||||
Allows the dragging of things.
|
||||
Allows the dragging of elements that result in a custom value when dropped.
|
||||
|
||||
# Example
|
||||
|
||||
<input placeholder="Drag a button to me" />
|
||||
<p>
|
||||
<input placeholder="Drag a button below to me" class="form-control" />
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="btn btn-default"
|
||||
data-control="dragvalue"
|
||||
data-text-value="Foo">
|
||||
data-text-value="October">
|
||||
Drop "Foo"
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-default"
|
||||
data-control="dragvalue"
|
||||
data-text-value="Bar">
|
||||
data-text-value="CMS">
|
||||
Drop "Bar"
|
||||
</button>
|
||||
|
||||
### Clickable
|
||||
|
||||
You can make elements clickable from another input by defining `data-drag-click="true"`.
|
||||
|
||||
<p>
|
||||
<input placeholder="Click on me first, then click a label below" class="form-control" />
|
||||
</p>
|
||||
|
||||
<div class="control-balloon-selector">
|
||||
<ul>
|
||||
<li
|
||||
data-control="dragvalue"
|
||||
data-text-value="Richie"
|
||||
data-drag-click="true">
|
||||
Monday
|
||||
</li>
|
||||
<li
|
||||
data-control="dragvalue"
|
||||
data-text-value="Potsie"
|
||||
data-drag-click="true">
|
||||
Tuesday
|
||||
</li>
|
||||
<li
|
||||
data-control="dragvalue"
|
||||
data-text-value="The Fonz"
|
||||
data-drag-click="true">
|
||||
Happy days!
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,14 +1,20 @@
|
|||
# Input Hotkey API
|
||||
|
||||
Scripts that manage user input events.
|
||||
Allows keyboard shortcuts (hotkeys) to be bound to an element's click event.
|
||||
|
||||
# Example
|
||||
|
||||
<button data-hotkey="b" onclick="alert('B is for Banana!')">
|
||||
<button
|
||||
class="btn btn-default"
|
||||
data-hotkey="b"
|
||||
onclick="alert('B is for Banana!')">
|
||||
Press "B" on your keyboard
|
||||
</button>
|
||||
|
||||
<button data-hotkey="shift+r" onclick="confirm('Shift gears...?')">
|
||||
<button
|
||||
class="btn btn-default"
|
||||
data-hotkey="shift+r"
|
||||
onclick="confirm('Shift gears...?')">
|
||||
Press "Shift + R" on your keyboard
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
# Input Monitoring
|
||||
|
||||
Scripts that manage user input events.
|
||||
This will monitor the user input for unsaved changes and show a confirmation box if the user attempts to leave the page.
|
||||
|
||||
# Example
|
||||
### Example
|
||||
|
||||
TBA
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,42 @@
|
|||
|
||||
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:
|
||||
## Example
|
||||
|
||||
### Checked condition
|
||||
|
||||
<input type="checkbox" id="triggerChk1" />
|
||||
<button class="btn disabled"
|
||||
data-trigger-action="enable"
|
||||
data-trigger="#triggerChk1"
|
||||
data-trigger-condition="checked">
|
||||
Check the checkbox
|
||||
</button>
|
||||
|
||||
### Value condition
|
||||
|
||||
<p>
|
||||
<input
|
||||
type="text"
|
||||
id="triggerTxt1"
|
||||
value=""
|
||||
placeholder="Enter 'foo' or 'bar' here"
|
||||
class="form-control" />
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="callout callout-success"
|
||||
data-trigger-action="show"
|
||||
data-trigger="#triggerTxt1"
|
||||
data-trigger-condition="value[foo][bar]">
|
||||
|
||||
<div class="content">
|
||||
Passphrase is valid!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
## Supported data attributes:
|
||||
|
||||
- data-trigger-action, values: show, hide, enable, disable, empty
|
||||
- data-trigger: a CSS selector for elements that trigger the action (checkboxes)
|
||||
|
|
@ -38,21 +73,3 @@ Multie value conditions are supported:
|
|||
trigger: '#cblist input[type=checkbox]',
|
||||
triggerAction: 'enable'
|
||||
})
|
||||
|
||||
# Example
|
||||
|
||||
<input type="checkbox" id="triggerChk1" />
|
||||
<button class="btn disabled"
|
||||
data-trigger-action="enable"
|
||||
data-trigger="#triggerChk1"
|
||||
data-trigger-condition="checked">
|
||||
Check the checkbox
|
||||
</button>
|
||||
|
||||
<input type="text" id="triggerTxt1" value="" placeholder="Enter 'foo' or 'bar' here" />
|
||||
<button class="btn disabled"
|
||||
data-trigger-action="enable"
|
||||
data-trigger="#triggerTxt1"
|
||||
data-trigger-condition="value[foo][bar]">
|
||||
Passphrase valid!
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue