АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Transitioning jQuery Effects

Читайте также:
  1. Production effects. Classification
  2. Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

Finally at the bottom of the document before any closing </body> tag we need to setup a block of JavaScript. Keep in mind this could be written into an external file and then included into the page header. It’s all about preference and how you need to setup your website.

$(function(){ $('.options a').on('click', function(e){ e.preventDefault(); if($(this).hasClass('active')) { // do nothing if the clicked link is already active return; } $('.options a').removeClass('active'); $(this).addClass('active'); var clickid = $(this).attr('id'); $('#listdisplay').fadeOut(240, function(){ if(clickid == 'thumbnails-list') { $(this).addClass('thumbview'); } else { $(this).removeClass('thumbview'); } $('#listdisplay').fadeIn(200); }); });});

This script requires a single event handler checking against each of the anchor links within the options list. First we call e.preventDefault() to stop the default click action, followed by a class check. If the icon link currently has a class of .active then we don’t want to do anything. Otherwise the script needs to switch between display views – first by removing the .active class from both links and then adding it onto the newly-clicked link.

Next I’m grabbing the current link ID so we know which content view should be displayed. I am hiding the entire list using fadeOut() and we run some logic within a callback method. If the ID is #thumbnails-list then we need to append that CSS class onto the UL element. Otherwise we need to remove that class.

Finally once the logic has completed we can re-display the list view onto the page usingfadeIn(). There are probably ways to do this using other jQuery animated effects. But when just getting started this method simply works – it’s easy to follow, and it’s easy to customize.

Create a better jQuery stylesheet switcher

Normal way

First, I'll show how jQuery users normally would change their CSS file.


This is the trimmed down version of the HTML file. As you can see, there is one style.css placed in the head and there are three links to color changers.

<html><head> <link href="style.css" rel="stylesheet" type="text/css" /></head><body><div id="colorchanger"> <a class="colorbox colorblue" href="?theme=blue" title="Blue Theme"></a> <a class="colorbox colorgreen" href="?theme=green" title="Green Theme"></a> <a class="colorbox colororange" href="?theme=orange" title="Orange Theme"></a></div></body></html>

Nothing really fancy going on here - just the markup that we need for the page.


Now straight to the important part of the CSS file: The colorchanger. We'll turn the links into block elements.

/* COLOR CHANGER */#colorchanger { float:right; }.colorbox { width:20px; height:20px; border:1px solid #050505; float:left; margin:5px; cursor:pointer; display:block; }.colorblue { background-color:#bfe1f1; }.colorblue:hover { background-color:#90bcd0; }.colororange { background-color:#F69C3A; }.colororange:hover { background-color:#FF5C01; }.colorgreen { background-color:#78A848; }.colorgreen:hover { background-color:#189048; }

As you can see, the boxes each have their own color and hover effect. We'll now use jQuery to actually change the stylesheet when the user clicks on one of these links.


After loading jQuery, we can now use it's power to change the link-element in the HTML-head (the place where we defined the first CSS sheet: style.css).

google.load("jquery", "1.3.1");google.setOnLoadCallback(function(){ // Color changer $(".colorblue").click(function(){ $("link").attr("href", "blue.css"); return false; }); $(".colorgreen").click(function(){ $("link").attr("href", "green.css"); return false; }); $(".colororange").click(function(){ $("link").attr("href", "orange.css"); return false; }); });

This works great! Every time the user clicks on one link, the stylesheet gets replaced. Now the only thing we have to do, is define how the CSS should look like when switching colours.


1 | 2 | 3 | 4 | 5 |

Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.004 сек.)