Архив рубрики: jquery

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… Читать далее »

Альтернативная красивая функция 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();… Читать далее »

Простые примеры 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());… Читать далее »

Селекторы в 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> <!— $(«*») — Выбрать все элементы —>… Читать далее »

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(){… Читать далее »

Селекторы 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»… Читать далее »