Scribd Logo
Carica

Benvenuto in Scribd!

  • Jquirycode

    Caricato da

    Santosh Singh
    12 visualizzazioni6 pagine
    Run the function below once the DOM(Document Object Model) is ready $(document).ready(function() / / trigger the function when clicking on an assigned element $(".toggle").click(function ()

    Descrizione originale:

    Titolo originale

    jquirycode

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Run the function below once the DOM(Document Object Model) is ready $(document).ready(function() / / trigger the function when clicking on an assigned element $(".toggle").click(function ()

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    12 visualizzazioni6 pagine

    Jquirycode

    Caricato da

    Santosh Singh
    Run the function below once the DOM(Document Object Model) is ready $(document).ready(function() / / trigger the function when clicking on an assigned element $(".toggle").click(function ()

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 6

    <html> <head> <title>My Web Page</title> <script src="js/jquery-1.4.2.

    js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> // run the function below once the DOM(Document Object Model) is ready $(document).ready(function() { // trigger the function when clicking on an assigned element $(".toggle").click(function () { // check the visibility of the next element in the DOM if ($(this).next().is(":hidden")) { $(this).next().slideDown("fast"); // slide it down } else { $(this).next().hide(); // hide it } }); }); </script> <style type="text/css"> .hiddenDiv{ display:none; } </style> </head> <!-- Start Web Page Body --> <body> Here is content section 1 <span class="toggle"> <a href="#" style="cursor:pointer;">show hidden container</a> </span> <div class="hiddenDiv" style="border:#030 1px solid; background-color:#CEFFDB; width:350px;"> Content I want to hide then slide into view for section 1 <br /><br /> I can put any website elements I wish to in here, and style it any way I please. </div> <hr /> Here is content section 2 <span class="toggle"> <a href="#" style="cursor:pointer;" onClick="return false">show hidden container</a> </span> <div class="hiddenDiv" style="border:#06C 1px solid; background-color:#CEE7FF; width:350px;">

    Content I want to hide then slide into view for section 2 <br /><br /> I can put any website elements I wish to in here, and style it any way I please. </div> <hr /> </body> </html> 222

    <!-- This is your PHP script... myphpscript.php --> <?php $contentVar = $_POST['contentVar']; if ($contentVar == "con1") { echo "My default content for this page element when t he page initially loads"; } else if ($contentVar == "con2") { echo "This is content that I want to load when the se cond link or button is clicked"; } else if ($contentVar == "con3") { echo "Content for third click is now loaded. Any <str ong>HTML</strong> or text you wish."; } ?> <!-- This is any HTML or PHP file you wish to use --> <html> <head> <script type="text/javascript" src="jQuery1.5.1.js"></script> <script language="JavaScript" type="text/javascript"> <!-function swapContent(cv) { $("#myDiv").html('<img src="loader.gif"/>').show(); var url = "myphpscript.php"; $.post(url, {contentVar: cv} ,function(data) { $("#myDiv").html(data).show(); }); } //-->

    </script> <style type="text/css"> #myDiv{ width:200px; height:150px; padding:12px; border:#666 1px solid; background-color:#FAEEC5; font-size:18px; } </style> </head> <body> <a href="#" onClick="return false" onmousedown="javascrip t:swapContent('con1');">Content1</a> <a href="#" onClick="return false" onmousedown="javascrip t:swapContent('con2');">Content2</a> <a href="#" onClick="return false" onmousedown="javascrip t:swapContent('con3');">Content3</a> <div id="myDiv">My default content for this page element when the page initially loads</div> </body> </html>
    333

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Adam's jQuery switchClass Animated Horizontal Menu Example</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jqueryui.min.js"></script> <script type="text/javascript" src="http://ui.jquery.com/latest/ui/effects.core.js"></script> <script type="text/javascript"> $(document).ready(function() { // Mouse Enter Animation Mechanism $("#menu a").mouseenter(function () { $(this).switchClass("style1", "style2", 700); }); // Mouse Leave Animation Mechanism $("#menu a").mouseleave(function () { $(this).switchClass("style2", "style1", 700);

    }); }); </script> <style type="text/css"> body{background:#161616; margin:0px;} #topBanner{background-color: #333; font-size:28px; color:#999; padding:24px;} /* Start styles for the menu elements */ #menu{background:#000; border:#1E1E1E 1px solid; padding:10px 0px 10px 0px;} .style1 { background-color:#000; font-size:16px; color:#666; padding:10px 30px 10px 30px; border:#1E1E1E 1px solid; text-decoration:none; } .style2 { background-color:#055F7C; font-size:16px; color:#FFF; padding:10px 30px 10px 30px; border:#1E1E1E 1px solid; text-decoration:none; } /* End styles for the menu elements */ </style> </head> <body> <div id="topBanner"> jQuery switchClass CSS Animated Horizontal Menu Tutorial </div> <div id="menu"> <a class="style1" href="#">Home</a><a class="style1" href="#">Services</a><a class="style1" href="#">Portfolio</a><a class="style1" href="#">Clients</a><a class="style1" href="#">News</a><a class="style1" href="#">Contact Us</a> </div> </body> </html>

    4444

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Adam's jQuery switchClass Animated Vertical Menu Example</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jqueryui.min.js"></script> <script type="text/javascript" src="http://ui.jquery.com/latest/ui/effects.core.js"></script> <script type="text/javascript"> $(document).ready(function() { // Mouse Enter Animation Mechanism $("#menu a").mouseenter(function () { $(this).switchClass("style1", "style2", 700); }); // Mouse Leave Animation Mechanism $("#menu a").mouseleave(function () { $(this).switchClass("style2", "style1", 700); }); }); </script> <style type="text/css"> body{background:#333; margin:0px;} #topBanner{background-color:#000; font-size:28px; color:#999; padding:24px;} /* Start styles for the menu elements */ #menu{} #menu ul{list-style:none; margin:0px; padding:0px;} #menu ul li{height:54px;} #menu ul li a{ display:block; width:148px; padding:16px 10px 16px 10px; font-size:16px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; } .style1 { background-color: #1B1B1B; color:#999; border:#000 1px solid; } .style2 { background-color: #121212; color:#0CF; border:#000 1px solid; } /* End styles for the menu elements */

    </style> </head> <body> <div id="topBanner"> jQuery switchClass CSS Animated Vertical Menu Tutorial </div> <div id="menu"> <ul> <li><a class="style1" href="#">Home</a></li> <li><a class="style1" href="#">Services</a></li> <li><a class="style1" href="#">Portfolio</a></li> <li><a class="style1" href="#">Clients</a></li> <li><a class="style1" href="#">News</a></li> <li><a class="style1" href="#">Contact Us</a></li> </ul> </div> </body> </html>

    Potrebbero piacerti anche