Javascript, CSS, HTML and REST of web development: December 2011

Wednesday, December 28, 2011

приоритеты селекторов в CSS

Существует 4 правила по которым вычисляется специфичность селекторов:

Свойство с указанием !important (при наличии нескольких - выполняется правило идущее последним)
Указание свойства в style="" тега. Правило перекрывает все селекторы описанные в стилях.
Присутствие ID в селекторе: #some-id
Все атрибуты(в том числе и атрибут .class) и псевдоклассы в селекторе.
Селекторы с именами элементов: name=['textfield'] и псевдоэлементами.

И еще дополнительно: подробная статья на w3.org

Tuesday, December 27, 2011

использование атрибутов data для передачи в jQuery

HTML<а href="#" class="urlparam" data-num="10" data-text="text"></a>
<а href="#" class="urlparam" data-num="9" data-text="text1"></a>

JavaScript

$(".urlparam").click(function () {
    var num = $(this).data('num');
    var text = $(this).data('text');
});
И еще один интересный, передача сразу объекта JSON (отсюда):<span id="test" onclick="return {width: 250, height: 150, draggable: true, text: 'Трам-парам!'};">тест</span>

Tuesday, December 20, 2011

Часто используемые сокращения

На всякий случай для совсем уж greenhorns:

API - Application programming interface
CSS - Cascading stylesheets
DOM - Document Object Model
HTML - Hypertext Markup Language
HTTP - Hypertext Transfer Protocol
JSON - JavaScript Object Notation
REST - Representational State Transfer
RPC - Remote procedure call
URL - Uniform Resource Locator
XML - Extensible Markup Language

UPD

LTS - Long Term Support (долгосрочная поддержка)
FOUC - flash of unstyled content
AMD - Asynchronous Module Definition
RFC - Request for comments
SERP - Search Engine Rank Position
MIMI - Multipurpose Internet Mail Extensions

RFC - Документ из серии пронумерованных информационных документов Интернета, содержащих технические спецификации и стандарты, широко применяемые во всемирной сети.

min-width для IE

Если решения с таблицей, 1x1 прозрачным gif-ом и css-expressions - отбрасываем, тогда получается:

Разметка html


<div id=”min-width”>
<div class=”minwidth”>
<div class=”container”>
tut ku4a texta
</div>
</div>
</div>

Выход в случае с шириной больше 960px:

Код CSS

/* для браузеров, которые понимают */
#min-width {
  min-width:1000px;
  }
/* для IE */
* html .minwidth {
  border-left:960px solid #fff;
  border-right:40px solid #fff;/*min-width-960*/
  position:relative;
  float:left;
  z-index:1;
  }
* html .container {
  margin-left:-960px; /*-min-width*/
  margin-right:-40px; /*-(min-width-960)*/
  position:relative;
  float:left;
  z-index:2;
  }
Решение из комментариев отсюда: http://cssing.org.ua/2005/09/02/min-width-for-ie/

Wednesday, December 14, 2011

php:
$dir = opendir(DIR, '[YOUR DIRECTORY PATH HERE]');
@tmplist = readdir(DIR);
@list = grep (!/^\./, @tmplist);

tmpl:
<ul>
[$ foreach $file (sort @list) $]
<li><a href="/drupal-4-7-2/[+ $file +]">[+ $file +]</a></li>
[$ endforeach $]
</ul>

Tuesday, December 13, 2011

подключение Jquery в ExtJS

Все мы любим jQuery за ее прозрачный синтаксис и большое количество плагинов на все случаи жизни. И в моем проекте мне пришлось сбросить часть забот на один плагин jQuery, занимающийся трансформацией JSOn в XML.

После подключения jquery в индексном файле все перестало работать, попробовал добавить адаптер Jquery в ExtJS - та же история. Пришлось погуглить, оказывается предусмотрен специальный порядок подключения файлов в головном файле.

Base Library	Include Order	Get Library
Ext Standalone	ext-base.js ext-all.js (or your choice of files)	http://www.extjs.com/download
Yahoo! UI (.12+)	yui-utilities.js (or your choice of YUI base files) ext-yui-adapter.js ext-all.js (or your choice of files)	http://developer.yahoo.com/yui/
jQuery (1.1+)	jquery.js jquery-plugins.js // required jQuery plugins ext-jquery-adapter.js ext-all.js (or your choice of files)	http://jquery.com/ http://docs.jquery.com/Plugins
Prototype (1.5+) / Scriptaculous (1.7+)	prototype.js scriptaculous.js?load=effects (or whatever you want to load) ext-prototype-adapter.js ext-all.js (or your choice of files)	http://www.prototypejs.org/ http://script.aculo

Также на заметку: Using_Ext_With_jQuery, Using_jQuery_with_Other_Libraries

Monday, December 12, 2011

разница между Ext.Direct и Ext.Air

Ext.Direct Pack - set of server-side realizations (on different languages) of ala-web services complying with ExtDirect protocol.
Подборка реализаций Ext.Direct для разных языков

Ext.Air Pack - set of classes for running your application in Adobe AIR.
Подробный пост, раскрывающий суть Ext.Air

Спасибо plinyar, ответившему на мой вопрос на http://stackoverflow.com/