JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed">
        <h1>List views</h1>
        <a href="#dynamic-listview" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">To Dynamic Listviews</a>
    </div>
    <div data-role="content">
        <!-- add  data-inset="true" -->
        <ul data-role="listview">
            <li><a href="#">Acer</a></li>
            <li><a href="#">Asus</a></li>
            <li><a href="#">Dell</a></li>
            <li><a href="#">LG</a></li>
            <li><a href="#">Ligitech</a></li>
            <li><a href="#">Panasonic</a></li>
            <li><a href="#">Sony</a></li>
        </ul>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <ul data-role="listview">
            <li>Brands
                <ul>
                    <li><a href="#">Acer</a></li>
                    <li><a href="#">Asus</a></li>
                    <li><a href="#">Dell</a></li>
                    <li><a href="#">LG</a></li>
                    <li><a href="#">Ligitech</a></li>
                    <li><a href="#">Panasonic</a></li>
                    <li><a href="#">Sony</a></li>
                </ul>
            </li>
            <li>Colors
                <ul>
                    <li><a href="#">Red</a></li>
                    <li><a href="#">White</a></li>
                    <li><a href="#">Blue</a></li>
                </ul>
            </li>
        </ul>

    </div>
    <div data-role="footer" data-position="fixed">
        <h1>fotter</h1>
    </div>
</div>

<div data-role="page" data-add-back-btn="true" id="dynamic-listview">
    <div data-role="header">
        <h1>Dynamic Listview</h1>
    </div>
    <div data-role="content">
        <h3...

JavaScript

$('#dynamic-listview').live('pageinit', function () {
    $('#create-button').click(function () {
        //open/close just for custom menus  data-native-menu="false"
        $('<ul class="listview"><li><a href="#">Red</a></li><li><a href="#">White</a></li><li><a href="#">Blue</a></li></ul>')
        .insertAfter('#create-button')
        .listview({
            inset: true,
            create: function () {
                console.log('Creating new select menu...');
            }
        });
    });

    $('#add-option').click(function () {
        $('.listview').append('<li><a href="#">Dynamic option</a>').listview('refresh');
    });

});