Рубрика: jquery

Урок 2. JQuery. Изменение стилей и AJAX в JQuery. Валидация форм с помощью JQuery

Материалы урока прикреплены ниже.

ajaxJQuery

25.06.2018
JQuery. Урок 1. Начинаем работать с эффектами JQUERY

Видео к уроку

Ссылка на код к уроку.

JQUERY

22.06.2018

Date range picker for bootstrap russian localization. Выбор диапазона дат для бутстрап с русской локализацией.

Скачать date range picker на русском языке.

daterangepicker — по этой ссылке вы можете скачать пример и протестировать его у себя. Jquery date range picker with russian localisation.

Jquery плагин для выбор диапазона дат.

Код примера.

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />

<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker({
 "locale": {
        "format": "MM/DD/YYYY",
        "separator": " - ",
        "applyLabel": "Применить",
        "cancelLabel": "Отмена",
        "fromLabel": "От",
        "toLabel": "До",
        "customRangeLabel": "Свой",
        "daysOfWeek": [
            "Вс",
            "Пн",
            "Вт",
            "Ср",
            "Чт",
            "Пт",
            "Сб"
        ],
        "monthNames": [
            "Январь",
            "Февраль",
            "Март",
            "Апрель",
            "Май",
            "Июнь",
            "Июль",
            "Август",
            "Сентябрь",
            "Октябрь",
            "Ноябрь",
            "Декабрь"
        ],
        "firstDay": 1
    }
});});

</script>

18.04.2017

Альтернативная красивая функция alert для jQuery. User friendly alert message jQuery.

alert = function(what){
    // if the element hasn't been appended to the body element
    if($("#alert_bar").length==0){
        // customize the bar with css
        var bar = $("<div/>").css({
            'display':'none',
            'position':'fixed',
            'top':'0px',
            'left':'0px',
            'zIndex':'99950',
            'width':'100%',
            'margin':'0px',
            'padding':'5px auto 9px auto',
            'textAlign':'center',
            'fontSize':'16px',
            'background':'#fff',
            'color':'red',
            'borderBottom':'solid 1px #333'
        })
        bar.attr("id","alert_bar")
        $('body').prepend(bar)
    }
    // close button
    $("#alert_bar").html('<div style="text-align:right;font-size:10px;color:red"><span style="cursor:pointer" onclick="$(\'#alert_bar\').slideUp()"></span></div><div>'+what+'</div>')
    $("#alert_bar").slideDown();
    
        
         auto = 2000;
        window.setTimeout(function(){
            $("#alert_bar").slideUp()
        },auto);
    
}

31.03.2017

Меню и галерея с отображением по категориям

menu

27.01.2017
jqueru nestable menu. Пример древовидного меню Jquery с серверной частью.

menu

25.01.2017

Простые примеры jquery

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function callback()
{
alert(123);
} 
$(document).ready(
function()
    {
      $("#test").click(function(){$(this).hide();});
      $("#mydiv").click(function(){$("#test").hide();});
      $("#mydiv1").click(function(){$("#test").show();});
      $("#mydiv2").click(function(){$("#test").toggle(1000,callback);});
      
      $(".mydiv3").click(function(){$("#test").fadeOut();});
      $(".mydiv4").click(function(){$("#test").fadeIn();});
      $(".mydiv5").click(function(){$("#test").fadeToggle(1000);});
            
      $(".mydiv6").click(function(){$("#test").slideUp();});
      $(".mydiv7").click(function(){$("#test").slideDown();});
      $(".mydiv8").click(function(){$("#test").slideToggle(1000);});
      $(".mydiv9").click(function()
        {
        $("#test").animate({left: '250px'});
        $("#test").animate({top: '250px'});
        $("#test").animate({left: '0px'});
        $("#test").animate({top: '0px'});
        }
        );
      $(".mydiv10").click(function()
        {
        $("#test").slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100);
        
        }
        );
      $(".mydiv11").click(function()
        {
        $("#test").animate({color: '#ff0000'});
        
        }
        );
      
      $(".mydiv12").click(function()
        {
        $(".mydiv12").html("Текст изменен");
        $("input").val("Значение изменено");
        alert($("input").val());
        }
        );

    }
  
);
</script>
</head>
<body>
<h1>Продемонстрировать show эффект</h1>
<button id='mydiv'>Скрыть все</button>
<button id='mydiv1'>Показать</button>
<button id='mydiv2'>Переключить</button>
<hr>
<h1>Продемонстрировать fade эффект</h1>
<button class='mydiv3'>Затуманить все</button>
<button class='mydiv4'>Показать</button>
<button class='mydiv5'>Переключить</button>
<hr>
<h1>Продемонстрировать slide эффект</h1>
<button class='mydiv6'>Свернуть все</button>
<button class='mydiv7'>Показать</button>
<button class='mydiv8'>Переключить</button>
<hr>
<h1>Продемонстрировать animate эффект</h1>
<button class='mydiv9'>Анимация</button>
<hr>
<h1>Продемонстрировать chaining эффект</h1>
<button class='mydiv10'>Цепная реакция</button>
<hr>
<h1>Продемонстрировать анимацию цвета</h1>
<button class='mydiv11'>Анимируем цвет</button>
<hr>
<h1>Изменить HTML</h1>
<button class='mydiv12'>Изменить</button>

