Skip to content

Instantly share code, notes, and snippets.

@lnickers2004

lnickers2004/Contact.html

Created January 10, 2014 22:48
Show Gist options
  • Save lnickers2004/8364211 to your computer and use it in GitHub Desktop.
Save lnickers2004/8364211 to your computer and use it in GitHub Desktop.
Download ZIP
Wiring Up a Pick Button in Bootstrap 3-- using jquery-- to handle changing button text. This functionality could be put into an Angular.js directive NOTE: this coede use an IIFE -- self execting anonymous funtion to protect the global scope
Raw
Contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Metro Golf Mobile</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/mgm-bootstrap.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<!--page div-->
<div id="page">
<!--header container-->
<header class="container">
<div id="menu" class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
<button class="navbar-toggle btn btn-primary btn-xs mgm-btn-xs"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down" />
</button>
<div id="logo">
<a href='.'>
<h4><span class="mgm-oline">Metro Golf Mobile</span></h4>
</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="nav "><a class="btn btn-primary btn-sm mgm-btn-sm" href=".">Home</a></li>
<li class="nav"><a class="btn btn-success btn-sm mgm-btn-sm" href="about.html">About</a></li>
<li class="nav active"><a class="btn btn-warning btn-sm mgm-btn-sm" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</header>
<!--body section-->
<section id="body" class="container">
<!--contact us heading-->
<div class="page-header">
<!-- <ol class="breadcrumb">
<li><a href="/">Home</a></li>
<li class="active">Contact</li>
</ol>-->
<h1><span class="mgm-oline">Contact Us</span></h1>
</div>
<p>This doesn't really work, but it's an example of a form. Easy, man. Relax, man.</p>
<!--form Row-->
<div class="row">
<!--message form-->
<form class="form-horizontal">
<!--name input-->
<div class="form-group">
<label for="nameInput" class="control-label col-md-2">Your Name</label>
<div class="col-md-10">
<input type="text"
name="nameInput"
class="form-control"
value=""
placeholder="e.g. Your Name" />
</div>
</div>
<!-- email input -->
<div class="form-group">
<label for="emailInput" class="control-label col-md-2">Email</label>
<div class="col-md-10">
<input type="email"
name="emailInput"
value=""
class="form-control"
placeholder="e.g. Your email" />
</div>
</div>
<!--favorite radio group-->
<div class="form-group">
<label class="control-label col-md-2">Favorite</label>
<div class="col-md-10">
<!--alternative to radio buttons-->
<div class="btn-group btn-group-sm btn" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="Favorite" value=" " />Dude</label>
<label class="btn btn-success">
<input type="radio" name="Favorite" value=" " />Donny</label>
<label class="btn btn-success">
<input type="radio" name="Favorite" value=" " />Maude</label>
<!--drop down menu example-->
<!--note use tabindex=-1 trick to take hidden items from showing up in the tab order!!-->
<div class="btn-group btn-group-sm">
<button class="btn btn-success">Other</button>
<button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#" tabindex="-1">Walter</a></li>
<li>
<a href="#" tabindex="-1">Bunny</a></li>
<li class="disabled">
<a href="#" tabindex="-1">The Big Lebowski</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--reason select input-->
<div class="form-group">
<label class="control-label col-md-2">Reason</label>
<div class=" col-md-10">
<!--options select-->
<!-- <select class="form-control">
<option>Adoration</option>
<option>Ordering a White Russian</option>
<option>Complaint</option>
<option>I am lost</option>
</select>-->
<!--alternative select method-->
<div class="dropdown">
<button id="pickbutton" class="btn btn-success">Pick One...</button>
<button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>
<ul id="reasonDropdown" class="dropdown-menu">
<li><a href="#" tabindex="-1">Reason</a></li>
<li><a href="#" tabindex="-1">Ordering a White Russian</a></li>
<li><a href="#" tabindex="-1">Complaint</a></li>
<li><a href="#" tabindex="-1">I am lost</a></li>
</ul>
</div>
</div>
</div>
<!--Message Text Area-->
<div class="form-group">
<label class="control-label col-md-2">Message</label>
<div class=" col-md-10">
<textarea cols="40" rows="6" class="form-control" placeholder="e.g. The Message"></textarea>
</div>
</div>
<!--button group-->
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<!--submit button-->
<input type="submit" value="Submit" class="btn btn-success btn-md" />
<!--cancel button-->
<a href="index.html" class="btn btn-danger btn-md">Cancel</a>
</div>
</div>
</form>
</div>
<!--end of form row-->
<!--address heading-->
<h3><span class="mgm-oline">Our fake address</span></h3>
<!--address div-->
<div>
<address>
Big Lebowski Fan Page<br />
123 Main Street<br />
Rug Ties The Room Together, CA 98765<br />
<abbr title="Phone">P:</abbr>
425.555.0100
</address>
<address>
<strong>Support:</strong> <a href="mailto:[email protected]">[email protected]</a><br />
<strong>Marketing:</strong> <a href="mailto:[email protected]">[email protected]</a>
</address>
</div>
</section>
<hr />
<!--footer container-->
<footer class="container">
<div class="row hidden-xs">
<div class="well well-sm">
<div class="mgm-divline">
<div class="mgm-divstation mgm-station1">
<div class="signdiv"><a class="btn btn-primary btn-xs" href="#"><span class="mgm-bullet-offset"><span class="mgm-bullet-solid">.</span></span><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;&nbsp;&nbsp;Home</a></div>
</div>
<div class="mgm-divstation mgm-station2">
<div class="signdiv"><a class="btn btn-primary btn-xs" href="#"><span class="mgm-bullet-offset"><span class="mgm-bullet-solid">.</span></span><span class="glyphicon glyphicon-share"></span>&nbsp;&nbsp;&nbsp;&nbsp;Share</a></div>
</div>
<div class="mgm-divstation mgm-station3">
<div class="signdiv"><a class="btn btn-primary btn-xs" href="#"><span class="mgm-bullet-offset"><span class="mgm-bullet-solid">.</span></span><span class="glyphicon glyphicon-road"></span>&nbsp;&nbsp;&nbsp;&nbsp;Go Play!</a></div>
</div>
<div class="mgm-divstation mgm-station4">
<div class="signdiv"><a class="btn btn-primary btn-xs" href="#"><span class="mgm-bullet-offset"><span class="mgm-bullet-solid">.</span></span><span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;&nbsp;&nbsp;Contact Us</a></div>
</div>
<div class="mgm-divstation mgm-station5">
<div class="signdiv"><a class="btn btn-primary btn-xs" href="#"><span class="mgm-bullet-offset"><span class="mgm-bullet-solid">.</span></span><span class="glyphicon glyphicon-info-sign"></span>&nbsp;&nbsp;&nbsp;&nbsp;About Us</a></div>
</div>
</div>
</div>
<hr />
</div>
<p>Text placeholders courtesy of <a href="http://www.lebowskiipsum.com/">Lebowski Ipsum</a>.</p>
</footer>
</div>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Raw
site.js
//add a self executing anonymous function to wrap our code so
//its not in the global scope
(function () {
//self executing anaonymous function
"use strict"
//get a reference to the button
$pickButton = $("pickButton");
//wireup a callback to handle menu clicks
$("reasonDropdown li a").on("click", function () {
var reason = $(this).text();// get value of the text in the
//menu it anchor that was clicked
$pickButton.text(reason);//set the text on the pick button!
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment