Рубрики
WordPress Блоки "произвольный html" CSS JQuery

«Toggle»

  • Insert Headers and Footers
    • Script in Footer
      • плагин размещения js кода
  • сворачивание блоков
$('.mytoggle').each(function () {
	h=$(this);
	let html=h.html();
	h.empty();
	h.css('margin-bottom','0');
	let btn=$('<img>').prependTo(h);	
	$('<div>').appendTo(h).html(html);
	btn.css('display','inline-block');
	btn.css('vertical-align','top');
	btn.css('height','24px');
	btn.css('width','24px');
	btn.next().css('display','inline-block');
	btn.attr('src','http://codegid.ru/img/cub_r.png');
	btn.click(function(){$(this).parent().next().slideToggle()});
	
	let div=h.next();
	div.css('padding','5px');
	div.css('border','1px solid');
	div.css('display','none');
});
  • Пример использования в редакторе с блоками html
<div class="mytoggle">head</div><div>content</div>
Рубрики
HTML JQuery

task.jQuery «:focus selector»

Ссылка

CSS

.css2207031228 {
    background-color:red;
}
/*color,color контент*/

JS

bo52.f[2207031228]={
    arg:[{name:'el',title:'element'}],
    data:(p)=>{let ID=2207031228;let OBJ=bo52.f[ID];ARG=fun_arg(p,OBJ,ID);

    $(ARG.el).delegate("*", "focus blur", function() {
        let el = $(this);
        setTimeout(function() {
            el.toggleClass("css2207031228", el.is(":focus"));
    },0);
});
},tegs:"el.color.border",title:"color el"}

HTML

<div id="el">
<div tabindex="1">test1</div>
<div tabindex="2">test2</div>
</div>
Рубрики
HTML "Projects" HTML CSS JQuery JavaScript Портфолио

html\editor «sd»

Строчный вложенный редактор с перетаскиванием

Рубрики
JQuery Fragments

Fragments «JQuery»

  • класс «управление»
//добавить класс
div.addClass(name);
//удалить класс
div.removeClass(name);
//добавление или удаление
div.toggleClass(name);
//проверка на наличие класса
div.hasClass(name);
  • html «управление»
//очистить содержимое тега
div.empty();
//проверка на пустоту элемента
div.is(':empty')
  • элемент «видимость»
//показать элемент
div.show();
//скрыть элемент
div.hide();
//свернуть развернуть тег
div.slideToggle();
  • элемент «дочерний»
//первый дочерний элемент
div.children(':first');
//второй дочерний элемент
div.children().eq(1);
  • ev события «управление»
//програмно выполнить событие у элемента
div.trigger(event);
  • select тег «управление»
//найти выбранное значение в теге select
$('select').find('option:selected');
//найти выбранные элементы option в select у которых prop 
//значение value не равно empty
select.find('option:selected[value!="empty"]');
//найти в выборке элемент с значением block
select.find('option').filter(':[value="block"]')
Рубрики
Laravel+Vue3 project Vue.js Vue компоненты JQuery

Vue Окно в движении

JQuery

включить библиотеку из интернета
главный шаблон Laravel

resources\views\index.blade.php

<!DOCTYPE html>
<html lang="eng">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://codegid.ru/default/js/jquery/jquery-1.7.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/jquery.event.drag-2.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/jquery.event.drag.live-2.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/ui/1.12.0/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <body>
        <div id="app">
            <my-app/>
        </div>
        <script src="./js/app.js"></script>
    </body>
</html>