Ох, кажется, я сделал свой первый jQuery-плагин =)

включи картинки включи ааааааааааа

Он называется JACG: Just Another Corners&Gradients (просто еще одни углы и градиенты), и он просто работает.

Фишка в том, что он старается быть как можно более нативным и использовать самые лучшие технологии, доступные на запущенном браузере (например, в Opera <= 10.10 используется SVG-градиент и на нем же уголки, а в 10.50 - SVG-градиент и CSS-уголки. CSS-уголки и градиенты на Firefox >= 3.6, CSS-уголки и градиенты картинкой - тоже мое приложение - на 3.5 и ниже). Код появился в моих личных проектах. Когда я стал его использовать сразу в двух, решил сделать плагином, а не копипастом.

Оно все размещено в проекте на Launchpad - код, багтрекер и все такое. А еще есть страничка на jQuery, там можно скачать плагин и проголосовать за него. Но качать лучше Bazaar'ом, чтобы потом обновлять удобно было и вообще, VCS же. bzr branch lp:jacg

Постовой: все для lineage 2 на gamesgold.ru
2010-02-15 19:44:04 Теги: web20 javascript markup | Комментарии

Допустим, нам нужно использовать один скрипт для нескольких страниц (а это делать нужно, ибо экономия HTTP-запросов. по поводу того, что "качать только что надо сейчас" - ну все равно же кеш). Как определить разные действия в зависимости он страниц?

Да очень просто.

html:
<head> ... <meta name="internal" content="mainpage" /> </head>
js: $(window).load(function (){ ... window.rel = $('meta[name=internal]').attr('content'); }); а теперь в зависимости от этой переменной делаем то, что надо. Например:
if (window.rel == 'mainpage') {
     $('#sidebar').removeClass('noJs').slideDown();
}
else if (window.rel == 'comments') {
     $('.comment').addClass('js');
}

Но самая фишка в том, что умеют шаблоны Django ;) в index.djhtml:

<head>
     ...
     <meta name="internal" content="{% block pagerel %}unknown{% endblock %}" /> {# For Javascripts, etc. #}
</head>

И в наследующих шаблонах ставим все как надо. Например, post.djhtml: {% block pagerel %}blogpost{% endblock %}

Вот и все!
Постовой: Доставка - купить недвижимость в центре москвы свежие комментарии, только на этом сайте подарки 8 марта лучшее у нас, дизель генераторы wilson оценки, справки специалистов.
2010-02-09 17:32:45 Теги: django javascript | Комментарии
...вместо Flash (:

Я считаю, что флеша не должно быть везде и много. В интернете на нем должны быть только загрузчики файлов. Flash надо использовать по назначению - для создания сложных мультфильмов. Веб-приложения вполне могут обойтись без флеш-элементов..

Но как быть с играми? Да, при знании jQuery (а он намного проще ActionScript!!) можно сделать простую игру ;)

Пример - сборка АК, подсказал один товарищ. Надо не так много: средство против лени, фото разобранного автомата (идите в гугл!), графический и текстовый редакторы, нормальный браузер (Safari, Chrome или Firefox).

Я не буду подробно расписывать каждую строчку - скажу лишь, что с помощью jQueryUI мы придаем деталям draggable и создаем цели, куда они droppable. Тут сильно не доделано все - можно деталь поместить не в то место и отображается все это только в консоли. Доработаете и сделаете таймер - будет вам игра :)

<!DOCTYPE HTML>
<html><head><title>AK Game</title>
<script src="http://myfreeweb.ru/media/mfwjs/jquery.1.3.2.min.js" type="application/x-javascript"></script>
<script src="http://myfreeweb.ru/media/mfwjs/jquery-ui-1.7.2.custom.min.js" type="application/x-javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.piece').draggable({ cursor: 'crosshair' });
$('#t_2').droppable({ drop: function(event, ui){
console.log('dropped to 2'); } });
$('#t_3').droppable({ drop: function(event, ui){
console.log('dropped to 3'); } });
$('#t_4').droppable({ drop: function(event, ui){
console.log('dropped to 4'); } });
});
</script>
<style type="text/css">
.target { position: absolute; }
#t_2 { margin: 55px 0px 0px 215px; width: 120px; height: 150px; }
#t_3 { margin: 10px 0px 0px 277px; width: 177px; height: 22px; }
#t_4 { margin: 5px 0px 0px 100px; width: 128px; height: 32px; }
</style></head>
<body>
<div id="ak">
  <div class="target" id="t_2"></div><div class="target" id="t_3"></div><div class="target" id="t_4"></div>
  <img src="1.png" alt="включи картинки!"/>
</div>
<img src="2.png" id="2" class="piece" alt="включи картинки!"/>
<img src="3.png" id="3" class="piece" alt="включи картинки!"/>
<img src="4.png" id="4" class="piece" alt="включи картинки!"/>
</body></html>
СКАЧАТЬ демо (картинки + код выше)
2009-11-30 20:32:47 Теги: test web20 apps javascript markup | Комментарии

Slug - короткое название статьи.

У Django есть нужные средства. Но стоит ли нагружать сервер? Да ладно, нагрузки там почти никакой, но удобно ли? Иногда хочется исправить то, что сделано автоматически.

В общем, лучше генерировать на лету с помощью syncTranslit. Наша задача - встроить это в админку Django. На первый взгляд кажется сложным - там же кучи шаблонов и видов, не разберешься в них... Стоп, а подумать?

Оказалось довольно просто: в change_form.html надо заменить

{% if adminform and add %}
<script type="text/javascript">
document.getElementById("{{ adminform.first_field.auto_id }}").focus();
</script>
{% endif %}

на

