Main Page Main Page Feedback Main Page Ads Page
Geodles.Com-Georgian Dle Support
JQuery & CSS

მონაცემები სიახლეზე
სიახლის სახელი: JQuery & CSS tutotial
ავტორი: creed
წყარო: tutorialzine
საიხლის კატეგორია: Grapic

______________________________________________________________________________

ეს ბადი ტეგებს შორის
<div class="main">



    <p title="A New Tutorial Every Week" style="top:200px;left:120px;">

        This slideout is going to open to the bottom-right (the default).

    </p>



    <p title="2200+ Twitter Followers" class="openTop openLeft blue" style="top:400px;left:650px;">

        This slideout is going to open to the top-left.

    </p>



    <p title="Over 5000 RSS Subscribers" class="openTop red" style="top:500px;left:90px;">

        This slideout is going to open to the top-right.

    </p>



</div>

<div class="slideOutTip openLeft blue" style="left:100px;top:200px">

    <div class="tipVisible">

        <div class="tipIcon"><div class="plusIcon"></div></div>

        <p class="tipTitle">The title of the slideout</p>

    </div>



    <div class="slideOutContent">

        <p>Slideout Content</p>

    </div>

</div>



ეს CSS-ში

.slideOutTip{

    /* The main wrapping div of the slideout tips */

    position:absolute;

    padding:3px;

    top:0;

    left:0;

    background-color:#111;

    font-size:13px;

    color:white;

    overflow:hidden;

    height:22px;

}



.slideOutTip:hover{

    /* Applying a CSS3 outer glow on hover */

    -moz-box-shadow:0 0 1px #999;

    -webkit-box-shadow:0 0 1px #999;

    box-shadow:0 0 1px #999;

}



/* The holder for the title and the icon: */

.tipVisible{ cursor:pointer; height:22px; }



.tipTitle{

    float:left;

    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;

    font-size:15px;

    font-weight:bold;

    white-space:nowrap;

    line-height:22px;

    padding-right:5px;

}



.tipIcon{

    width:20px;

    height:20px;

    float:left;

    background-color:#61b035;

    border:1px solid #70c244;

    margin-right:8px;



    /* CSS3 Rounded corners */



    -moz-border-radius:1px;

    -webkit-border-radius:1px;

    border-radius:1px;

}


ესეც CSS-ში (ჯობს ამისთვის ახალი სიესეს პაპკა გააკეთოთ)
/* Three color themes */

