Animēts formas dropdown (<select><option>...</sele

[senters]

Gribu ar JQuery rīkiem panākt skaistu, animētu formas select vērtību (option) "izslīdēšanu" - http://screencast.com/t/Wm3b2kZ87

 

Varbūt kādam ir labs paraugs šādam gadījumam.

Edited September 15, 2011 by senters

[mad182]

Ar pašu select elementu neko īsti nevarēsi izdarīt, lai tas būtu smuki un strādātu uz visiem pārlūkiem.

Var javascriptiski to aizstāt ar parastu html listu un tad lietotājam nemanot atzīmēt vērtības. Tālāk jau ar to listu var darīties kā patīk.

[senters]

Neizdodas īsti atrast nevienu perfektu, pavisam vienkāršu jquery piemēru ar dropdown.

mad182, parasto <select> nemaz negribu izmantot.

[briedis]

Pamēģini šo: http://harvesthq.github.com/chosen/

[senters]

Nav pavisam vienkārš, tāds ar fade effektu noklikojot uz paša dropdown lista?

 

 

Iztikšu ar defaulto jquery libu + smuks css, nelietojot neko lieku:

 

$(document).ready(function () {

$('#filter_category').click(function () {

$('ul.the_menu').slideToggle('medium');

});

Edited September 15, 2011 by senters

[senters]

Pie šīs pašas tēmas radies ir vēl viens aktuāls jautājums - Kā uz click eventa ar ajax nopostot datus?

 

Dropdown konfigs šāds:

 

 

$(function(){
$('#filter_category').click(function () {
$('ul.menu_category').slideToggle('medium');
});
});

 

html

 

 

<div id="button_category">
<div id="filter_category">Pasākumu kategorija</div>
<ul class="menu_category">
<?php
$data = mysql_query("select * from category order by sequence");
while($category = mysql_fetch_assoc($data))
{
echo "<li><a href='#'>".$category['name']."</a></li>";
}
?>
</ul>
</div> 

 

esmu ticis tik tālu:

 

 

// Kategoriju filtrs [JQUERY]
$(function(){
$('#filter_category').click(function(){
$('ul.menu_category').slideToggle('medium');
$('ul.menu_category').click(function(){
var z = $("ul.menu_category a").attr("id");
alert(z);
$.ajax(
{
type: "POST",
url: "inc/category_results.php",
data: "z="+ z,
cache: false,
success: function(html)
{
$(".spotlight, .spotlight_switch, .all_events").empty();
$(".today_events").html(html);
}
});
});
});
});

 

pie <a> elementa pieliku klāt "id" no kategoriju tabulas:

 

 

<div id="button_category">
<div id="filter_category">Pasākumu kategorija</div>
<ul class="menu_category">
<?php
$data = mysql_query("select * from category order by sequence");
while($category = mysql_fetch_assoc($data))
{
echo "<li><a href='#' id=".$category['id'].">".$category['name']."</a></li>";
}
?>
</ul>
</div> 

 

problēma tāda, ka visām kategorijām atgriež id = 1

Edited September 15, 2011 by senters

[senters]

kāds var izlīdzēt?

[xPtv45z]

$('ul.menu_category a').click(function(){
var z = $(this).attr("id");

[senters]

paldies, tagad sapratu kādēļ nestrādāja, jo nebija norādīts uz click <a>