"Ajax" dropdown, hur gör man?

FunTrix · 2010-03-18, 20:50

Hej hopp!

Jag skulle vilja ha en ajax dropdown box som man kan se på ett antal olika sidor.
Ett exempel är t.ex. http://www.kvadrat.se/kommunikation/ om du där klickar på "Anmäl ditt intresse här" så scrollas hela sidan ned, jag antar att man har använt sig utav ajax för att lösa detta, men om någon kunde dela sig utav någon tutorial, kod eller liknande som visar hur man gör detta så skulle jag uppskatta det mycket. Jag har testat att söka på google men det är svårt när man inte vet vad det heter, söker man på ajax drop down så får man bara upp en massa sidor om vanliga dropdownboxar.

allstars · 2010-03-18, 21:06

det är ingen ajax, då formuläret redan finns renderat på sidan.
Dock är formuläret gömt från start, med hjälp av javascript, och vid klick på länken så animeras formuläret fram.

Dock skickas datan med ajax när man skickar formuläret, och det finns många genvägar till.

jQuery fixar animeringarna och ajaxpostningen åt dig.
kolla in jquery.com där det finns mycket dokumentation och googlar du lite hittar du många exempel på hur man kan gå tillväga

olsserik · 2010-03-18, 21:06

Hej,
Jquery hide div
Sök på det på Google och du har mer snygga lösningar än du orkar ta in, typ.
Om du vill använda Jquery alltså...

HenSod · 2010-03-18, 21:52

Många som rekommenderar jQuery. Ett annat alternativ är Scriptaculous Slide down http://wiki.github.com/madrobby/scri...fect-slidedown

FunTrix · 2010-03-18, 23:04

Tycker nog att Jquery är mer det jag är ute efter.

Dock så får jag inte riktigt att fungera, jag har ett väldigt simpelt test:

Kod:

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
  $('#slickbox').hide();
  
 // shows and hides and toggles the slickbox on click  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });

 // slides down, up, and toggle the slickbox on click    
  $('#slick-down').click(function() {
    $('#slickbox').slideDown('slow');
    return false;
  });
  $('#slick-up').click(function() {
    $('#slickbox').slideUp('fast');
    return false;
  });
  $('#slick-slidetoggle').click(function() {
    $('#slickbox').slideToggle(400);
    return false;
  });
});

Kod:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv"> 
	<head> 
		<title>Jquery test</title> 
		<script type="text/javascript" src="slicker.js"></script> 
	</head> 
<body>

<div id="slickbox">This is the box that will be shown and hidden and toggled at your whim. :)</div> 
<a href="#" id="slick-slidetoggle">Slide toggle the box</a>

</body>
</html>

Problemet som jag har är att min div slickbox visas direkt och ingenting händer då jag klickar på knappen. Jag har kollat att slicker.js ligger i rätt mapp etc, vad är det jag har missat?
exemplet är från denna sida:
http://www.learningjquery.com/2006/0...-show-and-hide

olsserik · 2010-03-18, 23:17

Hej,
Testa följande:
I headen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".knapp-id").click(function(){
$("#toggler").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>

I bodyn:

<div id="toggler">Ditt innehåll som ska togglas fram</div>
<a href="#" class="knapp-id">Klicka mig för att toggla!</a>

Och i CSS:en, display:none på divven...

martine · 2010-03-19, 09:49

Citat:

Ursprungligen postat av HenSod

Många som rekommenderar jQuery. Ett annat alternativ är Scriptaculous Slide down http://wiki.github.com/madrobby/scri...fect-slidedown

Det är som sagt lite synd att jQuery alltid föreslås för varenda fråga om JavaScript... Dels kan det ofta lösas enkelt med just JavaScript och annars finns det en uppsjö andra alternativ som aldrig nämns. Kul att höra ett alternativ alltså.

olsserik · 2010-03-19, 11:36

Jag kan inte riktigt förstå varför det är agg mot Jquery?
Det är js, det erbjuder fantastiska möjligheter med bara ett bibliotek och det är relativt litet att köra.
Jag menar, visst skulle man kunna göra en slide div med eget javascript, men vad händer den dagen du vill utöka med mer js funktioner på sajten?
Risken är ju då att bygger mer egen kod som till slut överstiger Jquerys storlek.

HenSod · 2010-03-19, 18:06

Måste bara meddela att jag är inte emot jQuery. Jag har knappt någon erfarenhet alls av det ramverket så därför kan jag inte uttala mig om det. Vad jag ville ha sagt med mitt tidigare svar var att det är många många som tipsar om just jQuery och det är inget fel på det, men jag ville visa på att det finns andra ramverk (om man nu kan kalla Scriptaculous för ramverk) också och som kan lösa samma uppgift. Jag rekommenderar Prototype och Scriptaculous för det är de jag känner till bäst och som jag bara har positiv erfarenhet av.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

"Ajax" dropdown, hur gör man?