Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
!Twine, JQuery and Bootstrap.
I need jQuery to be able to easily drop in interface elements, like sliders, and Bootstrap to automatically make the site "look nice" and more importantly, be responsive.
!!Can I do this?
I dunno.
I want a clean and Medium-esque, minimal, white-based design, into which I can easily drop simple bits of Twine code.
This Twine code might keep a track of how many, or which pages you have visited, and show you links to other pages based on that.
BUT. It would be great at some
[[Allsorts]]
[[Accordion]]
[[Checkboxes]]
[[Bootstrap]]!Allsorts of Stuff
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
<div id="test">123</div>
<div id="meter">345</div>
!! Slider
<div id="slider"></div>
!! Date Picker
<p>Date: <input type="text" id="datepicker"></p>
<div id="dialog" title="Basic dialog" style="visibility:hidden;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script>
function showDialog(){
//alert("hello")
$('#dialog').dialog('open');
}
</script>
<button onclick="showDialog()"> Show Dialog</button>
<<script>>
console.log("Ready!")
$(document).one(':passageend', function () {
console.log("Steady!")
$("test").css("background-color", "red");
$("#test").animate({right: '250px'});
setup.jQpromise.then(function () {
console.log("Hello")
$("#test").html("Hello");
$("#slider").slider()
$("slider").css("background-color", "yellow");
$( "#datepicker" ).datepicker();
$( "#dialog" ).dialog();
$('#dialog').dialog('close');
$( document ).tooltip();
});
});
<</script>>
<style>
#accordion p{
color:red;
}
</style>
<<nobr>>
<div id="accordion">
<h3>Section 1 - Jello</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.</p>
</div>
<h3>Section 2</h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.</p>
</div>
<h3>Section 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.</p>
</div>
<h3>Section 4</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<</nobr>>
<<script>>
console.log("Ready!")
$(document).one(':passageend', function () {
console.log("Steady!")
setup.jQpromise.then(function () {
console.log("Go!")
$( "#accordion" ).accordion({collapsible: true});
});
});
<</script>><div class="widget">
<h1>Checkbox and radio button widgets</h1>
<h2>Radio Group</h2>
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>
<h2>Checkbox</h2>
<fieldset>
<legend>Hotel Ratings: </legend>
<label for="checkbox-1">2 Star</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-2">3 Star</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-3">4 Star</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3">
<label for="checkbox-4">5 Star</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4">
</fieldset>
<h2>Checkbox nested in label</h2>
<fieldset>
<legend>Bed Type: </legend>
<label for="checkbox-nested-1">2 Double
<input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
</label>
<label for="checkbox-nested-2">2 Queen
<input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
</label>
<label for="checkbox-nested-3">1 Queen
<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
</label>
<label for="checkbox-nested-4">1 King
<input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
</label>
</fieldset>
</div>
<<script>>
console.log("Ready!")
$(document).one(':passageend', function () {
console.log("Steady!")
setup.jQpromise.then(function () {
console.log("Hello")
$( "input" ).checkboxradio();
});
});
<</script>><div class="row">
<div class="col-sm-4">First of three columns
[[Jumbotron]]
</div>
<div class="col-sm-4">Second of three columns</div>
<div class="col-sm-4">Third of three columns</div>
</div>
<button type="button" class="btn btn-primary" data-passage="Library">Next</button>
<p>This is some text.</p>
<p>This is another text.</p>
Some stuff here...<footer class="footer">
@Copyright 2019 Tom Smith everythingability.com
</footer><header> <!-- Fixed navbar --> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <!-- logo here --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> [[Start]] </li> <li class="nav-item"> [[Allsorts]] </li> </ul> <!--form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form--> </div> </nav></header><<script>>
UIBar.stow(); //Hide the sidebar, like what is it for?
Config.debug = false; //turn off debug mode, like what is it for?
Config.ui.stowBarInitially = true;//do this, like what is it for?
<</script>>