Customized jQuery select box:
Replacing all select box inside the body with customized jquery script.
Jquery script:
//box parameter for class refernece while calling the function
function mypeopolls_select_box(box)
{
var count=1;
$(".select_content").each(function(event){
//get the select box of parent class .select_content
var get_select_class=$(this).find(box);
//get the select box option details of parent class .select_content
var get_select=$(this).find('.'+box+' option');
get_select_class.after('<div class="new_box"><input type="text" class="get_li_value" id="get_li_'+count+'"/><ul id="append_li_'+count+'" class="list_li"></ul><input type="hidden" name="text_val_'+count+'" id="text_val_'+count+'" /></div>');
var values =$.map(get_select, function(e) {
var option_id=e.value;
var option_value=e.text;
//appending the select box value in to list
$("#append_li_"+count).append("<li id="+option_id+" class='list_vals'>"+option_value+"</li>");
//hiding the select box
get_select_class.hide();
});
count++;
});
$(".get_li_value").each(function(){
var get_avt_id=$(this).next().attr('id');
var frst_li=$("#"+get_avt_id+" li:first");
$(this).val(frst_li.html());
$("#"+get_avt_id).next().val(frst_li.attr('id'))
});
//------------- click event for input text box =--------------------///
$(".get_li_value").click(function(event){
event.preventDefault()
$(".get_li_value").next().slideUp('slow');
$(this).next().slideToggle(100);
});
//------setting the value in input box -------//
$(".list_li li").each(function(){
$(this).click(function(){
var hidvalue=$(this).html();
var parent_ul=$(this).parent().attr('id');
var id_main=$("#"+parent_ul);
id_main.prev().val(hidvalue);
id_main.next().val($(this).attr('id'));
id_main.slideUp(100);
});
});
//------end setting the value in input box -------//
}
HTML:
<html>
<title>customized select boxes</title>
<head>
<script src="http://mypeopolls.com/praveen_mypeopolls_jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
mypeopolls_select_box('.box');
});
</script>
</head>
<body>
<form action="get.php" method="get">
<span class="select_content">
<select class="box">
<option value="name">names</option>
<option value="test">tests</option>
<option value="test1">test1s</option>
</select>
</span>
<span class="select_content">
<select class="box">
<option value="n1">names1</option>
<option value="t1">tests2</option>
<option value="31">test1s3</option>
</select>
</span>
<input type="submit"/>
</form>
</body>
</html>
Style sheet :
<style>
*{
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.select_content .get_li_value{
padding-right:20px;
border:1px solid #cccccc;
background-image:url('images/sele.jpg');
background-position:center right;
background-repeat:no-repeat;
cursor:pointer;
height:27px;
}
.new_box{
float:left;
border:0px solid red;
padding:5px;
margin:10px;
}
.list_li
{
border:1px solid gray;
border-bottom:none;
width:148px;
position:absolute;
margin-top:1px;
display:none;
z-index:99;
}
.list_li li{
list-style:none;
cursor:pointer;
border-bottom:1px solid white;
background-color:#cccccc;
height:25px;
line-height:25px;
}
.list_li li:hover{
background-color:gray;
color:white;
}
</style>
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.select_content .get_li_value{
padding-right:20px;
border:1px solid #cccccc;
background-image:url('images/sele.jpg');
background-position:center right;
background-repeat:no-repeat;
cursor:pointer;
height:27px;
}
.new_box{
float:left;
border:0px solid red;
padding:5px;
margin:10px;
}
.list_li
{
border:1px solid gray;
border-bottom:none;
width:148px;
position:absolute;
margin-top:1px;
display:none;
z-index:99;
}
.list_li li{
list-style:none;
cursor:pointer;
border-bottom:1px solid white;
background-color:#cccccc;
height:25px;
line-height:25px;
}
.list_li li:hover{
background-color:gray;
color:white;
}
</style>
Results:
Note : Work only with jquery version 1.6.4 ,bug fixing on latest version of jquery and IE stylesheet;
Other Works:
1)Customised Message on Image
No comments:
Post a Comment