I am wondering where I can find some examples about the Button notifications in the Kitchensink demo.
I tried to get my hands on the javascript code but I found out that this elements are located under ks.tests.notifications is there any way in using those elements for myself ?

The button is not directly included in Wink but yes, you can easily use it for yourself:

Take the HTML code of the buttons:

<div class="w_footer_custom">
	<input type="button" value="add" class="w_button_custom w_rounded_left" onclick="toolbar.add();"/>
	<div class="w_button_custom w_indice" >
		<span id="test_toolbar_1">1</span>
		<input type="button" value="emails" onclick="javascript:void(0);"/>
	</div>
	<input type="button" value="menu" class="w_button_custom w_rounded_right" onclick="javascript:void(0);"/>
</div>

Add the right styles into your page:

.w_header_custom, .w_footer_custom
{
	position: relative;

	height: 45px;
	line-height: 45px;

	padding: 0 10px;

	font-size: 24px;

	text-align: center;

	background-color: #6d83a1;

	background-image: -webkit-gradient(linear, left top, left bottom, from(#b5c0ce), to(#6d83a1), color-stop(49%, #7f94b0), color-stop(50%, #7e93af));
	background-image: -moz-linear-gradient(top, #b5c0ce, #6d83a1, #7f94b0 49%, #7e93af 50%);

	color: #fff;

	text-shadow: #000 0px -1px 0px;
}

.w_button_custom input, .w_footer_custom .w_button_custom
{
	display: block;

	border-color: #375073;
	background-color: #405e87;

	background-image: -webkit-gradient(linear, left top, left bottom, from(#8aa1bf), to(#405e87), color-stop(50%, #5877a2));
	background-image: -moz-linear-gradient(top, #8aa1bf, #405e87);

	position: relative;

	border-width: 1px;
	border-style: solid;

	overflow: hidden;

	padding: 0 15px;

	font-size: 14px;
	font-weight: bold;

	white-space:nowrap;
	text-overflow:ellipsis;

	text-align: left;

	height: 34px;
	line-height: 32px;

	color: #fff;

	text-shadow: #000 0px -1px 0px;

	border-radius: 5px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.w_footer_custom .w_button_custom
{
	display: inline;
	top: -2px;
	margin: 0 -4px;

	border-radius: 0;

	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

.w_footer_custom .w_button_custom.w_rounded_left
{
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;

	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
}

.w_footer_custom .w_button_custom.w_rounded_right
{
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;

	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
}

.w_footer_custom .w_button_custom.w_indice
{
	display: inline-block;
	height: 32px;
	padding: 0;
	overflow: visible;
}

.w_footer_custom .w_button_custom.w_indice input
{
	border: 0;
	height: 32px;
}

.w_footer_custom .w_button_custom.w_indice span
{
	background: #f00;
	border: 2px solid #fff;

	position: absolute;

	content: "1";

	height: 17px;
	min-width: 13px;

	line-height: 17px;

	padding: 0 2px;

	top: -11px;
	right: -11px;

	text-align: center;
	text-shadow: none;

	z-index: 100;

	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

You just need a simple JS function to increment the number in the notification area:

toolbar =
{
	i:1,

	add: function()
	{
		this.i++;
		$('test_toolbar_1').innerHTML = this.i;
	}
};

You will probably need to adapt the JS code to your requirements (for instance, being able to decrement the number in the notification area…)

I hope this will help you

Jérôme

I think it would be really helpfull if those code snippeds would be included in the KitchenSink demo since you can do so cool things with it .

Philipp