Script.aculo.us 1.6.2가 릴리즈 되었습니다. 이번 업데이트는 기능 추가없이 주로 버그픽스가 이루어졌습니다. draggable의 논리 문제, slider handle이 출력되지 않는 문제, Effect.Move 효과중에 엘리먼트가 튀는 문제 등이 수정되었다고 합니다. 자세한 패치 내역은 아래와 같습니다.
* Fix a problem in the drag and drop logic if an reverting/drag ending draggable was initialized for a new drag (for example by clicking repeatedly) for all cases where the default start/revert/end-effects are used, fixes
* Fix possible memory leaks with Draggables, fixes
* Throw nicer errors when requires script.aculo.us libraries are not loaded, fixes
* Make slider handles work when not displayed initially by using CSS width/height, fixes
* Update sortable functional test with onUpdate counter
* Make more Element extensions unit tests work on Safari
* Add the assertMatch unit test assertion for asserts with RegExps
* Fix a problem with Effect.Move causing "jumping" elements because of very low float numbers in some situations
* Fix a missing semicolon in dragdrop.js, fixes
* Fix a slight inaccuracy with Effect.Scale that could lead the scaling to be one pixel off
* Be more prototypish with Effect.Transitions.linear
* Make Effect.Scale recognize font sizes that use the pt unit, fixes
* Fix IE hack in Effect.Opacity, fixes
* Fix IFRAME layout fix for IE and Autocompleter, fixes
* Fix only option in onEmptyHover, fiex
* Fix Effect.BlindDown and SwitchOff handling of supplied callbacks, fixes
* Fix a problem with field focus on Ajax.InPlaceEditor and loading external text, fixes
* Do not attempt to scroll if scrollspeed is 0/0, fixes
* Fix a problem with Sortable Tree serialization, fixes
* Fix an endless loop with sliders, fixes
* Make autocompleter work with update DIVs that have scrollbars, fixes
* Corrected options parsing on switchoff effect, fixes
Spotty 블로그는 비-프로그래머를 위한 AJAX 기능추가 툴킷인 LaCo를 공개하였다. 자바스크립트를 잘 모르는 사용자를 위해 Ajax를 손쉽게 다루는 방법을 제시한다. <A> 또는 <DIV> 태그에 임의의 애트리뷰트(attribute)를 사용함으로 자바스크립트는 손댈 필요도 없이 Ajax가 구현된다. 다음의 4가지방법으로 적용할 수 있다.
자동(페이지 로딩) - <DIV>태그에 'laco_src' 애트리뷰트를 추가하여 해당 페이지 로딩과 동시에 발동한다. 마우스 클릭 - A태그에 'laco_target' 애트리뷰트를 추가하여 사용자가 클릭할 때 발동한다. 마우스 토글 - 마우스 클릭과 동일하지만 다시한번 클릭하여 숨길 수 있다. 그리고 두번째 토글 부터는 다시금 Ajax요청을 하지 않는다. 마우스 오버 - 마우스 토글과 동일하지만 클릭되는 시점이 아니라 오버되는 시점에 발동한다.
자바스크립트로 만들어진 검색엔진 키워드 하이라트입니다. UTF-8 유니코드를 지원하는 검색엔진에서 링크되어 온 경우 방문객이 키워드를 알아보기 쉽도록 리퍼러를 분석하여 하이라이트(강조)합니다. 외국 사이트에서는 심심찮게 사용되고 있으며, 구글검색의 '저장된 페이지'에서 경험해 보셨을 겁니다.
국내 대표 포털사이트 네이버, 다음, 야후코리아, 엠파스, MSN한국 등은 하나같이 EUC-KR을 사용하고 있으므로 자바스크립트로는 분석이 어려운 실정입니다. 영문이야 상관없습니다만,(귀찮은 짓은 안하겠습니다.) 구글, 야후닷컴, MSN, AOL, Altavista, feedster, lycos 등은 UTF-8 URI를 사용함으로 이를 통해 연결된 경우에 스크립트가 발동합니다. 아래의 링크에서 직접 확인해 보세요.
이 자바스크립트는 Scott Yang씨가 최초로 작성하였으며 현재 'Search Engine Keyword Highlight'라는 이름으로 배포되고 있습니다. 이 곳에 소개된 코드는 한글을 지원하게 하고 아무곳에나 쑤셔넣기(?) 좋게 커스터마이징 한것이며 기본설계는 동일합니다. 별도의 라이브러리를 필요로 하지 않으며, 스타일시트와 몇몇 변수를 조정해주면 쉽게 추가할 수 있습니다. (당연히 UTF-8환경에서만 작동합니다.)
// Search Engine Keyword Highlight (http://fucoder.com/code/se-hilite/) // @author Scott Yang <http://scott.yang.id.au/ > @version 1.3 // @after customized by Firejune <http://firejune.com > var Hilite = {
max_nodes: 1000, // 하이라이트 될 노드의 최고 수
style_name: 'hilite', // 스타일시트의 이름
debug_referrer: '',
search_engines: [
['^http://(www)?\\.?google.*', 'q='],
['^http://search\\.yahoo.*', 'p='],
['^http://search\\.msn.*', 'q='],
['^http://search\\.aol.*', 'userQuery='],
['^http://(www\\.)?altavista.*', 'q='],
['^http://(www\\.)?feedster.*', 'q='],
['^http://search\\.lycos.*', 'query=']
],
hilite: function(elementid){ if(document.referrer.indexOf(document.domain) != -1
|| !document.referrer) return var q = this.debug_referrer ? this.debug_referrer : document.referrer var e = null
q = this.decodeReferrer(q) if (q && ((elementid && (e = document.getElementById(elementid)))
|| (e = document.body))) this.hiliteElement(e, q)
},
decodeReferrer: function(referrer){ var query = null varmatch = newRegExp('') for (var i = 0; i < this.search_engines.length; i ++) { match.compile(this.search_engines[i][0], 'i') if (referrer.match(match)) { match.compile('^.*'+this.search_engines[i][1]+'([^&]+)&?.*$')
query = referrer.replace(match, '$1') if (query) {
query = decodeURIComponent(query)
query = query.replace(/\'|"/, '')
query = query.split(/[\s,\+\.]+/) return query
}
}
} return null
},
hiliteElement: function(elm, query){ if (!query || elm.childNodes.length == 0) return var qre = newArray() for (var i = 0; i < query.length; i ++) {
query[i] = query[i].toLowerCase()
qre.push(query[i])
}
qre = newRegExp(qre.join("|"), "i") var stylemapper = {} for (var i = 0; i < query.length; i ++)
stylemapper[query[i]] = this.style_name+(i+1) var textproc = function(node) { varmatch = qre.exec(node.data) if (match) { var val = match[0] var k = '' var node2 = node.splitText(match.index) var node3 = node2.splitText(val.length) var span = node.ownerdocument.createElement('SPAN')
node.parentNode.replaceChild(span, node2)
span.className = stylemapper[val.toLowerCase()]
span.appendChild(node2) return span
} else return node
} this.walkElements(elm.childNodes[0], 1, textproc);
},
walkElements: function(node, depth, textproc){ var skipre = /^(script|style|textarea)/i var count = 0 while (node && depth > 0) {
count ++ if (count >= this.max_nodes) { var handler = function() {Hilite.walkElements(node, depth, textproc)} setTimeout(handler, 50) return
} if (node.nodeType == 1) { if (!skipre.test(node.tagName) && node.childNodes.length > 0) {
node = node.childNodes[0]
depth ++
continue
}
} else if (node.nodeType == 3) node = textproc(node) if (node.nextSibling) node = node.nextSibling else {
while (depth > 0) {
node = node.parentNode
depth -- if (node.nextSibling) {
node = node.nextSibling break
}
}
}
}
}
}
// 사용하기
Hilite.hilite('content') // 컨텐츠를 둘러싸고 있는 엘리먼트의 ID(온로드 이벤트 핸들러에 추가)
Comments