<div  id='test' style='background:gray;position:relative;width:500px;'>
<p>Щелкни по мне и я исчезну</p>
<p>Кликни и я пропаду тоже!</p>
<p>И по мне!</p>
<input>

</div>
</body>
</html>

18.01.2017

Селекторы в Jquery Урок 12

<head>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.red{
background:red;
}
.green{
background:green;
}
*{border:1px solid black;}
.blue{
background:blue;
}
.main
{
color:white;
float:left;
padding:20px;
}
</style>
</head>
<body>
<div class='red main'>div Red</div>
<div class='green main'>div Green</div>
<div class='blue main'>div Blue</div>
<p class='red main'>pRed</p>
<p class='green main'>pGreen</p>
<p class='blue main'>pBlue</p>
<!--
$("*") - Выбрать все элементы

-->
<nav>
<div>
  <div class='red main'>div Red</div>
  <div class='green main'>div Green</div>
  <div class='blue main'>div Blue</div>
  <p class='red main'>pRed</p>
  <p class='green main'>pGreen</p>
  <p class='blue main'>pBlue</p>
</div>
</nav>
<a href='index.html'>jhmjk</a>
<script>
//$(".class div ul li").clik();
//$("#id").clik();
//$("tag").clik();
//$("[type]").show();
//$("[href="index.html"]").clik();
//$('селектор').функция(функцию что делать или переменная)
$(document).ready(function(){
$('[type="submit"]').hide();
//по клику по тегу див скрыть все элементы за секунду
 $("div").click(function(){//селектор с именем тега выбирает все теги
 $("*").css("border","10px solid black");
 $("*").hide(1000);//селектор со * выбирает все элементы
 
 });
  $("div.green").mouseenter(function(){
  $("div.green").css("background","lime");});

  $("div.green").mouseleave(function(){
  $("div.green").css("background","green");});

  $(".blue").mouseenter(function(){
  $(".blue").css("background","lightblue");});

  $(".blue").mouseleave(function(){
  $(".blue").css("background","blue");});
 
  $("div div.red").mouseenter(function(){
  $("div div.red").html("div div enter");});

  $("div div.red").mouseleave(function(){
  $("div div.red").html("DIV DIV leave");});
  //focus
  
  $("#search").focus(
  function(){
  $('[type="submit"]').show(200);
  }
  );
  $("#search").blur(
  function(){
  $('[type="submit"]').hide(200);
  }
  );
  
  //blur
 });
</script>
<hr>
<input id='search'><input type='submit'>
</body>

13.07.2016

Jquery Простые примеры. Урок 11

Подключаем библиотеку Jquery

<head>
<meta charset='utf-8'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
></script>
</head>
<body>
<div id='d1'>
<div id='mydiv' style='height:200px;border:1px solid black;'>Привет мир</div>
<button id='b1'>Спрятать надпись "Привет мир"</button>
<button id='b2'>Показать надпись "Привет мир"</button>
<button id='b3'>Переключить "Привет мир"</button>
</div>
<div id='d2' style='width:100px;height:100px;background:red;'>
</div>
<script>
//$(".myclass");
//$("div");
$(document).ready(function(){
  $("#d2").hide();
  $("#b1").click(function(){
        $("#mydiv").slideUp(1000);
        });
  $("#b2").click(function(){
        $("#mydiv").slideDown(1000);
        });
  $("#b3").click(function(){
        $("#d1").toggle(1000);
        $("#d2").toggle(1000);
        });
  $("#d2").click(function(){
        $("#d1").toggle(1000);
        $("#d2").toggle(1000);
        });
        
        
});
</script>
</body>

Протестируйте простые функции

fadeOut
fadeIn
fadeToggle

slideUp
slideDown
slidetoggle

hide
show
toggle

11.07.2016

Селекторы JQuery

$(«*») — Выбрать все элементы
$(this) Выбрать текущий элемент
$(«p.intro») выбрать все <p> с классом class=»intro»
$(«p:first») выбрать первый <p>
$(«ul li:first») выбрать первый <li> для первого <ul>
$(«ul li:first-child») выбрать первый <li> для каждого <ul>
$(«[href]») выбрать все элементы с аттрибутом href
$(«a[target=’_blank’]») все ссылки с аттрибутом target = «_blank»
$(«a[target!=’_blank’]») все ссылки с аттрибутом target не = «_blank»
$(«:button») выбрать все <button> и <input> с type=»button»
$(«tr:even») выбрать все четные <tr>
$(«tr:odd») выбрать все нечетные <tr>

06.04.2016