Kom ihåg mig?

"Ajax" dropdown, hur gör man?

Ämnesverktyg Visningsalternativ
Oläst 2010-03-18, 21:50 #1
FunTrix FunTrix är inte uppkopplad
Medlem
 
Reg.datum: Jun 2006
Inlägg: 253
FunTrix FunTrix är inte uppkopplad
Medlem
 
Reg.datum: Jun 2006
Inlägg: 253
Standard "Ajax" dropdown, hur gör man?

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.
FunTrix är inte uppkopplad   Svara med citatSvara med citat
Oläst 2010-03-18, 22:06 #2
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 126
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 126
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
allstars är inte uppkopplad   Svara med citatSvara med citat
Oläst 2010-03-18, 22:06 #3
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
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å...
olsserik är inte uppkopplad   Svara med citatSvara med citat
Oläst 2010-03-18, 22:52 #4
HenSod HenSod är inte uppkopplad
Flitig postare
 
Reg.datum: May 2005
Inlägg: 484
HenSod HenSod är inte uppkopplad
Flitig postare
 
Reg.datum: May 2005
Inlägg: 484
Många som rekommenderar jQuery. Ett annat alternativ är Scriptaculous Slide down http://wiki.github.com/madrobby/scri...fect-slidedown
HenSod är inte uppkopplad   Svara med citatSvara med citat
Oläst 2010-03-19, 00:04 #5
FunTrix FunTrix är inte uppkopplad
Medlem
 
Reg.datum: Jun 2006
Inlägg: 253
FunTrix FunTrix är inte uppkopplad
Medlem
 
Reg.datum: Jun 2006
Inlägg: 253
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
FunTrix är inte uppkopplad   Svara med citatSvara med citat
Oläst 2010-03-19, 00:17 #6
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
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...

Senast redigerad av olsserik den 2010-03-19 klockan 00:33 Anledning: För att inte krångla till det lade till jq-lib + css
olsserik är inte uppkopplad   Svara med citatSvara med citat
Oläst 2010-03-19, 10:49 #7
martines avatar
martine martine är inte uppkopplad
Mycket flitig postare
 
Reg.datum: Mar 2005
Inlägg: 767
martine martine är inte uppkopplad
Mycket flitig postare
martines avatar
 
Reg.datum: Mar 2005
Inlägg: 767
Citat:
Ursprungligen postat av HenSod Visa inlägg
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å.
martine är inte uppkopplad   Svara med citatSvara med citat
Oläst 2010-03-19, 12:36 #8
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
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.
olsserik är inte uppkopplad   Svara med citatSvara med citat
Oläst 2010-03-19, 19:06 #9
HenSod HenSod är inte uppkopplad
Flitig postare
 
Reg.datum: May 2005
Inlägg: 484
HenSod HenSod är inte uppkopplad
Flitig postare
 
Reg.datum: May 2005
Inlägg: 484
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.
HenSod är inte uppkopplad   Svara med citatSvara med citat
Svara


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

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 02:56.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017