Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Национальный Технический Университет Харьковский Политехнический Институт

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Заметки JQuery.docx

Скачиваний:

Добавлен:

08.11.2019

Размер:

6 Мб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 6 78 / 88

Ui’s tabs (вкладки)

$(function() {

$( "#tabs" ).tabs();

});

<html>

<head>

<title>Sliders!</title>

</head>

<body>

<ul>

<li><a href="#tabs-1">Nunc tincidunt</a></li>

<li><a href="#tabs-2">Proin dolor</a></li>

<li><a href="#tabs-3">Aenean lacinia</a></li>

</ul>

<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

</div>

<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>

</div>

<p>Memento Mori</p>

</div>

</body>

</html>

Полезная вещь, да и смотрится ниче так.

_____________________________________________________________________________________

Droppable()

Opposite effect to the draggable()

droppable( "option", "option-name" );

$(document).ready( function () {

$('.flight').draggable();

$('.airport').droppable();

});

_____________________________________________________________________________________

UI’s hoverClass

$(document).ready( function () {

$('.flight').draggable({hoverClass:'.correct'});

$('.airport').droppable({hoverClass:'correct'});

});

Usage: $("selector").hoverClass("className");

Quite frankly, this plug in wouldn't be neccessary, except for the fact that IE doesn't recognize :hover

$(document).ready( function () {

$('.flight').draggable({hoverClass:'correct'});

$('.airport').droppable({hoverClass:'correct'});

$('.airport.lhr').droppable("option", "accept", ".lhr");

$('.airport.ord').droppable("option", "accept", ".ord");

$('.airport.hkg').droppable("option", "accept", ".hkg");

$('.airport.lax').droppable("option", "accept", ".lax");

}); // You have to include the '.' in the class name of the airport because the last argument is a selector. For instance to do the first one:

_____________________________________________________________________________________

.drop()

Убирает объект.

$(document).ready( function () {

$('.flight').draggable({hoverClass:'correct'});

$('.airport').droppable({hoverClass:'correct', drop: function(event, ui){

ui.draggable.remove();

}});

$('.airport.lhr').droppable("option", "accept", ".lhr");

$('.airport.ord').droppable("option", "accept", ".ord");

$('.airport.hkg').droppable("option", "accept", ".hkg");

$('.airport.lax').droppable("option", "accept", ".lax");

});

_____________________________________________________________________________________

Collapsible Message Panels

$(function(){

$('.header').click(function(){

$(this).next().stop().animate({height: 'toggle'}, 250);

});

$('#hide_all').click(function(){

$('.content').slideUp(250);

});

$('#show_all').click(function(){

$('.content').slideDown(250);

});

_____________________________________________________________________________________

My Project

$(document).ready(function(){

$('div#bounce').click(

function(){

$(this).effect("bounce", {times:5,direction:'right'},250);

});

$('div#bounce2').click(

function(){

$(this).effect("bounce", {times:5},250);

});

$("#highlight").click(function () {

$(this).effect("highlight", {}, 1000);

});

$("#hide").click(function () {

$(this).hide("blind", {direction:"vertical"}, 1000);

});

$("#explode").click(function () {

$(this).hide("explode", {}, 1000);

});

$("#fold").click(function () {

$(this).hide("fold", {size:50}, 1000);

});

$("#puff").click(function () {

$(this).hide("puff", { percent: 1000 }, 1000);

});

$("#pulsate").click(function () {

$(this).effect("pulsate", { times: 9 }, 50);

});

$("#scale").click(function () {

$(this).effect("scale", {

percent:150,

direction:'verticalal'}, 1000);

});

#bounce { background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); /* the standard way */; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#bounce2 { background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, green 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, green 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, green 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, green 100%); /* the standard way */; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#highlight {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%);; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#hide{background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%);; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#red {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#explode {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%);; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#fold {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#puff {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#pulsate {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#scale {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

.text{

color:red;

}

#P_S {

display:block;

width: 112px;

position: absolute;

bottom: 0px;

right: 280px;

font-weight:bold;

font-size:30px;

color:green;

}

body{

background-image:url('http://img.vmessages.com/en/santa-claus/44.gif');

text-align: center;

cursor:pointer;

}

<!DOCTYPE html>

<html>

<head>

</head>

<h1 class="text">Some of jQuery effects :)</h1>

<body>

<div id = "bounce" class="gradient">I'm bouncing :)</div>

<div id = "hide">I'm embarassed</div>

<div id = "explode">BANZAI!</div>

<div id="pulsate">Bzzzz</div>

<div id="scale">I wanna be bigger</div>

<div id="P_S">Merry X-mas ^__^</div>

</body>

</html>

_____________________________________________________________________________________

<<< < Предыдущая 1 2 3 4 5 6 78 / 88

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
02.02.2015341 Кб8Закон Украины о страховании.doc
#
02.02.201593 Кб6Закон Украины.docx
#
29.09.2019663 Кб6Заметки HTML.docx
#
29.09.201942 Кб3Заметки JQuery.docx
#
29.09.2019211 Кб4Заметки JQuery.docx
#
08.11.20196 Мб3Заметки JQuery.docx
#
15.11.2019378 Кб5Заметки PHP.docx
#
12.08.2019220 Кб3заметки.rtf
#
08.09.20191 Мб5Записка Курсовая_upd.docx
#
02.02.20151 Мб44записка Тихий.doc
#
01.04.2025165 Кб2Записка_05.docx