{% if adminform and add %}
   <script type="application/x-javascript"
     src="http://myfreeweb.ru/media/mfwjs/jquery.1.3.2.min.js"></script>
   <script type="application/x-javascript"
    src="http://myfreeweb.ru/media/mfwjs/jquery.synctranslit.min.js"></script>
   <script type="text/javascript">
    document.getElementById("{{ adminform.first_field.auto_id }}").focus();
    $(document).ready(function () {
    if ($('#id_slug') && $('#id_name')) {
    $('#id_name').syncTranslit({destination: 'id_slug', urlSeparator: '_'});
    }
    });</script>
{% endif %}

И все хорошо :) Конечно, если поля называются не name и slug (самые очевидные названия), то надо поменять их.

2009-11-13 17:34:38 Теги: web20 django javascript | Комментарии

Если эти слова (в названии поста) кажутся непонятными - ты не веб-разработчик. А если всё понятно - то я сделал вот это:

Validate!

Тащи на панель закладок и пользуйся ;) Можно проверить эту страницу, например.

2009-10-02 15:57:19 Теги: javascript | Комментарии

Недавно на Хабрахабре проскакивала новость про обновление jQTouch. Это такой плагин к известному JavaScript-фреймворку jQuery, позволяющий очень просто создавать веб-приложения для тачфонов - телефонов с сенсорным экраном, причём с пальцеориентированным интерфейсом. Каким и является iPhone. А так же HTC Hero, Dream, Magic - на Android - и куча разных WM-коммуникаторов с оболочками. Вот последнее у меня есть.

iphone_screenshot_3

Показывать буду на примере тач-версии этого блога. (Кстати, айфонщики, добавляйте. Будете читать.) Веб-приложение представляет из себя простую html-страницу, в которую нужно подключить jQuery и jQTouch, а так же тему для второго.

Я добавил в head вот это:

<script type="application/x-javascript" src="/media/jqtouch/jquery.1.3.2.min.js" charset="utf-8"></script>
<script type="application/x-javascript" src="/media/jqtouch/jqtouch.min.js" charset="utf-8"></script>
<style type="text/css" media="screen">@import "/media/themes/jqt/theme.min.css";
@import "/media/jqtouch/jqtouch.min.css";</style>

разве что тема другая. плюс ещё свой стиль для поста. Тебе надо будет не прямо это скопировать, а ещё поправить пути.

После подключения надо инициализировать интерфейс. Это делается функцией $.jQTouch() - и всё, больше ничего не надо писать на JS. Если, конечно, не надо AJAX'ом подгружать ничего. У меня вот так:

$.jQTouch({
    icon: 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png',
    statusBar: 'black-translucent',
    preloadImages: [
        '/media/themes/jqt/img/chevron_white.png',
 *пути_к_всяким_картинкам*
        ]
});

Разумеется, здесь надо подправить загружаемую графику на ту, что ты чаще используешь. Для скорости. И иконку, она будет иконкой приложения в меню iPhone.

Теперь можно просто использовать обычные XHTML-теги. Но сначала расскажу о самом главном. Страницы - главное в приложении. Страница представляет из себя простой блок (div) c (понятным) id. Первый див будет первой страницей, которая будет открываться при нажатии на иконку в телефоне. Чтобы переходить между страницами, на первой должна быть ссылка на вторую, то есть a href="#id_страницы".

Для создания верхнего бара делаем вложенный в страницу div class="toolbar". Заголовок в нём - просто обычный h1. Кнопка "назад" - a class="back button" href="#id_задней_страницы". Вообще, чтобы узнать больше о элементах интерфейса, смотрите исходный код демки.

А теперь самое главное - интеграция с Django. Мы же делаем тач-версию блога, так? Я не знаю, как у тебя устроены модели и виды, но у меня список постов - content.object_list. Просто делаем шаблон, в котором в head вся инициализация, описанная выше, а в body... Особая Django'вская магия ;) Начнём с главной страницы. Это - список постов блога. По нажатию на один из них - страница с самим постом. Логично, да?

<div id="main">
  <div class="toolbar"><h1>MyFreeWeb Touch</h1></div>
  <div id="content">
    <ul>
      {% for post in content.object_list %}
      <li class="arrow"><a href="#{{ post.slug }}">{{ post.name }}</a></li>
       {% endfor %}
    </ul>
  </div>
</div>

Мало кода, да? Просто заголовок и список постов. А теперь делаем настоящую магию. Для каждого поста создаём свою страницу с id равным его slug (короткое имя на латинице, с _ вместо пробелов, и без лишних символов. Переводить как это слово - не знаю.) - мы ссылались на эти страницы в главной.

{% for post in content.object_list %}
<div id="{{ post.slug }}">
  <div class="toolbar">
    <a class="back button" href="#main">Назад</a>
      <h1>MFW:{{ post.name }}</h1>
  </div>
  <div class="post">{{ post.text|safe|urlize }}</div>
  <div class="info">Написан {{ post.date }}{% if post.tags %} | 
Теги (открываются в обычной версии):{% for tag in post.tags.filter %}
<a href="/tag/{{tag.name}}">{{ tag.name }}</a> {% endfor %}{% endif %}</div>
</div>
{% endfor %}

Да вот и всё. Вот так Это выглядит на моём AnyDATA ASP-505A:

asp_screenshot_1asp_screenshot_2

А вот как на iPhone, спасибо @_corwin_ (follow! follow!!!):

iphone_screenshot_0iphone_screenshot_1iphone_screenshot_2

Короче, теперь веб-приложения для iPhone и коммуникаторов вообще делать очень просто. Вот такие дела.

Постовой:
Дома лучше, а то вдруг пробки. вызов ветеринара на дом
Прорезные карманы
2009-09-01 17:40:49 Теги: web20 django blog apps javascript markup | Комментарии