Блоги

Today I decide to create my first article for beginners and who want to learn Jquery basics

Jquery is wonderful library, allowing smooth over despondency of your web pages and add nice effects which everybody will love.

As example, we should to create some search form for our website, but we haven`t many space at page

How about this solution:

Seems looks very nice :)

How to do this? Not so difficult:

Step 1. HTML

<div id="search-wrap">
    <div id="panel" style="display: none;">
        <div class="search_bg">
            <div id="search">
                <form>
                    <input type="text" value="" name="s" />
                    <input type="button" value="submit" class="input" />
                </form>
            </div>
        </div>
    </div>
    <div class="slide"><a class="btn-slide" href="#">search</a></div>
</div>

Step 2. CSS

<style>
#search-wrap { width:198px; height:95px; color:#888; }
.btn-slide { display:block; height:19px; text-align:center; width:100%; color:#000; text-decoration:none; }
.slide { background-color:#CCC; }
#panel { border:1px solid #EDEDED; height:60px; text-align:center; }
</style>

Step 3. jQuery

<script>
$(document).ready(function(){
	$(".btn-slide").mouseover(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
});
</script>

Another one sample, a little other. Assume, we want to hide some information in block, and want that this block slide by click at command element, like this:

Looks awesome.

How to do this? Not so difficult too:

Step 1. HTML

<div id="search-wrap">
    <div class="slide"><a class="btn-slide2" href="#">About us</a></div>
    <div id="panel2" style="display: none;">
        Input your about us text here.<br />
        Input your about us text here.<br />
        Input your about us text here.
    </div>
</div>

Step 2. CSS

<style>
#search-wrap { width:198px; height:95px; color:#888; }
.btn-slide2 { display:block; height:19px; text-align:center; width:100%; color:#000; text-decoration:none; }
.slide { background-color:#CCC; }
#panel2 { border:1px solid #EDEDED; height:60px; text-align:center; }
</style>

Step 3. jQuery

<script>
$(document).ready(function(){
	$(".btn-slide2").click(function(){
		$("#panel2").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
});
</script>

View Demo of our samples

or here (without dolphin headers)

download in package