Gooey Tool Box is designed to integrate easily with your development flow.
<script>
GTB.autoInit(); // Init all features with one easy function call.
// Or initialize each feature individually as needed.
gtbDB = new GTBDataBinder(); // Data binding
gtbA = new GTBAlert(); // Alert
gtbC = new GTBConfirm(); // Confirm
gtbSA = new GTBScrollAnimations(); // Scroll animations
gtbS = new GTBScrollAnimator(); // Scroll animator
gtbT = new GTBToast(); // Toast
// Then, you're ready to go!
gtbA('Hello, World!');
</script>
Features
Data Binding
Simply register a variable with an instance the GTBDataBinder class object and apply a data-gtb-db attribute with the variable name as the value to any element. All elements with the attribute will be automatically updated when the registered variable changes. Additionally, if the element is an input or text area, the variable will be automatically updated to the value of the most recently changed input field.
<!--The span will contain the value of the "test" variable and automatically update when it changes-->
<p>
<span data-gtb-db = "test"></span> World.
</p>
<script>
//Register the variable here
gtbDB.registerVariable('test', "Hello");
//When a variable is registered, it becomes a property of the GTBDataBinder class object and can be used like any other variable.
gtbDB.test = "Hey"; //Would automatically update all elements with the data-gtb-db = "test" attribute.
</script>
Try it out
Stylin' Alert
GTB provides a convenient alert function that works very similarly to the native alert in Javascript. The first argument of the function is the content of the alert, which can accept a string literal containing HTML elements or plain text. The second accepts a string that will be the header of the alert dialog box.
<style>
.alert-text{
color: red;
font-style: italic;
font-weight: bold;
}
.alert-blue{
color: blue;
font-weight: bolder;
}
.alert-green{
color: green;
font-weight: bolder;
}
</style>
<script>
gtbA('This alert can be <span class = alert-text>styled</span> with regular <span class = alert-blue>HTML</span> and <span class = alert-green>CSS</span><br>Click the x or the background to close.');
</script>