.green .tipIcon{ background-color:#61b035; border:1px solid #70c244; }

.blue .tipIcon{ background-color:#1078C7; border:1px solid #1e82cd; }

.red .tipIcon{ background-color:#CD3A12; border:1px solid #da421a; }



.plusIcon{

    /* The plus icon */

    width:13px;

    height:13px;

    background:url('img/plus.gif') no-repeat center center;

    margin:4px;



    /* Defining a CSS3 animation. Currently only works in Chrome and Safari */

    -webkit-transition: -webkit-transform 0.2s linear;

    -moz-transition: -moz-transform 0.2s linear;

    transition: transform 0.2s linear;

}



.slideOutTip.isOpened{ z-index:10000; }



.slideOutTip.isOpened .plusIcon{

    /* Applying a CSS3 rotation  to the opened slideouts*/

    -moz-transform:rotate(45deg);

    -webkit-transform:rotate(45deg);

    transform:rotate(45deg);

}



/* Special rules for the left and top - opening versions */



.openLeft .tipIcon{

    /* Floating the title and the icon to the right */

    margin:0 0 0 8px;

    float:right;

}

.openLeft .tipTitle{ float:right; padding:0 0 0 5px; }

.openLeft .slideOutContent{ margin-top:22px; }

.openLeft.openTop .slideOutContent{ margin-top:0; }



.slideOutContent{

    /* Hiding the div with the slide out content: */

    display:none;

    padding:10px;

    font-size:11px;

}



/* Hiding the original paragraphs if they have not been replaced (JS disabled): */



.main > p{ display:none; }


ეს გაუშვით JS-ში
$(document).ready(function(){

    /* The code here is executed on page load */



    /* Replacing all the paragraphs */

    $('.main p').replaceWith(function(){



        /*

            The style, class and title attributes of the p

            are copied to the slideout:

        */



        return '\

        <div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">\

            \

            <div class="tipVisible">\

                <div class="tipIcon"><div class="plusIcon"></div></div>\

                <p class="tipTitle">'+$(this).attr('title')+'</p>\

            </div>\

            \

            <div class="slideOutContent">\

                <p>'+$(this).html()+'</p>\

            </div>\

        </div>';

    });



    $('.slideOutTip').each(function(){



        /*

            Implicitly defining the width of the slideouts according to the

            width of its title, because IE fails to calculate it on its own.

        */



        $(this).width(40+$(this).find('.tipTitle').width());

    });



    /* Listening for the click event: */



    $('.tipVisible').bind('click',function(){

        var tip = $(this).parent();



        /* If a open/close animation is in progress, exit the function */

        if(tip.is(':animated'))

            return false;



        if(tip.find('.slideOutContent').css('display') == 'none')

        {

            tip.trigger('slideOut');

        }

        else tip.trigger('slideIn');



    });


ესეც გაუშვით JS-ში (ჯობია ამისთვის ახალი JS პაპკა გააკეთოთ)
$('.slideOutTip').bind('slideOut',function(){



    var tip = $(this);

    var slideOut = tip.find('.slideOutContent');



    /* Closing all currently open slideouts: */

    $('.slideOutTip.isOpened').trigger('slideIn');



    /* Executed only the first time the slideout is clicked: */

    if(!tip.data('dataIsSet'))

    {

        tip .data('origWidth',tip.width())

            .data('origHeight',tip.height())

            .data('dataIsSet',true);



        if(tip.hasClass('openTop'))

        {

            /*

                If this slideout opens to the top, instead of the bottom,

                calculate the distance to the bottom and fix the slideout to it.

            */



            tip.css({

                bottom  : tip.parent().height()-(tip.position().top+tip.outerHeight()),

                top     : 'auto'

            });



            /*

                Fixing the title to the bottom of the slideout,

                so it is not slid to the top on open:

            */

            tip.find('.tipVisible').css({position:'absolute',bottom:3});



            /*

                Moving the content above the title, so it can

                slide-open to the top:

            */

            tip.find('.slideOutContent').remove().prependTo(tip);

        }



        if(tip.hasClass('openLeft'))

        {

            /*

                If this slideout opens to the left, fix it to the right so

                the left edge can expand without moving the entire div:

            */

            tip.css({

                right   : Math.abs(tip.parent().outerWidth()-(tip.position().left+tip.outerWidth())),

                left    : 'auto'

            });



            tip.find('.tipVisible').css({position:'absolute',right:3});

        }

    }



    /* Resize the slideout to fit the content, which is then faded into view: */



    tip.addClass('isOpened').animate({

        width   : Math.max(slideOut.outerWidth(),tip.data('origWidth')),

        height  : slideOut.outerHeight()+tip.data('origHeight')

    },function(){

        slideOut.fadeIn();

    });


ესეც გაუშვით JS-ში (ჯობია ამისთვის ახალი JS პაპკა გააკეთოთ)
    }).bind('slideIn',function(){ // Binding the slideIn event to .slideOutTip

        var tip = $(this);



        /* Hide the content and restore the original size of the slideout: */



        tip.find('.slideOutContent').fadeOut('fast',function(){

            tip.animate({

                width   : tip.data('origWidth'),

                height  : tip.data('origHeight')

            },function(){

                tip.removeClass('isOpened');

            });

        });



    });



}); /* Closing $(document).ready() */


P.S - კიდევ დაიდება ამდაგვარი შინაარსის სიახლეები ჩემგან
ტეგები css, js, javascript, menu, other

+2
ავტორი: creed ნანახია: 1009 | კომენტარი: 2 | Grapic | 6-04-2012, 20:38
JQuery & CSS
2By: creed Elite Members
 
wilo,
კარგი გავითვალისწინებ
 
 
  6 აპრილი 2012 21:06    
 
1By: wilo Elite Members
 
კაი საიტია საიდანაც ეს დადე მაგრამ აქ მე გაკვეთილი ვერ დავინახე ეს ცსს ეს ჯს ეგ არაა ტუტორი.
ჯობია ეგრევე მატერილები დადო
 
 
  6 აპრილი 2012 21:00    
 
ინფორმაცია
ჯგუფ სტუმარი-ის წევრებს არ აქვთ კომენტარის დატოვების უფლება.






რა სისტემაზე მუშაობთ

დამწყები ვარ
უქოზზე
დლეზე
ჯუმლაზე
ვორდპრესზე
რამოდენიმეზე ერთდროულად



����������� ������


© 2009-2012 Powered By Geodles.Com