|
|
@@ -0,0 +1,96 @@
|
|
|
+{% comment %}
|
|
|
+Licensed to Cloudera, Inc. under one
|
|
|
+or more contributor license agreements. See the NOTICE file
|
|
|
+distributed with this work for additional information
|
|
|
+regarding copyright ownership. Cloudera, Inc. licenses this file
|
|
|
+to you under the Apache License, Version 2.0 (the
|
|
|
+"License"); you may not use this file except in compliance
|
|
|
+with the License. You may obtain a copy of the License at
|
|
|
+
|
|
|
+ http://www.apache.org/licenses/LICENSE-2.0
|
|
|
+
|
|
|
+Unless required by applicable law or agreed to in writing, software
|
|
|
+distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
+See the License for the specific language governing permissions and
|
|
|
+limitations under the License.
|
|
|
+{% endcomment %}
|
|
|
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <title>Sortables</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="jframe_padded">
|
|
|
+
|
|
|
+ <p> You can reorder the list below. When you do the sort order will be displayed in the box below </p>
|
|
|
+
|
|
|
+ <p>You should be able to reorder the list by dragging. The new order displays below the list when you release an item. If you scroll the list down a bit it should still let you sort correctly. Dragging an element that contains a radio that is selected to a new location should keep the radio selected when it's dropped. If you drag an element to the top or bottom of the list, it should scroll.</p>
|
|
|
+
|
|
|
+ <div id="wrapper" styles="width: 300px; padding: 4px; border: 1px solid #999;">
|
|
|
+ <ul id="SortableExample" style="height: 150px; overflow: auto; padding: 0; margin: 0;"
|
|
|
+ data-filters="Sortable"
|
|
|
+ data-sort-state=".order"
|
|
|
+ data-sort-property="value"
|
|
|
+ data-sort-property-child="input">
|
|
|
+ <li id="1" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">First <input type="radio" name="foo" value="1" checked="true"/></li>
|
|
|
+ <li id="2" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Second <input type="radio" name="foo" value="2" /></li>
|
|
|
+ <li id="3" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Third <input type="radio" name="foo" value="3"/></li>
|
|
|
+ <li id="4" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Fourth <input type="radio" name="foo" value="4"/></li>
|
|
|
+ <li id="5" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Fifth <input type="radio" name="foo" value="5"/></li>
|
|
|
+ <li id="6" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Sixth <input type="radio" name="foo" value="6"/></li>
|
|
|
+ <li id="7" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Seventh <input type="radio" name="foo" value="7"/></li>
|
|
|
+ <li id="8" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Eigth <input type="radio" name="foo" value="8"/></li>
|
|
|
+ <li id="9" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Nineth <input type="radio" name="foo" value="9"/></li>
|
|
|
+ <li id="10" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Tenth <input type="radio" name="foo" value="10"/></li>
|
|
|
+ </ul>
|
|
|
+ <div class="order" style="clear:both"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <hr/>
|
|
|
+
|
|
|
+ <p>You should be able to reorder the list by dragging. The new order displays below the list. You should be able to move items from one list to another.</p>
|
|
|
+
|
|
|
+ <div data-filters="Sortable" data-sort-lists="ul"
|
|
|
+ data-sort-state=".order2">
|
|
|
+ <ul style="float: left; width: 20%; min-height: 60px; border: 1px solid #999; margin-right: 8px;">
|
|
|
+ <li id="1" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">First</li>
|
|
|
+ <li id="2" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Second</li>
|
|
|
+ <li id="3" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Third</li>
|
|
|
+ </ul>
|
|
|
+ <ul style="float: left; width: 20%; min-height: 60px; border: 1px solid #999; margin-right: 8px;">
|
|
|
+ <li id="4" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Four</li>
|
|
|
+ <li id="5" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Five</li>
|
|
|
+ <li id="6" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Six</li>
|
|
|
+ </ul>
|
|
|
+ <ul style="float: left; width: 20%; min-height: 60px; border: 1px solid #999; margin-right: 8px;">
|
|
|
+ <li id="7" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Seven</li>
|
|
|
+ <li id="8" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Eight</li>
|
|
|
+ <li id="9" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Nine</li>
|
|
|
+ </ul>
|
|
|
+ <div class="order2" style="clear:both"></div>
|
|
|
+ </div>
|
|
|
+ <hr/>
|
|
|
+ <p>Here's a simple sortable list that has the default sortable styles. Use the .ccs-sort_handle for the elements you want to give this style.</p>
|
|
|
+ <div id="wrapper" styles="width: 300px; padding: 4px; border: 1px solid #999;">
|
|
|
+ <ul id="SortableExample" style="height: 150px; overflow: auto; padding: 0; margin: 0;"
|
|
|
+ data-filters="Sortable"
|
|
|
+ data-sort-state=".order"
|
|
|
+ data-sort-property="value"
|
|
|
+ data-sort-property-child="input">
|
|
|
+ <li class="ccs-sort_handle" id="1" style="list-style: none;">First <input type="radio" name="foo" value="1" checked="true"/></li>
|
|
|
+ <li class="ccs-sort_handle" id="2" style="list-style: none;">Second <input type="radio" name="foo" value="2" /></li>
|
|
|
+ <li class="ccs-sort_handle" id="3" style="list-style: none;">Third <input type="radio" name="foo" value="3"/></li>
|
|
|
+ <li class="ccs-sort_handle" id="4" style="list-style: none;">Fourth <input type="radio" name="foo" value="4"/></li>
|
|
|
+ <li class="ccs-sort_handle" id="5" style="list-style: none;">Fifth <input type="radio" name="foo" value="5"/></li>
|
|
|
+ <li class="ccs-sort_handle" id="6" style="list-style: none;">Sixth <input type="radio" name="foo" value="6"/></li>
|
|
|
+ <li class="ccs-sort_handle" id="7" style="list-style: none;">Seventh <input type="radio" name="foo" value="7"/></li>
|
|
|
+ <li class="ccs-sort_handle" id="8" style="list-style: none;">Eigth <input type="radio" name="foo" value="8"/></li>
|
|
|
+ <li class="ccs-sort_handle" id="9" style="list-style: none;">Nineth <input type="radio" name="foo" value="9"/></li>
|
|
|
+ <li class="ccs-sort_handle" id="10" style="list-style: none;">Tenth <input type="radio" name="foo" value="10"/></li>
|
|
|
+ </ul>
|
|
|
+ <div class="order" style="clear:both"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|