| Все | Коллективные | Персональные | TOP |
 → |
Блог им. igorok → У кого сколько в тетрис?
Кто сколько очков набрал в тетрис?
JavaScript программирование → Jquery UI: sortable и сохранение позиции айтема
Как по мне, документация к JQuery достаточно сыроватая и неудобная. Для того что бы разобраться с документацией по UI, необходимо достаточно много пописать использованием JQuery, т.е. дойти до такого уровня, когда документация уже не нужна:)
Рассмотрим юзер интерфейс Sortable. Исходя из документации и примера, все кажется понятным, проблемы и непонятки могут возникнуть в случае, когда возникнет необходимость сохранить последовательность наших айтемов.
Решение:
В данном примере данные сириализуются и заносятся в текстовое поле с id=«test-log»
Рассмотрим юзер интерфейс Sortable. Исходя из документации и примера, все кажется понятным, проблемы и непонятки могут возникнуть в случае, когда возникнет необходимость сохранить последовательность наших айтемов.
Решение:
<style>
#test-list { list-style: none; padding: 0; margin: 0 40px; }
#test-list li { margin: 0 0 10px 0; background: #eaf3fa; padding: 15px; }
#test-list .handle { float: left; margin-right: 10px; cursor: move; }
#test-log { padding: 5px; border: 1px solid #ccc; }
</style>
<script type="text/javascript" src="{ latest jquery release }"></script>
<script type="text/javascript" src="{ ui core }"></script>
<script type="text/javascript" src="{ ui sortable }"></script>
<script type="text/javascript">
// When the document is ready set up our sortable with it's inherant function(s)
$(document).ready(function() {
$("#test-list").sortable({
handle : '.handle',
update : function () {//здесь делаем действие, которое нам нужно, например аяксовый вызов сохранения
$("input#test-log").val($('#test-list').sortable('serialize'));
}
});
});
</script>
<ul id="test-list">
<li id="listItem_1"><img src="arrows.png" class="handle" alt="move" />Item 1 with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a></li>
<li id="listItem_2"><img src="arrow.png" class="handle" alt="move" />Item 2</li>
<li id="listItem_3"><img src="arrow.png" class="handle" alt="move" />Item 3</li>
<li id="listItem_4"><img src="arrow.png" class="handle" alt="move" />Item 4
<p>Perhaps you want to add a form in here?</p>
<p>Text:<br /><input type="text" /></p>
<p>And a textarea<br /><textarea></textarea></p>
</li>
</ul>
<label for="test-log"><strong>Resultant order of list</strong></label>
<input type="text" size="70" id="test-log" />
#test-list { list-style: none; padding: 0; margin: 0 40px; }
#test-list li { margin: 0 0 10px 0; background: #eaf3fa; padding: 15px; }
#test-list .handle { float: left; margin-right: 10px; cursor: move; }
#test-log { padding: 5px; border: 1px solid #ccc; }
</style>
<script type="text/javascript" src="{ latest jquery release }"></script>
<script type="text/javascript" src="{ ui core }"></script>
<script type="text/javascript" src="{ ui sortable }"></script>
<script type="text/javascript">
// When the document is ready set up our sortable with it's inherant function(s)
$(document).ready(function() {
$("#test-list").sortable({
handle : '.handle',
update : function () {//здесь делаем действие, которое нам нужно, например аяксовый вызов сохранения
$("input#test-log").val($('#test-list').sortable('serialize'));
}
});
});
</script>
<ul id="test-list">
<li id="listItem_1"><img src="arrows.png" class="handle" alt="move" />Item 1 with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a></li>
<li id="listItem_2"><img src="arrow.png" class="handle" alt="move" />Item 2</li>
<li id="listItem_3"><img src="arrow.png" class="handle" alt="move" />Item 3</li>
<li id="listItem_4"><img src="arrow.png" class="handle" alt="move" />Item 4
<p>Perhaps you want to add a form in here?</p>
<p>Text:<br /><input type="text" /></p>
<p>And a textarea<br /><textarea></textarea></p>
</li>
</ul>
<label for="test-log"><strong>Resultant order of list</strong></label>
<input type="text" size="70" id="test-log" />
В данном примере данные сириализуются и заносятся в текстовое поле с id=«test-log»
JavaScript программирование → Симуляция задержки между fade in/out эффектами в JQuery
Jquery хорош тем, что позволяет пименять так называемые «цепочные решения».
Решение в лоб:
Показывает и скрывает элемент с id=«foo».
Если нужно красиво показать блок и так же красиво его скрыть, используем fade-in-fade-out эффект:
В течении 2 секунд (2000 мс) блок будет проявляться, потом в течении 2 секунд блок будет скрываться. Если нам необходимо установить задержку между fadeIn и fadeOut, тогда делаем так:
Установлена задержка в 5 секунд.
Для проявления полупрозрачности (50% — второй параметр) с задержкой в 3 секунды можно воспользоваться следующим кодом:
Рассмотрим пример задержки:
1. Проявить элемент в течении двух секунд (прозрачность от 0 до 1)
2. Задержать прозрачность на уровне 1 в течении 5 секунд
3. Прятать блок в течении 2 секунд (прозрачность с 1 до 0)
Решение:
Решение в лоб:
$("#foo").show().hide();
Показывает и скрывает элемент с id=«foo».
Fade-in-fade-out
Если нужно красиво показать блок и так же красиво его скрыть, используем fade-in-fade-out эффект:
$(document).ready(function() {
$("#foo").fadeIn(2000).fadeOut(2000);
});
$("#foo").fadeIn(2000).fadeOut(2000);
});
В течении 2 секунд (2000 мс) блок будет проявляться, потом в течении 2 секунд блок будет скрываться. Если нам необходимо установить задержку между fadeIn и fadeOut, тогда делаем так:
$(document).ready(function() {
$("#foo").fadeIn(2000).delay(5000).fadeOut(2000);
});
$("#foo").fadeIn(2000).delay(5000).fadeOut(2000);
});
Установлена задержка в 5 секунд.
Фокусы с задержкой без delay
Для проявления полупрозрачности (50% — второй параметр) с задержкой в 3 секунды можно воспользоваться следующим кодом:
$("#foo").fadeTo(3000, 0.5);
Рассмотрим пример задержки:
1. Проявить элемент в течении двух секунд (прозрачность от 0 до 1)
2. Задержать прозрачность на уровне 1 в течении 5 секунд
3. Прятать блок в течении 2 секунд (прозрачность с 1 до 0)
Решение:
$(document).ready(function() {
$("#foo").fadeIn(2000).fadeTo(5000, 1).fadeOut(2000);
});
$("#foo").fadeIn(2000).fadeTo(5000, 1).fadeOut(2000);
});
Задержка перед стартом
$(document).ready(function() {
$("#foo").fadeTo(3000, 0).fadeIn(2000)
.fadeTo(5000, 1).fadeOut(2000);
});
$("#foo").fadeTo(3000, 0).fadeIn(2000)
.fadeTo(5000, 1).fadeOut(2000);
});
JavaScript программирование → Изменение размера шрифта в теле HTML документа
Иногда приходится выполнять достаточно непонятные задания заказчика или описанные в ТЗ. Одним из маразмов является онлайн изменение размера шрифта тела HTML. Зачем это надо я не знаю. Наверно, просто эффектная, никому ненужная фишка.
Сделаем это при помощи яваскриптового фреймворка JQuery и ихнего же UI, что бы было красивее:)
Итак, имеем три кнопки:
<div id="cahnge-font-size">
<input class="ui-state-default ui-corner-all" id="decreaseFont" type="button" name="#" value="Меньше">
<input class="ui-state-default ui-corner-all" id="resetFont" type="button" name="#" value="Нормально">
<input class="ui-state-default ui-corner-all" id="increaseFont" type="button" name="#" value="Больше">
</div>
Яваскрипт будет выглядеть так:
<script type="text/javascript">
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('html').css('font-size');
$("#resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$("#increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$("#decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});
</script>
Сделаем это при помощи яваскриптового фреймворка JQuery и ихнего же UI, что бы было красивее:)
Итак, имеем три кнопки:
<div id="cahnge-font-size">
<input class="ui-state-default ui-corner-all" id="decreaseFont" type="button" name="#" value="Меньше">
<input class="ui-state-default ui-corner-all" id="resetFont" type="button" name="#" value="Нормально">
<input class="ui-state-default ui-corner-all" id="increaseFont" type="button" name="#" value="Больше">
</div>
Яваскрипт будет выглядеть так:
<script type="text/javascript">
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('html').css('font-size');
$("#resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$("#increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$("#decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});
</script>
Фреймворки → Проблемы отображения Datepicker в Dialog (JQuery фреймворк)
Наверно, это баг:) Когда вызываешь диалоговое окно (в моем случае оно было модальным) и в нем пытаешься вызвать Datepicker(календарик для выбора даты), то календарик оказывается под диалоговым окном. Естественно, пользоваться таким календариком не очень удобно:)
Первое, что пришло в голову — z-index. Оно и естественно, как фиксить?
Из того, что нашел — все сводилось к допиливанию кода именно JQuery, я противник такого варварства, т.к. не известно, где это может всплыть (это же говно:)).
Сделал так:
Первое, что пришло в голову — z-index. Оно и естественно, как фиксить?
Из того, что нашел — все сводилось к допиливанию кода именно JQuery, я противник такого варварства, т.к. не известно, где это может всплыть (это же говно:)).
Сделал так:
$(function() {
$("#date_publish").datepicker();//собственно вызов нашего календаря
$("#ui-datepicker-div").css("z-index", 1000000); //задаем z-index
});
$("#date_publish").datepicker();//собственно вызов нашего календаря
$("#ui-datepicker-div").css("z-index", 1000000); //задаем z-index
});
Фреймворки → плагин Star Rating для JQuery
Есть такой интересный плуг для организации оценок всего чего угодно в один клик под яваскриптовый фреймворк JQuery.
Здесь можно скачать и посмотреть на него.
http://plugins.jquery.com/project/MultipleFriendlyStarRating
http://www.fyneworks.com/jquery/star-rating/
Проблема с которой я столкнулся — невозможность задизейблить звезды после того, как пользователь проголосовал. Как минимум это приводит к заблуждению пользователя.
Решение:
$('.auto-submit-star').rating({
callback: function(value, link){
// 'this' is the hidden form element holding the current value
// 'value' is the value selected
// 'element' points to the link element that received the click.
$("#form-rating").ajaxSubmit({
success:function(data) {
//именно здесь начинаем дизейблить звезды
$("div", "#form-rating")
.removeClass("star_live")
.addClass("star_readonly")
.unbind("mouseover")
.unbind("mouseout")
.unbind("click");
//здесь закончили
$('#message').text("Your vote was counted");
},
error:function(data) {
form.fadeOut("slow");
$('#message').text("Error!");
}
});
}
});
Здесь можно скачать и посмотреть на него.
http://plugins.jquery.com/project/MultipleFriendlyStarRating
http://www.fyneworks.com/jquery/star-rating/
Проблема с которой я столкнулся — невозможность задизейблить звезды после того, как пользователь проголосовал. Как минимум это приводит к заблуждению пользователя.
Решение:
$('.auto-submit-star').rating({
callback: function(value, link){
// 'this' is the hidden form element holding the current value
// 'value' is the value selected
// 'element' points to the link element that received the click.
$("#form-rating").ajaxSubmit({
success:function(data) {
//именно здесь начинаем дизейблить звезды
$("div", "#form-rating")
.removeClass("star_live")
.addClass("star_readonly")
.unbind("mouseover")
.unbind("mouseout")
.unbind("click");
//здесь закончили
$('#message').text("Your vote was counted");
},
error:function(data) {
form.fadeOut("slow");
$('#message').text("Error!");
}
});
}
});
Фреймворки → Новый раздел Jquery плагины и решения
Jquery плагины и решения — открыт новый раздел. Здесь будут публиковаться интересные решения использования Java Script фреймворка JQuery и плагинов под него.
←
сюда
туда
→