Taiftech-LLC
/
admin.dukany.io


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<html>
    <head>
        <link rel="stylesheet" href="styles.css"/>

        <title>MixItUp Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <menu>
            <h2>Native Controls</h2>

            <h3>Filters</h3>

            <button type="button" class="control mixitup-control" data-filter="all">All</button>
            <button type="button" class="control mixitup-control" data-filter="none">None</button>
            <button type="button" class="control mixitup-control" data-filter=".cat-1">Category A</button>
            <button type="button" class="control mixitup-control" data-filter=".cat-2">Category B</button>
            <button type="button" class="control mixitup-control" data-filter=".cat-3">Category C</button>
            <button type="button" class="control mixitup-control" data-filter=".cat-x">Category X</button>

            <h3>Filter Toggles</h3>

            <button type="button" class="control mixitup-control" data-toggle=".cat-1">Category A</button>
            <button type="button" class="control mixitup-control" data-toggle=".cat-2">Category B</button>
            <button type="button" class="control mixitup-control" data-toggle=".cat-3">Category C</button>

            <h3>Sorts</h3>

            <button type="button" class="control mixitup-control" data-sort="default:asc">Ascending</button>
            <button type="button" class="control mixitup-control" data-sort="default:desc">Descending</button> |

            <button type="button" class="control mixitup-control" data-sort="order:asc">Custom Ascending</button>
            <button type="button" class="control mixitup-control" data-sort="order:desc">Custom Descending</button> |

            <button type="button" class="control mixitup-control" data-sort="date:asc order:asc">Multi Custom Ascending Ascending</button>
            <button type="button" class="control mixitup-control" data-sort="date:asc order:desc">Multi Custom Ascending Descending</button> |

            <button type="button" class="control mixitup-control" data-sort="random">Random</button>

            <h3>MultiMix</h3>

            <button type="button" class="control mixitup-control" data-filter=".cat-1" data-sort="default:asc">Category A / Ascending</button>
            <button type="button" class="control mixitup-control" data-filter=".cat-3" data-sort="order:desc">Category C / Custom Descending</button>

            <h2>API Methods</h2>

            <div class="control js-append">Append</div>
            <div class="control js-prepend">Prepend</div>
            <div class="control js-insert-at-index">Insert at index (5)</div>
            <div class="control js-remove-via-element">Remove by element reference (0)</div>
            <div class="control js-remove-via-index">Remove by index (3)</div>
            <div class="control js-insert-multiple-via-markup">Insert Multiple via markup</div>
            <div class="control js-insert-multiple-via-elements">Insert Multiple via elements</div><br><br>

            <div class="control js-api-filter">Filter Category B</div>
            <div class="control js-api-filter-compound">Filter Category B + C</div>
            <div class="control js-api-sort">Sort Custom Ascending</div>

            <br><br>

            <div class="control js-api-limit-3">3 per page</div>
            <div class="control js-api-limit-inf">Infinite per page</div>
            <div class="control js-api-limit-10">10 per page</div>
        </menu>

        <section class="sandbox" id="sandbox-1">
            <div class="mix cat-1" data-order="5" data-date="1">A 5</div>
            <div class="mix cat-1" data-order="1" data-date="2">A 1</div>
            <div class="mix cat-2" data-order="4" data-date="3">B 4</div>
            <div class="mix cat-3" data-order="3" data-date="3">C 3</div>
            <div class="mix cat-3" data-order="2" data-date="4">C 2</div>
            <div class="mix cat-3" data-order="6" data-date="6">C 6</div>

            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
        </section>

        <span class="mixitup-page-list"></span>
        <span class="mixitup-page-stats"></span>

        <section class="sandbox" id="sandbox-2">
            <div class="mix" id="12"></div>

            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
        </section>

        <script src="../../dist/mixitup.js"></script>
        <script src="../../../mixitup-pagination/dist/mixitup-pagination.js"></script>
        <script src="../../../mixitup-dragndrop/mixitup-dragndrop.js"></script>
        <script src="main.js"></script>
    </body>
</html>