Rev. 2.73

Low Pro는 Prototype의 부족한 부분을 보충하는 자바스크립트 라이브러리입니다. Prototype 친화적인 DOM 생성기, $$함수 속도 최적화, Event.observe메서드의 메모리릭 문제 해결, 엘리먼트 이벤트를 편리하게 다루는 Event.addBehavior 메서드 등의 기능을 제공해 왔습니다. 이와 같은 유용한 확장기능들은 Prototype 1.6버전에서 해결한 부분도 있고 무력화 되어버린 부분도 있기 때문에 몇가지 메서드를 추가/수정한 Low Pro 0.5버전을 배포했습니다. 자세한 내용은 아래와 같습니다.

Low Pro 0.5

  • Event.onReady delegates to the new dom:loaded event:
    Except that as before if functions are added after the DOM is loaded they fire immediately.
  • DOMBuilder now delegates to Prototype’s new Element:
    Now difference in usage here though, just less code.
  • Low Pro’s DOM methods are now gone:
    Prototype core does everything you should need now.
  • Behavior.create() works just like the new Class.create():
    Yes, you can now create behavior classes that inherit from other behaviors (or indeed any other class). See the Prototype’s site for more information.
  • New core behaviors:
    The Remote and Observed behaviors are now included in the core so you can now turn normal links and forms into Ajaxy links and forms even more easily.
  • Event.addBehavior.reassignAfterAjax is now false by default:
    Normally, if you are relying on this behavior it’s much more efficient to move to a solution using event delegation. However, if you do want your behaviors reassigned to new content after Ajax calls then go ahead and set it back to true again. Another solution is to manually call Event.addBehavior.reload();

구글그룹 : http://groups.google.co.uk/group/low-pro
다운로드 : http://svn.danwebb.net/external/lowpro/tags/rel_0.5/dist/lowpro.js

Comments

starbox.gif

Starbox는 컨텐츠 평가방법으로 자주 사용되고 있는 별점추천의 UI 라이브러리입니다. PrototypeScriptaculous를 라이브러리를 필요로하며, PNG 이미지가 사용되었고, Ajax로 데이터를 송/수신합니다. CSS기반으로 표현되는 깔끔한 디자인과 다양한 포멧을 지원하는 것이 특징입니다.

How to use

  new Starbox(element, average, { stars: 10, buttons: 20, max: 10 });
  new Starbox(element, average, { overlay: 'big.png', ghosting: true });
  new Starbox(element, average, { onRate: yourAjaxSaveFunction, rerate: true });

Options

new Starbox(
  element,                  // the id of your element
  average,                  // average rating to start with
  {
    buttons: 5,             // the number of buttons (choices)
    className : 'default',  // or your own classname
    color: false,          // color of the colorbar
    duration: 0.6,          // duration of the effect across the bar, if used
    effect: { mouseover: false, mouseout: true } // or your own
    hoverClass: 'hover',    // or your own classname
    hoverColor: false,     // color of the colorbar when hovered
    ghostColor: false,     // color of the ghostbar
    ghosting: false,       // shows a ghost bar with the average when true
    identity: false,       // can be used with onRate
    indicator: false,      // or a string to add an indicator div after the starbox
                            // #{average}, #{max} and #{total} can be used
                            // example: '#{average}/#{max} out of #{total} votes'
    inverse: false,        // true, false
    locked: false,         // or true to load an disabled starbox
    max: 5,                 // maximum rating, that of the last star
    onRate: false,         // or function(element, info){}
                            // info = { identity: identity,
                            //          rated: rated,
                            //          average: average,
                            //          max: max,
                            //          total: total
                            //        }
    overlay: 'default.png', // or other png in same folder as starbox.css
    rated: false,          // or the previous rating cast by this user,
                            // this is used by rerate to see if the starbox
                            // needs to be locked
    ratedClass: 'rated',    // or your own
    rerate: false,         // or true to allows adjusting of previous rating
    stars: 5,               // the amount of stars
    total : 0               // the amount of votes cast
  }
);

Styling

  .starbox .stars { background: #cccccc; }
  .starbox .rated .stars { background: #dcdcdc; }
  .starbox .rated .hover .stars { background: #cccccc; }
  .starbox .colorbar { background: #1e90ff; }
  .starbox .hover .colorbar { background: #ffcc1c; }
  .starbox .rated .colorbar { background: #64b2ff; }
  .starbox .rated .hover .colorbar { background: #1e90ff; }
  .starbox .ghost { background: #a1a1a1; }
  .starbox .indicator { clear: both; }

Comments

tablekit.gif

TableKit은 테이블 태그를 데이터 그리드(Grid) 테이블로 사용할 수 있게하는 Prototype기반 자바스크립트 라이브러리입니다. 로우(row)의 짝수 라인을 시각적으로 구분하며, 컬럼(column)의 헤더(header)를 조작하여 소팅(sortiong) 및 리사이즈(resizing)할 수 있고, Ajax가 적용되어 셀(cell)의 내용을 부분적으로 수정할 수 있게 합니다. 자세한 사용법 및 예제를 살펴봅시다.

TableKit.Sortable.addSortType(
	new TableKit.Sortable.Type('status', {
		pattern : /^[New|Assigned|In Progress|Closed]$/,
		normal : function(v) {
			var val = 4;
			switch(v) {
				case 'New': val = 0; break;
				case 'Assigned': val = 1; break;
				case 'In Progress': val = 2; break;
				case 'Closed': val = 3; break;
			}
			return val;
		}
	})
);

TableKit.options.editAjaxURI = '/echo/';
TableKit.Editable.selectInput('urgency', {}, [
	['1','1'], ['2','2'], ['3','3'], ['4','4'], ['5','5']	
]);

TableKit.Editable.multiLineInput('title');
var _tabs = new Fabtabs('tabs');
$$('a.next-tab').each(function(a) {
	Event.observe(a, 'click', function(e){
		Event.stop(e);
		var t = $(this.href.match(/#(\w.+)/)[1]+'-tab');
		_tabs.show(t);
		_tabs.menu.without(t).each(_tabs.hide.bind(_tabs));
	}.bindAsEventListener(a));
});

Comments