beautify html
This commit is contained in:
Ilya Kantor
parent
ecf1478e7e
commit
5342f628da
354 changed files with 13965 additions and 9486 deletions
|
|
@ -1,51 +1,60 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<script src="dateselector.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/template" id="date-selector-template">
|
||||
<select class="year">
|
||||
<% for(var year = yearFrom; year <= yearTo; year++) { %>
|
||||
<option value="<%=year%>"><%=year%></option>
|
||||
<% } %>
|
||||
</select>
|
||||
<select class="month">
|
||||
<% for(var month = 0; month <= 11; month++) { %>
|
||||
<option value="<%=month%>"><%=monthNames[month]%></option>
|
||||
<% } %>
|
||||
</select>
|
||||
<select class="day">
|
||||
<% for(var day = 1; day <= dayTo; day++) { %>
|
||||
<option value="<%=day%>"><%=day%></option>
|
||||
<% } %>
|
||||
</select>
|
||||
</script>
|
||||
<script type="text/template" id="date-selector-template">
|
||||
<select class="year">
|
||||
<% for(var year=y earFrom; year <=y earTo; year++) { %>
|
||||
<option value="<%=year%>">
|
||||
<%=year%>
|
||||
</option>
|
||||
<% } %>
|
||||
</select>
|
||||
<select class="month">
|
||||
<% for(var month=0 ; month <=1 1; month++) { %>
|
||||
<option value="<%=month%>">
|
||||
<%=monthNames[month]%>
|
||||
</option>
|
||||
<% } %>
|
||||
</select>
|
||||
<select class="day">
|
||||
<% for(var day=1 ; day <=d ayTo; day++) { %>
|
||||
<option value="<%=day%>">
|
||||
<%=day%>
|
||||
</option>
|
||||
<% } %>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<div id="selector-holder"></div>
|
||||
<div id="value">тут будет значение даты при выборе</div>
|
||||
<div id="selector-holder"></div>
|
||||
<div id="value">тут будет значение даты при выборе</div>
|
||||
|
||||
<script>
|
||||
var dateSelector = new DateSelector({
|
||||
yearFrom: 2010,
|
||||
yearTo: 2020,
|
||||
value: new Date(2012, 2, 31), // 31 марта 2012
|
||||
template: $('#date-selector-template').html().trim()
|
||||
});
|
||||
<script>
|
||||
var dateSelector = new DateSelector({
|
||||
yearFrom: 2010,
|
||||
yearTo: 2020,
|
||||
value: new Date(2012, 2, 31), // 31 марта 2012
|
||||
template: $('#date-selector-template').html().trim()
|
||||
});
|
||||
|
||||
$('#selector-holder').append(dateSelector.getElement());
|
||||
$('#selector-holder').append(dateSelector.getElement());
|
||||
|
||||
$(dateSelector).on("select", function(e) {
|
||||
$('#value').html( e.value + '' );
|
||||
});
|
||||
</script>
|
||||
$(dateSelector).on("select", function(e) {
|
||||
$('#value').html(e.value + '');
|
||||
});
|
||||
</script>
|
||||
|
||||
<button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
|
||||
<button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,37 +1,40 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<script src="dateselector.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/template" id="date-selector-template">
|
||||
/* шаблон для виджета */
|
||||
</script>
|
||||
<script type="text/template" id="date-selector-template">
|
||||
/* шаблон для виджета */
|
||||
</script>
|
||||
|
||||
<div id="selector-holder"></div>
|
||||
<div id="value">тут будет значение даты при выборе</div>
|
||||
<div id="selector-holder"></div>
|
||||
<div id="value">тут будет значение даты при выборе</div>
|
||||
|
||||
<script>
|
||||
var dateSelector = new DateSelector({
|
||||
yearFrom: 2010,
|
||||
yearTo: 2020,
|
||||
value: new Date(2012, 2, 31), // 31 марта 2012
|
||||
template: $('#date-selector-template').html()
|
||||
});
|
||||
<script>
|
||||
var dateSelector = new DateSelector({
|
||||
yearFrom: 2010,
|
||||
yearTo: 2020,
|
||||
value: new Date(2012, 2, 31), // 31 марта 2012
|
||||
template: $('#date-selector-template').html()
|
||||
});
|
||||
|
||||
$('#selector-holder').append(dateSelector.getElement());
|
||||
$('#selector-holder').append(dateSelector.getElement());
|
||||
|
||||
$(dateSelector).on("select", function(e) {
|
||||
$('#value').html( e.value + '' );
|
||||
});
|
||||
</script>
|
||||
$(dateSelector).on("select", function(e) {
|
||||
$('#value').html(e.value + '');
|
||||
});
|
||||
</script>
|
||||
|
||||
<button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
|
||||
<button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,109 +1,112 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position:absolute;
|
||||
z-index:100; /* подсказка должна перекрывать другие элементы */
|
||||
padding: 10px 20px;
|
||||
|
||||
/* красивости... */
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px;
|
||||
/* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
/* подсказка должна перекрывать другие элементы */
|
||||
|
||||
padding: 10px 20px;
|
||||
/* красивости... */
|
||||
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
|
||||
<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// подсказка не должна вылезать за экран
|
||||
function Tooltip(options) {
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// подсказка не должна вылезать за экран
|
||||
function Tooltip(options) {
|
||||
|
||||
var offsetFromElement = (options.offset === undefined) ? 10 : options.offset;
|
||||
var tooltipElem;
|
||||
var isEnabled = true;
|
||||
var offsetFromElement = (options.offset === undefined) ? 10 : options.offset;
|
||||
var tooltipElem;
|
||||
var isEnabled = true;
|
||||
|
||||
var elem = options.elem;
|
||||
var html = options.html;
|
||||
var elem = options.elem;
|
||||
var html = options.html;
|
||||
|
||||
// обычно обработчики - отдельные функции, но здесь все слишком просто, так что без них
|
||||
elem.hover(show, hide);
|
||||
// обычно обработчики - отдельные функции, но здесь все слишком просто, так что без них
|
||||
elem.hover(show, hide);
|
||||
|
||||
function hide() {
|
||||
getTooltipElem().remove();
|
||||
}
|
||||
function hide() {
|
||||
getTooltipElem().remove();
|
||||
}
|
||||
|
||||
function show() {
|
||||
var elemCoords = elem.offset();
|
||||
|
||||
var tooltipElem = getTooltipElem();
|
||||
function show() {
|
||||
var elemCoords = elem.offset();
|
||||
|
||||
var winLeft = $(window).scrollLeft();
|
||||
var winTop = $(window).scrollTop();
|
||||
var tooltipElem = getTooltipElem();
|
||||
|
||||
tooltipElem.appendTo('body'); // если не показать элемент, то не получится получить ширину
|
||||
var winLeft = $(window).scrollLeft();
|
||||
var winTop = $(window).scrollTop();
|
||||
|
||||
var left = elemCoords.left + (elem.outerWidth() - tooltipElem.outerWidth())/2^0;
|
||||
if (left < winLeft) left = winLeft; // вылезли за левую границу
|
||||
tooltipElem.appendTo('body'); // если не показать элемент, то не получится получить ширину
|
||||
|
||||
var left = elemCoords.left + (elem.outerWidth() - tooltipElem.outerWidth()) / 2 ^ 0;
|
||||
if (left < winLeft) left = winLeft; // вылезли за левую границу
|
||||
|
||||
var top = elemCoords.top - tooltipElem.outerHeight() - offsetFromElement;
|
||||
if (top < winTop) { // вылезли за верхнюю границу
|
||||
top = elemCoords.top + elem.outerHeight() + offsetFromElement;
|
||||
}
|
||||
|
||||
tooltipElem.css({
|
||||
left: left,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
|
||||
function getTooltipElem() {
|
||||
if (!tooltipElem) {
|
||||
tooltipElem = $('<div/>', {
|
||||
"class": 'tooltip',
|
||||
html: html
|
||||
});
|
||||
}
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
var top = elemCoords.top - tooltipElem.outerHeight() - offsetFromElement;
|
||||
if (top < winTop) { // вылезли за верхнюю границу
|
||||
top = elemCoords.top + elem.outerHeight() + offsetFromElement;
|
||||
}
|
||||
|
||||
tooltipElem.css({
|
||||
left: left,
|
||||
top: top
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: "подсказка длиннее, чем элемент"
|
||||
});
|
||||
}
|
||||
|
||||
function getTooltipElem() {
|
||||
if (!tooltipElem) {
|
||||
tooltipElem = $('<div/>', {
|
||||
"class" : 'tooltip',
|
||||
html: html
|
||||
});
|
||||
}
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: "подсказка длиннее, чем элемент"
|
||||
});
|
||||
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: "HTML<br>подсказка",
|
||||
offset: 0
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: "HTML<br>подсказка",
|
||||
offset: 0
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,50 +1,51 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
/* ваш стиль */
|
||||
}
|
||||
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px;
|
||||
/* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
/* ваш стиль */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
|
||||
<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// подсказка не должна вылезать за экран
|
||||
function Tooltip(options) {
|
||||
/* ваш код */
|
||||
}
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// подсказка не должна вылезать за экран
|
||||
function Tooltip(options) {
|
||||
/* ваш код */
|
||||
}
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: "подсказка длиннее, чем элемент"
|
||||
});
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: "подсказка длиннее, чем элемент"
|
||||
});
|
||||
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: "HTML<br>подсказка",
|
||||
offset: 0
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: "HTML<br>подсказка",
|
||||
offset: 0
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,45 +1,47 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="window.css" />
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="draggableWindow.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="window.css" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="draggableWindow.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="height:2000px">
|
||||
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
|
||||
<script type="text/template" id="draggable-window-template">
|
||||
<div class="window-title"><%=title%></div>
|
||||
<div class="window-content"></div>
|
||||
<form class="window-message-form">
|
||||
<input type="text" name="message" class="window-message-text"><input type="submit" name="submit" class="window-message-submit" value="Послать">
|
||||
</form>
|
||||
</script>
|
||||
<script type="text/template" id="draggable-window-template">
|
||||
<div class="window-title">
|
||||
<%=title%>
|
||||
</div>
|
||||
<div class="window-content"></div>
|
||||
<form class="window-message-form">
|
||||
<input type="text" name="message" class="window-message-text">
|
||||
<input type="submit" name="submit" class="window-message-submit" value="Послать">
|
||||
</form>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var win = new DraggableWindow({
|
||||
title: "Чат с Петей",
|
||||
template: $('#draggable-window-template').html()
|
||||
});
|
||||
|
||||
var win = new DraggableWindow({
|
||||
title: "Чат с Петей",
|
||||
template: $('#draggable-window-template').html()
|
||||
});
|
||||
|
||||
win.getElement().appendTo('body');
|
||||
|
||||
</script>
|
||||
win.getElement().appendTo('body');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,45 +1,47 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="window.css" />
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="draggableWindow.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="window.css" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="draggableWindow.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="height:2000px">
|
||||
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
|
||||
<script type="text/template" id="draggable-window-template">
|
||||
<div class="window-title"><%=title%></div>
|
||||
<div class="window-content"></div>
|
||||
<form class="window-message-form">
|
||||
<input type="text" name="message" class="window-message-text"><input type="submit" name="submit" class="window-message-submit" value="Послать">
|
||||
</form>
|
||||
</script>
|
||||
<script type="text/template" id="draggable-window-template">
|
||||
<div class="window-title">
|
||||
<%=title%>
|
||||
</div>
|
||||
<div class="window-content"></div>
|
||||
<form class="window-message-form">
|
||||
<input type="text" name="message" class="window-message-text">
|
||||
<input type="submit" name="submit" class="window-message-submit" value="Послать">
|
||||
</form>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var win = new DraggableWindow({
|
||||
title: "Чат с Петей",
|
||||
template: $('#draggable-window-template').html()
|
||||
});
|
||||
|
||||
var win = new DraggableWindow({
|
||||
title: "Чат с Петей",
|
||||
template: $('#draggable-window-template').html()
|
||||
});
|
||||
|
||||
win.getElement().appendTo('body');
|
||||
|
||||
</script>
|
||||
win.getElement().appendTo('body');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,55 +1,52 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ваши стили */
|
||||
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
/* ваши стили */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
|
||||
<script type="text/template" id="draggable-window-template">
|
||||
/* шаблон для окна */
|
||||
</script>
|
||||
<script type="text/template" id="draggable-window-template">
|
||||
/* шаблон для окна */
|
||||
</script>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
// если начать перенос и передвинуть мышь максимально вверх -- верхний край окна не должен вылетать за край страницы.
|
||||
// в другие стороны
|
||||
|
||||
// если начать перенос и передвинуть мышь максимально вверх -- верхний край окна не должен вылетать за край страницы.
|
||||
// в другие стороны
|
||||
// чтобы даже при резких движениях мыши -- окно прилипало к краю но не вылезало за край
|
||||
// исключение -- максимальная нижняя позиция окна -- это когда только заголовок виден
|
||||
|
||||
// чтобы даже при резких движениях мыши -- окно прилипало к краю но не вылезало за край
|
||||
// исключение -- максимальная нижняя позиция окна -- это когда только заголовок виден
|
||||
// позиция мыши смещается
|
||||
function DraggableWindow(options) {
|
||||
var self = this;
|
||||
|
||||
// позиция мыши смещается
|
||||
function DraggableWindow(options) {
|
||||
var self = this;
|
||||
/* ваш код */
|
||||
}
|
||||
|
||||
/* ваш код */
|
||||
}
|
||||
var win = new DraggableWindow({
|
||||
title: "Чат с Петей",
|
||||
template: $('#draggable-window-template').html()
|
||||
});
|
||||
|
||||
var win = new DraggableWindow({
|
||||
title: "Чат с Петей",
|
||||
template: $('#draggable-window-template').html()
|
||||
});
|
||||
|
||||
win.getElement().appendTo('body');
|
||||
|
||||
</script>
|
||||
win.getElement().appendTo('body');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,138 +1,142 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position:absolute;
|
||||
z-index:100; /* подсказка должна перекрывать другие элементы */
|
||||
padding: 10px 20px;
|
||||
|
||||
/* красивости... */
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px;
|
||||
/* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
/* подсказка должна перекрывать другие элементы */
|
||||
|
||||
padding: 10px 20px;
|
||||
/* красивости... */
|
||||
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="#" id="link">Ссылка с подсказкой</a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
<a href="#" id="link">Ссылка с подсказкой</a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
|
||||
<div id="elem" style="border:1px solid black; position:absolute;width:300px;height:150px;right:10px;bottom:10px">
|
||||
<em>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
<div id="elem" style="border:1px solid black; position:absolute;width:300px;height:150px;right:10px;bottom:10px">
|
||||
<em>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// у нижнего и правого края окна подсказка должна идти налево/вверх от курсора
|
||||
function Tooltip(options) {
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// у нижнего и правого края окна подсказка должна идти налево/вверх от курсора
|
||||
function Tooltip(options) {
|
||||
|
||||
var offsetFromCursor = (options.offset === undefined) ? 10 : options.offset;
|
||||
var tooltipElem;
|
||||
var isEnabled = true;
|
||||
var offsetFromCursor = (options.offset === undefined) ? 10 : options.offset;
|
||||
var tooltipElem;
|
||||
var isEnabled = true;
|
||||
|
||||
var elem = options.elem;
|
||||
var html = options.html;
|
||||
var elem = options.elem;
|
||||
var html = options.html;
|
||||
|
||||
elem.on({
|
||||
mouseenter: onMouseEnter,
|
||||
mouseleave: onMouseLeave,
|
||||
mousemove: onMouseMove
|
||||
});
|
||||
|
||||
function onMouseEnter(e) {
|
||||
show(e.pageX, e.pageY);
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
hide();
|
||||
}
|
||||
|
||||
function onMouseMove(e) {
|
||||
show(e.pageX, e.pageY);
|
||||
}
|
||||
|
||||
|
||||
function hide() {
|
||||
getTooltipElem().remove();
|
||||
};
|
||||
|
||||
function getTooltipElem() {
|
||||
if (!tooltipElem) {
|
||||
tooltipElem = $('<div/>', {
|
||||
"class" : 'tooltip',
|
||||
html: html
|
||||
elem.on({
|
||||
mouseenter: onMouseEnter,
|
||||
mouseleave: onMouseLeave,
|
||||
mousemove: onMouseMove
|
||||
});
|
||||
}
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
function show(pageX, pageY) {
|
||||
var tooltipElem = getTooltipElem();
|
||||
function onMouseEnter(e) {
|
||||
show(e.pageX, e.pageY);
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
hide();
|
||||
}
|
||||
|
||||
function onMouseMove(e) {
|
||||
show(e.pageX, e.pageY);
|
||||
}
|
||||
|
||||
|
||||
function hide() {
|
||||
getTooltipElem().remove();
|
||||
};
|
||||
|
||||
function getTooltipElem() {
|
||||
if (!tooltipElem) {
|
||||
tooltipElem = $('<div/>', {
|
||||
"class": 'tooltip',
|
||||
html: html
|
||||
});
|
||||
}
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
function show(pageX, pageY) {
|
||||
var tooltipElem = getTooltipElem();
|
||||
|
||||
if (!tooltipElem.is(':visible')) {
|
||||
// первым делом - отобразить подсказку, чтобы можно было получить её размеры
|
||||
tooltipElem.appendTo('body');
|
||||
}
|
||||
|
||||
var scrollY = $(window).scrollTop();
|
||||
var winBottom = scrollY + $(window).height();
|
||||
|
||||
var scrollX = $(window).scrollLeft();
|
||||
var winRight = scrollX + $(window).width();
|
||||
|
||||
var newLeft = pageX + offsetFromCursor;
|
||||
var newTop = pageY + offsetFromCursor;
|
||||
|
||||
if (newLeft + tooltipElem.outerWidth() > winRight) { // если за правой границей окна
|
||||
newLeft -= tooltipElem.outerWidth();
|
||||
newLeft -= offsetFromCursor + 2; // немного левее, чтобы курсор был не над подсказкой
|
||||
}
|
||||
|
||||
if (newTop + tooltipElem.outerHeight() > winBottom) { // если за нижней границей окна
|
||||
newTop -= tooltipElem.outerHeight();
|
||||
newTop -= offsetFromCursor + 2; // немного выше
|
||||
}
|
||||
|
||||
tooltipElem.css({
|
||||
left: newLeft,
|
||||
top: newTop
|
||||
});
|
||||
};
|
||||
|
||||
if (!tooltipElem.is(':visible')) {
|
||||
// первым делом - отобразить подсказку, чтобы можно было получить её размеры
|
||||
tooltipElem.appendTo('body');
|
||||
}
|
||||
|
||||
var scrollY = $(window).scrollTop();
|
||||
var winBottom = scrollY + $(window).height();
|
||||
|
||||
var scrollX = $(window).scrollLeft();
|
||||
var winRight = scrollX + $(window).width();
|
||||
|
||||
var newLeft = pageX + offsetFromCursor;
|
||||
var newTop = pageY + offsetFromCursor;
|
||||
|
||||
if (newLeft + tooltipElem.outerWidth() > winRight) { // если за правой границей окна
|
||||
newLeft -= tooltipElem.outerWidth();
|
||||
newLeft -= offsetFromCursor + 2; // немного левее, чтобы курсор был не над подсказкой
|
||||
}
|
||||
|
||||
if (newTop + tooltipElem.outerHeight() > winBottom) { // если за нижней границей окна
|
||||
newTop -= tooltipElem.outerHeight();
|
||||
newTop -= offsetFromCursor + 2; // немного выше
|
||||
}
|
||||
|
||||
tooltipElem.css({
|
||||
left: newLeft,
|
||||
top: newTop
|
||||
new Tooltip({
|
||||
elem: $('#elem'),
|
||||
html: "Вот <b>такая</b> подсказка!"
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: $('#link').html()
|
||||
});
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#elem'),
|
||||
html: "Вот <b>такая</b> подсказка!"
|
||||
});
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: $('#link').html()
|
||||
});
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: $('#link2').html()
|
||||
});
|
||||
|
||||
</script>
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: $('#link2').html()
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,54 +1,56 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
/* ваш стиль */
|
||||
}
|
||||
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px;
|
||||
/* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
/* ваш стиль */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="#" id="link">Ссылка с подсказкой</a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
<a href="#" id="link">Ссылка с подсказкой</a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
|
||||
<div id="elem" style="border:1px solid black; position:absolute;width:300px;height:150px;right:10px;bottom:10px">
|
||||
<em>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
<div id="elem" style="border:1px solid black; position:absolute;width:300px;height:150px;right:10px;bottom:10px">
|
||||
<em>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// у нижнего и правого края окна подсказка должна идти налево/вверх от курсора
|
||||
function Tooltip(options) {
|
||||
/* ваш код */
|
||||
}
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// у нижнего и правого края окна подсказка должна идти налево/вверх от курсора
|
||||
function Tooltip(options) {
|
||||
/* ваш код */
|
||||
}
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#elem'),
|
||||
html: "Вот <b>такая</b> подсказка!"
|
||||
});
|
||||
new Tooltip({
|
||||
elem: $('#elem'),
|
||||
html: "Вот <b>такая</b> подсказка!"
|
||||
});
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: $('#link').html()
|
||||
});
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: $('#link').html()
|
||||
});
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: $('#link2').html()
|
||||
});
|
||||
|
||||
</script>
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: $('#link2').html()
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
|
|
@ -7,14 +8,18 @@
|
|||
.resize-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.resize-wrapper img {
|
||||
/* img при таком DOCTYPE в некоторых браузерах имеет display:inline, в некоторых display:block
|
||||
если оставить inline, то под img браузер оставит пустое место для "хвостов" букв
|
||||
*/
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.resize-handle-se { /* правый-нижний угол */
|
||||
|
||||
.resize-handle-se {
|
||||
/* правый-нижний угол */
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
|
@ -23,127 +28,131 @@
|
|||
background: url(https://js.cx/clipart/handle-se.png) no-repeat;
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
.resize-handle-s { /* нижняя "рамка", за которую можно потащить */
|
||||
|
||||
.resize-handle-s {
|
||||
/* нижняя "рамка", за которую можно потащить */
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
background: gray;
|
||||
cursor: s-resize;
|
||||
}
|
||||
|
||||
.resize-handle-e { /* правая "рамка", за которую можно потащить */
|
||||
|
||||
.resize-handle-e {
|
||||
/* правая "рамка", за которую можно потащить */
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height:100%;
|
||||
height: 100%;
|
||||
background: gray;
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img style="width:500px;height:282px" id="heroes" src="https://js.cx/clipart/heroes.jpg">
|
||||
<img style="width:500px;height:282px" id="heroes" src="https://js.cx/clipart/heroes.jpg">
|
||||
|
||||
<div id="info"></div>
|
||||
<div id="info"></div>
|
||||
|
||||
<script>
|
||||
function Resizeable(options) {
|
||||
var self = this;
|
||||
<script>
|
||||
function Resizeable(options) {
|
||||
var self = this;
|
||||
|
||||
var elem = options.elem;
|
||||
var handleSize = options.handleSize || 3;
|
||||
var elem = options.elem;
|
||||
var handleSize = options.handleSize || 3;
|
||||
|
||||
var newWidth, newHeight, resizeType; // размеры в процессе ресайза
|
||||
var newWidth, newHeight, resizeType; // размеры в процессе ресайза
|
||||
|
||||
// внешняя обертка
|
||||
var wrapper = $('<div class="resize-wrapper"/>')
|
||||
wrapper.prependTo(elem.parent())
|
||||
wrapper.append(elem);
|
||||
// внешняя обертка
|
||||
var wrapper = $('<div class="resize-wrapper"/>')
|
||||
wrapper.prependTo(elem.parent())
|
||||
wrapper.append(elem);
|
||||
|
||||
// добавляем "ручки" в обертку
|
||||
wrapper.append(
|
||||
'<div class="resize-handle-s"/><div class="resize-handle-e"/><div class="resize-handle-se"/>'
|
||||
);
|
||||
// добавляем "ручки" в обертку
|
||||
wrapper.append(
|
||||
'<div class="resize-handle-s"/><div class="resize-handle-e"/><div class="resize-handle-se"/>'
|
||||
);
|
||||
|
||||
// отменить перенос и выделение браузера
|
||||
// в дополнение к return false из mousedown
|
||||
wrapper.on('selectstart dragstart', false);
|
||||
// отменить перенос и выделение браузера
|
||||
// в дополнение к return false из mousedown
|
||||
wrapper.on('selectstart dragstart', false);
|
||||
|
||||
adjustWrapperSize();
|
||||
adjustWrapperSize();
|
||||
|
||||
wrapper.on('mousedown', onMouseDown);
|
||||
wrapper.on('mousedown', onMouseDown);
|
||||
|
||||
function onMouseDown(e) {
|
||||
var className = e.target.className;
|
||||
if (className.indexOf("resize-handle-") == 0) {
|
||||
// поймали клик на "ручке" - вызываем начало ресайза
|
||||
resizeType = className.slice("resize-handle-".length);
|
||||
startResize();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function adjustWrapperSize() {
|
||||
// подгоняет размер обертки под картинку
|
||||
wrapper.css({
|
||||
width: elem.width() + handleSize,
|
||||
height: elem.height() + handleSize
|
||||
});
|
||||
}
|
||||
|
||||
function startResize() {
|
||||
$(document).on('mousemove.resizeable', onDocumentMouseMove);
|
||||
$(document).on('mouseup.resizeable', onDocumentMouseUp);
|
||||
}
|
||||
|
||||
function onDocumentMouseMove(e) {
|
||||
var offset = wrapper.offset();
|
||||
|
||||
if (~resizeType.indexOf("s")) {
|
||||
// в ручке есть буква "s" - значит меняем высоту картинки
|
||||
newHeight = Math.max(e.pageY - offset.top, handleSize);
|
||||
elem.css('height', newHeight);
|
||||
}
|
||||
if (~resizeType.indexOf("e")) {
|
||||
// в ручке есть буква "e" - значит меняем ширину картинки
|
||||
newWidth = Math.max(e.pageX - offset.left, handleSize);
|
||||
elem.css('width', newWidth);
|
||||
}
|
||||
|
||||
// подогнать обертку
|
||||
adjustWrapperSize();
|
||||
}
|
||||
|
||||
function onDocumentMouseUp() {
|
||||
endResize();
|
||||
}
|
||||
|
||||
function endResize() {
|
||||
$(document).off('.resizeable');
|
||||
$(self).triggerHandler({
|
||||
type: "resize",
|
||||
newWidth: newWidth,
|
||||
newHeight: newHeight
|
||||
});
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
var className = e.target.className;
|
||||
if (className.indexOf("resize-handle-") == 0) {
|
||||
// поймали клик на "ручке" - вызываем начало ресайза
|
||||
resizeType = className.slice("resize-handle-".length);
|
||||
startResize();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function adjustWrapperSize() {
|
||||
// подгоняет размер обертки под картинку
|
||||
wrapper.css({
|
||||
width: elem.width() + handleSize,
|
||||
height: elem.height() + handleSize
|
||||
var resizeMe = new Resizeable({
|
||||
elem: $('#heroes')
|
||||
});
|
||||
}
|
||||
|
||||
function startResize() {
|
||||
$(document).on('mousemove.resizeable', onDocumentMouseMove);
|
||||
$(document).on('mouseup.resizeable', onDocumentMouseUp);
|
||||
}
|
||||
|
||||
function onDocumentMouseMove(e) {
|
||||
var offset = wrapper.offset();
|
||||
|
||||
if (~resizeType.indexOf("s")) {
|
||||
// в ручке есть буква "s" - значит меняем высоту картинки
|
||||
newHeight = Math.max(e.pageY - offset.top, handleSize);
|
||||
elem.css('height', newHeight);
|
||||
}
|
||||
if (~resizeType.indexOf("e")) {
|
||||
// в ручке есть буква "e" - значит меняем ширину картинки
|
||||
newWidth = Math.max(e.pageX - offset.left, handleSize);
|
||||
elem.css('width', newWidth);
|
||||
}
|
||||
|
||||
// подогнать обертку
|
||||
adjustWrapperSize();
|
||||
}
|
||||
|
||||
function onDocumentMouseUp() {
|
||||
endResize();
|
||||
}
|
||||
|
||||
function endResize() {
|
||||
$(document).off('.resizeable');
|
||||
$(self).triggerHandler({
|
||||
type: "resize",
|
||||
newWidth: newWidth,
|
||||
newHeight: newHeight
|
||||
$(resizeMe).on("resize", function(e) {
|
||||
// вывести результат
|
||||
$('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var resizeMe = new Resizeable({
|
||||
elem: $('#heroes')
|
||||
});
|
||||
|
||||
$(resizeMe).on("resize", function(e) {
|
||||
// вывести результат
|
||||
$('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img style="width:500px;height:282px" id="heroes" src="https://js.cx/clipart/heroes.jpg">
|
||||
<img style="width:500px;height:282px" id="heroes" src="https://js.cx/clipart/heroes.jpg"> Картинка для декорации правого-нижнего угла: <img src="https://js.cx/clipart/handle-se.png">
|
||||
|
||||
Картинка для декорации правого-нижнего угла: <img src="https://js.cx/clipart/handle-se.png">
|
||||
<div id="info"></div>
|
||||
|
||||
<div id="info"></div>
|
||||
<script>
|
||||
function Resizeable(options) {
|
||||
/* ваш код */
|
||||
}
|
||||
|
||||
<script>
|
||||
function Resizeable(options) {
|
||||
/* ваш код */
|
||||
}
|
||||
var resizeMe = new Resizeable({
|
||||
elem: $('#heroes')
|
||||
});
|
||||
|
||||
var resizeMe = new Resizeable({
|
||||
elem: $('#heroes')
|
||||
});
|
||||
|
||||
$(resizeMe).on("resize", function(e) {
|
||||
// вывести результат
|
||||
$('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
$(resizeMe).on("resize", function(e) {
|
||||
// вывести результат
|
||||
$('#info').html("ширина:" + e.newWidth + ", высота:" + e.newHeight);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,50 +1,51 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="window.css" />
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="draggableWindow.js"></script>
|
||||
<script src="windowManager.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="window.css" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="draggableWindow.js"></script>
|
||||
<script src="windowManager.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
|
||||
|
||||
<script type="text/template" id="draggable-window-template">
|
||||
<div class="window-title"><%=title%></div>
|
||||
<div class="window-content"></div>
|
||||
<form class="window-message-form">
|
||||
<input type="text" name="message" class="window-message-text"><input type="submit" name="submit" class="window-message-submit" value="Послать">
|
||||
</form>
|
||||
</script>
|
||||
<script type="text/template" id="draggable-window-template">
|
||||
<div class="window-title">
|
||||
<%=title%>
|
||||
</div>
|
||||
<div class="window-content"></div>
|
||||
<form class="window-message-form">
|
||||
<input type="text" name="message" class="window-message-text">
|
||||
<input type="submit" name="submit" class="window-message-submit" value="Послать">
|
||||
</form>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
WindowManager.setTemplate($('#draggable-window-template').html().trim());
|
||||
|
||||
WindowManager.addWindow({
|
||||
title: "Чат с Петей"
|
||||
});
|
||||
|
||||
WindowManager.setTemplate( $('#draggable-window-template').html().trim() );
|
||||
|
||||
WindowManager.addWindow({
|
||||
title: "Чат с Петей"
|
||||
});
|
||||
|
||||
WindowManager.addWindow({
|
||||
title: "Чат с Машей"
|
||||
});
|
||||
|
||||
</script>
|
||||
WindowManager.addWindow({
|
||||
title: "Чат с Машей"
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -12,38 +13,43 @@
|
|||
<script src="calendar.js"></script>
|
||||
<script src="datepicker.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="value">тут будет выбранное значение (дата)</div>
|
||||
<div id="value">тут будет выбранное значение (дата)</div>
|
||||
|
||||
<script type="text/template" id="template-datepicker">
|
||||
<div class="header">
|
||||
<div class="prev-link">«</div>
|
||||
<div class="next-link">»</div>
|
||||
<div class="title">Выберите дату</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="calendar-left-holder prev-month">
|
||||
<!-- left calendar -->
|
||||
<script type="text/template" id="template-datepicker">
|
||||
<div class="header">
|
||||
<div class="prev-link">«</div>
|
||||
<div class="next-link">»</div>
|
||||
<div class="title">Выберите дату</div>
|
||||
</div>
|
||||
<div class="calendar-right-holder next-month">
|
||||
<!-- right calendar -->
|
||||
<div class="body">
|
||||
<div class="calendar-left-holder prev-month">
|
||||
<!-- left calendar -->
|
||||
</div>
|
||||
<div class="calendar-right-holder next-month">
|
||||
<!-- right calendar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var datePicker = new DatePicker({
|
||||
template: $('#template-datepicker').html(),
|
||||
value: {year: 2012, month: 2 }
|
||||
});
|
||||
<script>
|
||||
var datePicker = new DatePicker({
|
||||
template: $('#template-datepicker').html(),
|
||||
value: {
|
||||
year: 2012,
|
||||
month: 2
|
||||
}
|
||||
});
|
||||
|
||||
datePicker.getElement().appendTo('body');
|
||||
datePicker.getElement().appendTo('body');
|
||||
|
||||
$(datePicker).on("select", function(e) {
|
||||
$("#value").html( e.value + '' );
|
||||
});
|
||||
</script>
|
||||
$(datePicker).on("select", function(e) {
|
||||
$("#value").html(e.value + '');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
|
@ -12,26 +13,31 @@
|
|||
<script src="calendar.js"></script>
|
||||
<script src="datepicker.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="value">тут будет выбранное значение (дата)</div>
|
||||
<div id="value">тут будет выбранное значение (дата)</div>
|
||||
|
||||
<script type="text/template" id="template-datepicker">
|
||||
/* ваш шаблон */
|
||||
</script>
|
||||
<script type="text/template" id="template-datepicker">
|
||||
/* ваш шаблон */
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var datePicker = new DatePicker({
|
||||
template: $('#template-datepicker').html(),
|
||||
value: {year: 2012, month: 2 }
|
||||
});
|
||||
<script>
|
||||
var datePicker = new DatePicker({
|
||||
template: $('#template-datepicker').html(),
|
||||
value: {
|
||||
year: 2012,
|
||||
month: 2
|
||||
}
|
||||
});
|
||||
|
||||
datePicker.getElement().appendTo('body');
|
||||
datePicker.getElement().appendTo('body');
|
||||
|
||||
$(datePicker).on("select", function(e) {
|
||||
$("#value").html( e.value + '' );
|
||||
});
|
||||
</script>
|
||||
$(datePicker).on("select", function(e) {
|
||||
$("#value").html(e.value + '');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
|
|
@ -7,124 +8,131 @@
|
|||
.crop-area {
|
||||
position: absolute;
|
||||
border: 1px dashed black;
|
||||
|
||||
background: #F5DEB3;
|
||||
opacity: 0.3;
|
||||
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); /* IE opacity */
|
||||
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
|
||||
/* IE opacity */
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img width="500" height="282" id="heroes" src="https://js.cx/clipart/heroes.jpg">
|
||||
<img width="500" height="282" id="heroes" src="https://js.cx/clipart/heroes.jpg">
|
||||
|
||||
<div id="info"></div>
|
||||
<script>
|
||||
function Croppable(options) {
|
||||
var self = this;
|
||||
<div id="info"></div>
|
||||
<script>
|
||||
function Croppable(options) {
|
||||
var self = this;
|
||||
|
||||
var elem = options.elem;
|
||||
var elem = options.elem;
|
||||
|
||||
var cropArea;
|
||||
var cropStartX, cropStartY;
|
||||
var cropArea;
|
||||
var cropStartX, cropStartY;
|
||||
|
||||
elem.on('selectstart dragstart', false)
|
||||
.on('mousedown', onImgMouseDown);
|
||||
elem.on('selectstart dragstart', false)
|
||||
.on('mousedown', onImgMouseDown);
|
||||
|
||||
function initCropArea(pageX, pageY) {
|
||||
cropArea = $('<div class="crop-area"/>')
|
||||
.appendTo('body');
|
||||
function initCropArea(pageX, pageY) {
|
||||
cropArea = $('<div class="crop-area"/>')
|
||||
.appendTo('body');
|
||||
|
||||
cropStartX = pageX;
|
||||
cropStartY = pageY;
|
||||
}
|
||||
cropStartX = pageX;
|
||||
cropStartY = pageY;
|
||||
}
|
||||
|
||||
function onDocumentMouseMove(e) {
|
||||
drawCropArea(e.pageX, e.pageY);
|
||||
}
|
||||
function onDocumentMouseMove(e) {
|
||||
drawCropArea(e.pageX, e.pageY);
|
||||
}
|
||||
|
||||
function onDocumentMouseUp(e) {
|
||||
endCrop(e.pageX, e.pageY);
|
||||
function onDocumentMouseUp(e) {
|
||||
endCrop(e.pageX, e.pageY);
|
||||
|
||||
cropArea.remove();
|
||||
$(document).off('.croppable');
|
||||
}
|
||||
cropArea.remove();
|
||||
$(document).off('.croppable');
|
||||
}
|
||||
|
||||
function onImgMouseDown(e) {
|
||||
initCropArea(e.pageX, e.pageY);
|
||||
function onImgMouseDown(e) {
|
||||
initCropArea(e.pageX, e.pageY);
|
||||
|
||||
$(document).on({
|
||||
'mousemove.croppable': onDocumentMouseMove,
|
||||
'mouseup.croppable': onDocumentMouseUp
|
||||
});
|
||||
|
||||
return false;
|
||||
};
|
||||
$(document).on({
|
||||
'mousemove.croppable': onDocumentMouseMove,
|
||||
'mouseup.croppable': onDocumentMouseUp
|
||||
});
|
||||
|
||||
function drawCropArea(pageX, pageY) {
|
||||
var dims = getCropDimensions(pageX, pageY);
|
||||
return false;
|
||||
};
|
||||
|
||||
cropArea.css(dims);
|
||||
function drawCropArea(pageX, pageY) {
|
||||
var dims = getCropDimensions(pageX, pageY);
|
||||
|
||||
// вычитаем 2, т.к. ширина будет дополнена рамкой
|
||||
// если не вычесть, то рамка может вылезти за изображение
|
||||
cropArea.css({
|
||||
height: Math.max(dims.height-2, 0),
|
||||
width: Math.max(dims.width-2,0)
|
||||
cropArea.css(dims);
|
||||
|
||||
// вычитаем 2, т.к. ширина будет дополнена рамкой
|
||||
// если не вычесть, то рамка может вылезти за изображение
|
||||
cropArea.css({
|
||||
height: Math.max(dims.height - 2, 0),
|
||||
width: Math.max(dims.width - 2, 0)
|
||||
});
|
||||
|
||||
// здесь мы просто рисуем полупрозрачный квадрат
|
||||
// альтернативный подход - накладывать на каждую часть изображения div'ы с opacity и черным цветом, чтобы только кроп был ярким
|
||||
}
|
||||
|
||||
function endCrop(pageX, pageY) {
|
||||
var dims = getCropDimensions(pageX, pageY);
|
||||
|
||||
var coords = elem.offset();
|
||||
// получить координаты относительно изображения
|
||||
dims.left -= coords.left;
|
||||
dims.top -= coords.top;
|
||||
|
||||
$(self).triggerHandler($.extend({
|
||||
type: "crop"
|
||||
}, dims));
|
||||
}
|
||||
|
||||
function getCropDimensions(pageX, pageY) {
|
||||
// 1. Делаем квадрат из координат нажатия и текущих
|
||||
// 2. Ограничиваем размерами img, если мышь за его пределами
|
||||
|
||||
var left = Math.min(cropStartX, pageX);
|
||||
var right = Math.max(cropStartX, pageX);
|
||||
var top = Math.min(cropStartY, pageY);
|
||||
var bottom = Math.max(cropStartY, pageY);
|
||||
|
||||
var coords = elem.offset();
|
||||
|
||||
left = Math.max(left, coords.left);
|
||||
top = Math.max(top, coords.top);
|
||||
right = Math.min(right, coords.left + elem.outerWidth());
|
||||
bottom = Math.min(bottom, coords.top + elem.outerHeight());
|
||||
|
||||
return {
|
||||
left: left,
|
||||
top: top,
|
||||
width: right - left,
|
||||
height: bottom - top
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var croppable = new Croppable({
|
||||
elem: $('#heroes')
|
||||
});
|
||||
|
||||
// здесь мы просто рисуем полупрозрачный квадрат
|
||||
// альтернативный подход - накладывать на каждую часть изображения div'ы с opacity и черным цветом, чтобы только кроп был ярким
|
||||
}
|
||||
$(croppable).on("crop", function(event) {
|
||||
// вывести координаты и размеры crop-квадрата относительно изображения
|
||||
var str = "";
|
||||
$(['left', 'top', 'width', 'height']).each(function() {
|
||||
str += this + ":" + event[this] + " ";
|
||||
});
|
||||
|
||||
function endCrop(pageX, pageY) {
|
||||
var dims = getCropDimensions(pageX, pageY);
|
||||
|
||||
var coords = elem.offset();
|
||||
// получить координаты относительно изображения
|
||||
dims.left -= coords.left;
|
||||
dims.top -= coords.top;
|
||||
|
||||
$(self).triggerHandler($.extend({ type: "crop" }, dims));
|
||||
}
|
||||
|
||||
function getCropDimensions(pageX, pageY) {
|
||||
// 1. Делаем квадрат из координат нажатия и текущих
|
||||
// 2. Ограничиваем размерами img, если мышь за его пределами
|
||||
|
||||
var left = Math.min(cropStartX, pageX);
|
||||
var right = Math.max(cropStartX, pageX);
|
||||
var top = Math.min(cropStartY, pageY);
|
||||
var bottom = Math.max(cropStartY, pageY);
|
||||
|
||||
var coords = elem.offset();
|
||||
|
||||
left = Math.max(left, coords.left);
|
||||
top = Math.max(top, coords.top);
|
||||
right = Math.min(right, coords.left + elem.outerWidth());
|
||||
bottom = Math.min(bottom, coords.top + elem.outerHeight());
|
||||
|
||||
return { left: left, top: top, width: right-left, height: bottom-top };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var croppable = new Croppable({
|
||||
elem: $('#heroes')
|
||||
});
|
||||
|
||||
$(croppable).on("crop", function(event) {
|
||||
// вывести координаты и размеры crop-квадрата относительно изображения
|
||||
var str = "";
|
||||
$(['left','top','width','height']).each(function() {
|
||||
str += this+":"+event[this]+" ";
|
||||
});
|
||||
|
||||
$('#info').html("Crop: " + str);
|
||||
});
|
||||
|
||||
</script>
|
||||
$('#info').html("Crop: " + str);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,34 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img width="500" height="282" id="heroes" src="https://js.cx/clipart/heroes.jpg">
|
||||
<img width="500" height="282" id="heroes" src="https://js.cx/clipart/heroes.jpg">
|
||||
|
||||
<div id="info"></div>
|
||||
<script>
|
||||
function Croppable(options) {
|
||||
/* ваш код */
|
||||
}
|
||||
<div id="info"></div>
|
||||
<script>
|
||||
function Croppable(options) {
|
||||
/* ваш код */
|
||||
}
|
||||
|
||||
var croppable = new Croppable({
|
||||
elem: $('#heroes')
|
||||
});
|
||||
var croppable = new Croppable({
|
||||
elem: $('#heroes')
|
||||
});
|
||||
|
||||
$(croppable).on("crop", function(event) {
|
||||
// вывести координаты и размеры crop-квадрата относительно изображения
|
||||
var str = "";
|
||||
$(['left','top','width','height']).each(function() {
|
||||
str += this+":"+event[this]+" ";
|
||||
});
|
||||
$(croppable).on("crop", function(event) {
|
||||
// вывести координаты и размеры crop-квадрата относительно изображения
|
||||
var str = "";
|
||||
$(['left', 'top', 'width', 'height']).each(function() {
|
||||
str += this + ":" + event[this] + " ";
|
||||
});
|
||||
|
||||
$('#info').html("Crop: " + str);
|
||||
});
|
||||
|
||||
</script>
|
||||
$('#info').html("Crop: " + str);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,117 +1,115 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
.menu {
|
||||
padding: 5px;
|
||||
width: 250px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.menu ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
margin-left: 10px;
|
||||
height: 0;
|
||||
|
||||
list-style-position: outside;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu .menu-title {
|
||||
padding-left: 16px;
|
||||
background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.menu-open .menu-title {
|
||||
background: url(https://js.cx/clipart/arrow-down.png) left center no-repeat;
|
||||
}
|
||||
|
||||
.menu-open ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
.menu {
|
||||
padding: 5px;
|
||||
width: 250px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
margin-left: 10px;
|
||||
height: 0;
|
||||
list-style-position: outside;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu .menu-title {
|
||||
padding-left: 16px;
|
||||
background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-open .menu-title {
|
||||
background: url(https://js.cx/clipart/arrow-down.png) left center no-repeat;
|
||||
}
|
||||
|
||||
.menu-open ul {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="selected"></div>
|
||||
<div id="selected"></div>
|
||||
|
||||
<div id="sweeties" class="menu">
|
||||
<span class="menu-title">Сладости (наведи курсор)!</span>
|
||||
<ul>
|
||||
<li><a href="#cake">Торт</a></li>
|
||||
<li><a href="#donut">Пончик</a></li>
|
||||
<li><a href="#cake-small">Пирожное</a></li>
|
||||
<li><a href="#chokolate">Шоколадка</a></li>
|
||||
<li><a href="#icecream">Мороженое</a></li>
|
||||
<li><a href="#souflet">Суфле</a></li>
|
||||
<li><a href="#rahatlukum">Рахат-Лукум</a></li>
|
||||
</ul>
|
||||
<div id="sweeties" class="menu">
|
||||
<span class="menu-title">Сладости (наведи курсор)!</span>
|
||||
<ul>
|
||||
<li><a href="#cake">Торт</a></li>
|
||||
<li><a href="#donut">Пончик</a></li>
|
||||
<li><a href="#cake-small">Пирожное</a></li>
|
||||
<li><a href="#chokolate">Шоколадка</a></li>
|
||||
<li><a href="#icecream">Мороженое</a></li>
|
||||
<li><a href="#souflet">Суфле</a></li>
|
||||
<li><a href="#rahatlukum">Рахат-Лукум</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var menu = new SlidingMenu({
|
||||
elem: $('#sweeties'),
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
$(menu).on("select", function(e) {
|
||||
$("#selected").html(e.value);
|
||||
});
|
||||
|
||||
|
||||
function SlidingMenu(options) {
|
||||
var self = this;
|
||||
|
||||
var elem = options.elem;
|
||||
var duration = options.duration || 100;
|
||||
|
||||
var titleElem = elem.find('.menu-title');
|
||||
var listElem = elem.find('ul');
|
||||
|
||||
elem.hover(slideListShow, slideListHide);
|
||||
|
||||
elem.on('click', 'a', onItemClick);
|
||||
|
||||
function onItemClick(e) {
|
||||
$(self).triggerHandler({
|
||||
type: "select",
|
||||
value: e.target.getAttribute('href').slice(1)
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function slideListShow() {
|
||||
// анимируем высоту от нуля до scrollHeight
|
||||
// чтобы scrollHeight был верный - ставим overflow: hidden
|
||||
// скрываем при помощи height: 0 вместо display: none, чтобы анимация могла определить высоту
|
||||
listElem.stop().animate({
|
||||
height: listElem.prop('scrollHeight')
|
||||
}, {
|
||||
// время на часть высоты, которую еще надо показать
|
||||
duration: duration * (listElem.prop('scrollHeight') - listElem.height()) / listElem.prop('scrollHeight')
|
||||
<script>
|
||||
var menu = new SlidingMenu({
|
||||
elem: $('#sweeties'),
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function slideListHide() {
|
||||
listElem.stop().animate({
|
||||
height: 0
|
||||
}, {
|
||||
duration: duration * (listElem.height() / listElem.prop('scrollHeight'))
|
||||
});
|
||||
}
|
||||
}
|
||||
$(menu).on("select", function(e) {
|
||||
$("#selected").html(e.value);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
function SlidingMenu(options) {
|
||||
var self = this;
|
||||
|
||||
var elem = options.elem;
|
||||
var duration = options.duration || 100;
|
||||
|
||||
var titleElem = elem.find('.menu-title');
|
||||
var listElem = elem.find('ul');
|
||||
|
||||
elem.hover(slideListShow, slideListHide);
|
||||
|
||||
elem.on('click', 'a', onItemClick);
|
||||
|
||||
function onItemClick(e) {
|
||||
$(self).triggerHandler({
|
||||
type: "select",
|
||||
value: e.target.getAttribute('href').slice(1)
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function slideListShow() {
|
||||
// анимируем высоту от нуля до scrollHeight
|
||||
// чтобы scrollHeight был верный - ставим overflow: hidden
|
||||
// скрываем при помощи height: 0 вместо display: none, чтобы анимация могла определить высоту
|
||||
listElem.stop().animate({
|
||||
height: listElem.prop('scrollHeight')
|
||||
}, {
|
||||
// время на часть высоты, которую еще надо показать
|
||||
duration: duration * (listElem.prop('scrollHeight') - listElem.height()) / listElem.prop('scrollHeight')
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function slideListHide() {
|
||||
listElem.stop().animate({
|
||||
height: 0
|
||||
}, {
|
||||
duration: duration * (listElem.height() / listElem.prop('scrollHeight'))
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,78 +1,76 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
.menu {
|
||||
padding: 5px;
|
||||
width: 250px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.menu ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
margin-left: 10px;
|
||||
height: 0;
|
||||
|
||||
list-style-position: outside;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu .menu-title {
|
||||
padding-left: 16px;
|
||||
background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.menu-open .menu-title {
|
||||
background: url(https://js.cx/clipart/arrow-down.png) left center no-repeat;
|
||||
}
|
||||
|
||||
.menu-open ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
.menu {
|
||||
padding: 5px;
|
||||
width: 250px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
margin-left: 10px;
|
||||
height: 0;
|
||||
list-style-position: outside;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu .menu-title {
|
||||
padding-left: 16px;
|
||||
background: url(https://js.cx/clipart/arrow-right.png) left center no-repeat;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-open .menu-title {
|
||||
background: url(https://js.cx/clipart/arrow-down.png) left center no-repeat;
|
||||
}
|
||||
|
||||
.menu-open ul {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="selected"></div>
|
||||
<div id="selected"></div>
|
||||
|
||||
<div id="sweeties" class="menu">
|
||||
<span class="menu-title">Сладости (наведи курсор)!</span>
|
||||
<ul>
|
||||
<li><a href="#cake">Торт</a></li>
|
||||
<li><a href="#donut">Пончик</a></li>
|
||||
<li><a href="#cake-small">Пирожное</a></li>
|
||||
<li><a href="#chokolate">Шоколадка</a></li>
|
||||
<li><a href="#icecream">Мороженое</a></li>
|
||||
<li><a href="#souflet">Суфле</a></li>
|
||||
<li><a href="#rahatlukum">Рахат-Лукум</a></li>
|
||||
</ul>
|
||||
<div id="sweeties" class="menu">
|
||||
<span class="menu-title">Сладости (наведи курсор)!</span>
|
||||
<ul>
|
||||
<li><a href="#cake">Торт</a></li>
|
||||
<li><a href="#donut">Пончик</a></li>
|
||||
<li><a href="#cake-small">Пирожное</a></li>
|
||||
<li><a href="#chokolate">Шоколадка</a></li>
|
||||
<li><a href="#icecream">Мороженое</a></li>
|
||||
<li><a href="#souflet">Суфле</a></li>
|
||||
<li><a href="#rahatlukum">Рахат-Лукум</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var menu = new SlidingMenu({
|
||||
elem: $('#sweeties'),
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
var menu = new SlidingMenu({
|
||||
elem: $('#sweeties'),
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
$(menu).on("select", function(e) {
|
||||
$("#selected").html(e.value);
|
||||
});
|
||||
$(menu).on("select", function(e) {
|
||||
$("#selected").html(e.value);
|
||||
});
|
||||
|
||||
|
||||
function SlidingMenu(options) {
|
||||
/* ваш код, оживляющий меню */
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
function SlidingMenu(options) {
|
||||
/* ваш код, оживляющий меню */
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,75 +1,71 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link href="tree.css" rel="stylesheet">
|
||||
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<script src="regions.js"></script>
|
||||
<script src="tree.js"></script>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link href="tree.css" rel="stylesheet">
|
||||
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
||||
<script src="regions.js"></script>
|
||||
<script src="tree.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script id="tree-template" type="text/template">
|
||||
<ul>
|
||||
<% $(children).each(function() {
|
||||
var nodeData = data[this];
|
||||
var hasChildren = nodeData.children && nodeData.children.length;
|
||||
%>
|
||||
<li data-id="<%=nodeData.id%>" class="<%=hasChildren ? 'tree-closed' : ''%>">
|
||||
<% if (hasChildren) { %> <span class="tree-toggler"></span> <% } %>
|
||||
<input type="checkbox" value="<%=nodeData.id%>">
|
||||
<%=nodeData.title%>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
</script>
|
||||
<script id="tree-template" type="text/template">
|
||||
<ul>
|
||||
<% $(children).each(function() { var nodeData=d ata[this]; var hasChildren=n odeData.children && nodeData.children.length; %>
|
||||
<li data-id="<%=nodeData.id%>" class="<%=hasChildren ? 'tree-closed' : ''%>">
|
||||
<% if (hasChildren) { %> <span class="tree-toggler"></span>
|
||||
<% } %>
|
||||
<input type="checkbox" value="<%=nodeData.id%>">
|
||||
<%=nodeData.title%>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// требование - как можно меньше DOM-элементов
|
||||
// работа с данными из 1000 узлов
|
||||
/* пример структуры данных
|
||||
var data = [
|
||||
{
|
||||
children: [1,2,3]
|
||||
},
|
||||
{
|
||||
title: 'Россия',
|
||||
id: 1,
|
||||
children: [4,5]
|
||||
},
|
||||
{
|
||||
title: 'Украина',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
title: 'Беларусь',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
title: 'Север',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
title: 'Юг',
|
||||
id: 5
|
||||
}
|
||||
<script>
|
||||
// требование - как можно меньше DOM-элементов
|
||||
// работа с данными из 1000 узлов
|
||||
/* пример структуры данных
|
||||
var data = [
|
||||
{
|
||||
children: [1,2,3]
|
||||
},
|
||||
{
|
||||
title: 'Россия',
|
||||
id: 1,
|
||||
children: [4,5]
|
||||
},
|
||||
{
|
||||
title: 'Украина',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
title: 'Беларусь',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
title: 'Север',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
title: 'Юг',
|
||||
id: 5
|
||||
}
|
||||
|
||||
];
|
||||
*/
|
||||
];
|
||||
*/
|
||||
|
||||
var tree = new Tree({
|
||||
template: _.template($('#tree-template').html().trim()),
|
||||
data: regions
|
||||
});
|
||||
var tree = new Tree({
|
||||
template: _.template($('#tree-template').html().trim()),
|
||||
data: regions
|
||||
});
|
||||
|
||||
tree.getElement().appendTo('body');
|
||||
|
||||
|
||||
</script>
|
||||
tree.getElement().appendTo('body');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,31 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link type="text/css" rel="stylesheet" href="calendar.css">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="calendar.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<button onclick="calendar.setValue(new Date())">setValue(сегодня)</button>
|
||||
<button onclick="calendar.setValue(new Date())">setValue(сегодня)</button>
|
||||
|
||||
<div id="calendar-holder"></div>
|
||||
<div id="value">тут будет выбранное значение (дата)</div>
|
||||
<div id="calendar-holder"></div>
|
||||
<div id="value">тут будет выбранное значение (дата)</div>
|
||||
|
||||
|
||||
<script>
|
||||
var calendar = new Calendar({
|
||||
value: {year: 2012, month: 2 }
|
||||
});
|
||||
$('#calendar-holder').append(calendar.getElement());
|
||||
<script>
|
||||
var calendar = new Calendar({
|
||||
value: {
|
||||
year: 2012,
|
||||
month: 2
|
||||
}
|
||||
});
|
||||
$('#calendar-holder').append(calendar.getElement());
|
||||
|
||||
$(calendar).on("select", function(e) {
|
||||
$('#value').html(e.value+'');
|
||||
});
|
||||
</script>
|
||||
$(calendar).on("select", function(e) {
|
||||
$('#value').html(e.value + '');
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,31 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link type="text/css" rel="stylesheet" href="calendar.css">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="calendar.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<button onclick="calendar.setValue(new Date())">setValue(сегодня)</button>
|
||||
<button onclick="calendar.setValue(new Date())">setValue(сегодня)</button>
|
||||
|
||||
<div id="calendar-holder"></div>
|
||||
<div id="value">тут будет выбранное значение (дата)</div>
|
||||
<div id="calendar-holder"></div>
|
||||
<div id="value">тут будет выбранное значение (дата)</div>
|
||||
|
||||
|
||||
<script>
|
||||
var calendar = new Calendar({
|
||||
value: {year: 2012, month: 2 }
|
||||
});
|
||||
$('#calendar-holder').append(calendar.getElement());
|
||||
<script>
|
||||
var calendar = new Calendar({
|
||||
value: {
|
||||
year: 2012,
|
||||
month: 2
|
||||
}
|
||||
});
|
||||
$('#calendar-holder').append(calendar.getElement());
|
||||
|
||||
$(calendar).on("select", function(e) {
|
||||
$('#value').html(e.value+'');
|
||||
});
|
||||
</script>
|
||||
$(calendar).on("select", function(e) {
|
||||
$('#value').html(e.value + '');
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="autocomplete.css">
|
||||
|
|
@ -8,25 +9,27 @@
|
|||
<script src="filtering-list-provider.js"></script>
|
||||
<script src="autocomplete-list.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="autocomplete" id="search">
|
||||
|
||||
|
||||
<input type="text" autocomplete="off">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam explicabo nostrum eum placeat aliquid voluptatem nihil modi libero nulla tempore dolore itaque accusamus distinctio veniam quae voluptatibus suscipit provident quas quaerat tempora sequi magnam.</div>
|
||||
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam explicabo nostrum eum placeat aliquid voluptatem nihil modi libero nulla tempore dolore itaque accusamus distinctio veniam quae voluptatibus suscipit provident quas quaerat tempora sequi
|
||||
magnam.</div>
|
||||
|
||||
|
||||
<script>
|
||||
var dataProvider = new FilteringListProvider([
|
||||
'Человек',
|
||||
'Чело',
|
||||
'Че Гевара',
|
||||
'Яблоко',
|
||||
'Ноутбук',
|
||||
'Но Пасаран!'
|
||||
var dataProvider = new FilteringListProvider([
|
||||
'Человек',
|
||||
'Чело',
|
||||
'Че Гевара',
|
||||
'Яблоко',
|
||||
'Ноутбук',
|
||||
'Но Пасаран!'
|
||||
]);
|
||||
|
||||
var autocomplete = new Autocomplete({
|
||||
|
|
@ -37,7 +40,7 @@
|
|||
$(autocomplete).on('change', function(e) {
|
||||
$('#search').next().html(e.value);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="menu.css">
|
||||
|
|
@ -7,8 +8,9 @@
|
|||
<script src="hoverintent.js"></script>
|
||||
<script src="menu.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Разрешить вложенные меню -->
|
||||
<div class="menu" id="menu">
|
||||
<a href="#" class="title">Моё меню</a>
|
||||
|
|
@ -17,7 +19,7 @@
|
|||
<a href="#a1">Элемент 1</a>
|
||||
<ol>
|
||||
<li><a href="#a1.1">Элемент 1.1</a></li>
|
||||
<li class="has-children">
|
||||
<li class="has-children">
|
||||
<a href="#a1.2">Элемент 1.2</a>
|
||||
<ol>
|
||||
<li><a href="#a1.2.1">Элемент 1.2.1</a></li>
|
||||
|
|
@ -39,12 +41,11 @@
|
|||
<li><a href="#a4">Элемент 4</a></li>
|
||||
<li><a href="#a5">Элемент 5</a></li>
|
||||
</ol>
|
||||
|
||||
|
||||
</div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eos.
|
||||
|
||||
<script>
|
||||
|
||||
<script>
|
||||
var menu = new Menu({
|
||||
elem: $('#menu')
|
||||
});
|
||||
|
|
@ -53,9 +54,8 @@
|
|||
if (!e.value) return;
|
||||
alert(e.value);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue