JSFiddle - React, Tailwind, and code Playground

by Billy Moon

HTML

<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.2/fastclick.min.js"></script>
<div ng-app="MyApp">
    <div ng-controller="EditingPageCtrl">
        <div class="well" id="fast">
            <h2>Fastclick enabled in this area</h2>
            <div class="btn-group">
                <label ng-model="radioModelA" btn-radio="true" class="btn btn-silver">Yes</label>
                <label ng-model="radioModelA" btn-radio="false" class="btn btn-silver">No</label>
            </div>
                <p>Should be faster...</p>
            <hr />
                        <input id="fast1" ng-model="fast1" type="text" required="" size="6" class="form-control" />

        </div>
        <div class="well">
            <h2>No Fastclick in this area</h2>
                    <div class="btn-group">
            <label ng-model="radioModelB" btn-radio="true" class="btn btn-silver">Yes</label>
            <label ng-model="radioModelB" btn-radio="false" class="btn btn-silver">No</label>
        </div>
            <p>Expected to have 300ms delay</p>
            <hr />
        <input id="fast2" ng-model="fast2" type="text" required="" size="6" class="form-control" />
    </div>
        </div>

</div>

CSS

body {
    margin: 1em;
}
.btn.btn-silver {
    border-radius: 5px;
    border: 1px solid black;
    color: grey;
}
.btn.btn-silver.active {
    color:white;
    background: red;
}
.inputs input {
    margin-top: 20px;
}

JavaScript

new FastClick($("#fast")[0]);
angular.module('MyApp', ['ui.bootstrap']);

function EditingPageCtrl($scope) {
    $scope.radioModelA = undefined;
    $scope.radioModelB = undefined;
    $scope.fast1 = "this field works quickly, because of fastclick...";
    $scope.fast2 = "this field is slow, because no fastclick";
    $scope.$watch('radioModelA', function (newValue, oldValue) {
        //alert(newValue);    
    });
}