Test new methods
HTML
<script src="http://emtolis.gr/tsamigr/ccombo/libs/jquery.ba-outside-events.min.js"></script>
<script src="http://emtolis.gr/tsamigr/ccombo/v2.0/jquery.combo.js"></script>
<link rel="stylesheet" href="http://emtolis.gr/tsamigr/ccombo/v2.0/css/style.css">
<h1>ccombo - Test new methods</h1>
<hr />
<div class='buttons'>
<input class='stylishBut ' id ='create' type='button' value='Create ccombo' />
<input class='stylishBut ' id ='showVal' type='button' value='Show value' />
<input class='stylishBut ' id ='size' type='button' value='size' />
<input class='stylishBut ' id ='contains' type='button' value='Contains?' /> <input id='contText' type='text' value="contains?" style='color:#BBBBBB'/>
<input class='stylishBut ' id ='set' type='button' value='Set Item' /> <input id='sItem' type='text' value="item" style='color:#BBBBBB'/>
</div>
<hr /><br />
<div class='example'>
<div id='wrapper'></div>
</div>
<select id='ex1' class='noId'>
<option value='saf'>Safari</option>
<option value='fire'>Firefox</option>
<option value='op'>Opera</option>
<option value='chr'>Chrome</option>
<option value='Netscape'>Netscape Navigator</option>
<option value='Camino'>Camino</option>
<option value='Sm'>SeaMonkey</option>
<option value='k'>K-Meleon</option>
<option value='Galeon'>Galeon</option>
<option value='Konqueror'>Konqueror</option>
<option value='Maxthon'>Maxthon Browser</option>
<option value='Flock'>Flock </option>
<option value='Amaya'>Amaya</option>
<option value='Dragon'>Comodo Dragon</option>
<option value='Avant'>Avant Browser</option>
<option value='Epiphany'>Epiphany</option>
<option value='Lynx'>Lynx</option>
<option value='RockMelt'>RockMelt</option>
<option value='Voyager'>Voyager</option>
<option value='Dillo'>Dillo Web Browser</option>
<option value='ie'>Microsoft Internet explorer. Windows browser</option>
<option value='Slim'>Slim...
CSS
.stylishBut {
background: none repeat scroll 0 0 #F0F7FB;
border: 1px solid #B8CFE5;
color: #1C94C4;
cursor: pointer;
font-size: 11px;
font-weight: bold;
height: 25px;
min-width: 70px;
padding: 2px;
}
.stylishBut:hover{
background: none repeat scroll 0 0 #FDFADA; border: 1px solid #FBCB09;
color: #C77405 !important;
font-weight: bold;
}
.buttons{
margin-bottom:10px;
}
JavaScript
jQuery(document).ready(function() {
jQuery('#contText').click(function() {
jQuery('#contText').val("");
jQuery('#contText').css('color', 'black');
});
jQuery('#sItem').click(function() {
jQuery('#sItem').val("");
jQuery('#sItem').css('color', 'black');
});
jQuery('#create').click(
function() {
var created = jQuery('#wrapper').combo({
'selectId': 'ex1',
editable: true
});
});
jQuery('#showVal').click(
function() {
var comb = Combos.get_combo('wrapper');
if (comb) {
alert(comb.getText() + " - " + comb.getValue());
}
});
jQuery('.combo-inp').blur(function(){
alert('fuck')
})
jQuery('#size').click(
function() {
var comb = Combos.get_combo('wrapper');
if (comb) {
alert(comb.size());
}
});
jQuery('#contains').click(
function() {
var comb = Combos.get_combo('wrapper');
if (comb) {
alert("Position: " + comb.contains(jQuery('#contText').val()));
}
});
jQuery('#set').click(
function() {
var comb = Combos.get_combo('wrapper');
if (comb) {
var isSet = comb.setItem(jQuery('#sItem').val());
if (!isSet) {
alert(jQuery('#sItem').val() + " does not exist in the list");
}
}
});
});