Skip to content

Instantly share code, notes, and snippets.

@carlsverre

carlsverre/gist:1148300

Created August 16, 2011 02:09
Show Gist options
  • Save carlsverre/1148300 to your computer and use it in GitHub Desktop.
Save carlsverre/1148300 to your computer and use it in GitHub Desktop.
Download ZIP
Dropdown Tests
Raw
gistfile1.txt
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/site_media/js/extensions/jquery.outside-events-1.1.js"></script>
<script type="text/javascript" src="/site_media/js/extensions/jquery.inputizzle.js"></script>
<script type="text/javascript" src="/site_media/js/underscore.js"></script>
<script type="text/javascript" src="/site_media/js/underscore.mixins.js"></script>
<script type="text/javascript" src="/site_media/js/underscore.string.js"></script>
<script type="text/javascript" src="/site_media/js/widgets/widget.js"></script>
<script type="text/javascript" src="/site_media/js/widgets/dropdowns/base.js"></script>
<script type="text/javascript" src="/site_media/js/widgets/dropdowns/styled_labels.js"></script>
<script type="text/javascript" src="/site_media/js/widgets/dropdowns/styled_dropdowns.js"></script>
<script type="text/javascript" src="/site_media/js/widgets/dropdowns/tooltip_dropdown.js"></script>
<script type="text/javascript" src="/site_media/js/widgets/dropdowns/icon_tooltip_dropdown.js"></script>
<style type="text/css">
#dropdowns {
position: absolute;
top: 100px;
left: 100px;
}
#dropdowns .dropdown {
margin-bottom: 50px;
display: block;
}
</style>
</head>
<body>
<input id="test_input" name="test" />
<div id="dropdowns">
<div id="base" class="dropdown">Default text</div>
<div id="tooltip" class="dropdown">Default text</div>
<div id="icon_tooltip" class="dropdown"></div>
<div id="flat_icon_rounded_dropdown" class="dropdown"></div>
</div>
<script type="text/javascript">
var base_dropdown = new mp.widgets.Dropdown().create($('#base'), ["hello", "world"]);
var tooltip_dropdown = new mp.widgets.TooltipDropdown().create($('#tooltip'), ["hello", "world"]);
var icon_tooltip_dropdown = new mp.widgets.IconTooltipDropdown().create($('#icon_tooltip'), [
["string", "/site_media/images/reports/engage/icons/string.png", "String"],
["numeric", "/site_media/images/reports/engage/icons/numeric.png", "Numeric"],
["bool", "/site_media/images/reports/engage/icons/bool.png", "True / False"]
], {
body_header: "Change Type"
});
var flat_icon_rounded_dropdown = new mp.widgets.styled_dropdowns.FlatIconRounded().create($('#flat_icon_rounded_dropdown'), [
["saveas", "Create a new bookmark..."],
["save", "Save current bookmark"]
], {
icon_url: "/site_media/images/icons/bookmark.png"
});
icon_tooltip_dropdown.container.bind('change', function(e, item) {
console.log("selected item:", item.val());
});
$('#test_input').inputizzle('testing');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment