Prototype.js 이용한 table 꾸미기

-

이미 알만한 분들은 다 안다는 prototype이다.

이미 prototype을 이용한 라이브러리들이 많은데 정리차원에서 간단한 예제하나 올려본다.
[code html]
<html>
 <head>
  <script src="prototype-1.6.0.3.js"></script>
  <style>
   .f1{
    border: 1px solid;
   }
   .odd{
    background-color: #EEE;
   }
  </style>
 </head>
 <body>
  <table class="f1">
   <tr>
    <td>hello</td>
    <td>hi</td>
   </tr>
   <tr>
    <td>hellor2</td>
    <td>hir22</td>
   </tr>
   <tr>
    <td>hello</td>
    <td>hi</td>
   </tr>
   <tr>
    <td>hello</td>
    <td>hi</td>
   </tr>
  </table>
 </body>
 <script>
  $$('tr:nth-child(odd)').each(function(r){   r.className = "odd"  });
 </script>
</html>
[/code]

본인이 생각하기 짧고 굻은 예제라 믿는다.
prototype의 $$을 사용해 CSS3 셀렉터로 홀수행의 tr에 odd 스타일 클래스를 지정해준다.
단 한줄로 테이블 홀수행을 연한 회색을 넣어서 보기좋게 만들수 있다.

Ajax모듈도 내장하고 있다.

요즘 jQuery, Dojo , Script.aculo.us , ext 등등 많은 라이브러리(프레임웍)들이 있는데 대부분이 Prototype.js을(를) 사용하니 한번쯤 메뉴얼을 읽어보시길 바란다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

C#에서 포인터 사용

-
훈스닷넷에 답글달고 정리 차원에서 남겨둔다. C#에서는 C에서 처럼 포인터를 사용할수가 있다. 빌드옵션에서 안전하지 않은 코드 check 해주고 다음과 같은 방법으로 한다.         static void Main(string[] args)         {             foo();         }         unsafe static void foo()         {             Int64 aa = 123456789;             Int64 bb = 123222;             IntPtr pt = new IntPtr(&aa);             IntPtr pt2 = new IntPtr(&bb);             Console.WriteLine(pt.ToString("x"));             Console.WriteLine(pt2.ToString("x"));             Int32 a = 1234231;             Int32 b = 154324;             IntPtr pt3 = new IntPtr(&a);             IntPtr pt4 = new IntPtr(&b);             Console.WriteLine(pt3.ToString("x"));             Console.WriteLine(pt4.ToString("x"));         } 확인해보면 Int64는 8바이트, Int32는 4바이트 만큼 주소가 증가했음을 알 수 있다.
자세한 내용 보기

WPF RichTextBox 와 Document의 바인딩

-
MVVM 패턴을 이용해서 View의 TextBox 등에 바인딩은 간단하게 <TextBox Text="{Binding mystring}"/> 이렇게 하면 된다. RichTextBox 도 마찬가지 일것 같지만, 해보면 안된다. 먼저 RichTextBox가 Content를 표현하는 구조를 알아야 되는데, 그건, 다음에 정리하고, 바인딩 하는 방법은 아래와 같다. 먼저 ViewModel 을  DependencyObject 를 상속고 DependencyProperty 를 정의해준다. public class MyViewModel : DependencyObject { public FlowDocument Document { get { return (FlowDocument)GetValue(DocumentProperty); } set { SetValue(DocumentProperty, value); } } public static readonly DependencyProperty DocumentProperty = DependencyProperty.Register("Document", typeof(FlowDocument), typeof(MyViewModel), new PropertyMetadata(OnDocumentChanged)); public void OnDocumentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { } } 그 다음 View 의 code-behind 의 생성자에 InitializeComponent(); Binding b = new Binding("Document"); b.Source = richTextBox; b.Mode = BindingMode.OneWay; BindingOperations.SetB
자세한 내용 보기

WPF 이미지위에 라인 그리기(WPF DrawLine on exist Image)

-
WPF 기초가 부족해 삽질 한참 하다가 별것 아닌 방법으로 해결했다. 처음엔 Canvas위에 그릴려고 Canvas객체를 가져왔는데 WinForm 처럼 Graphics를 가져올수 없었다. 구글링해보면 제목은 WPF이고 Graphics를 가져와 그걸로 그리는 예제가 있어서 쉽게 끝날줄 알았는데, 한참 헤매었다. 답은 간단하다. 캔버스에서 이미지 다음에 객체를 추가하면 끝난다.(허무했다 ㅠ ) <Canvas Name="myCanvas">     <Image ImageSource="....."/>     <Line X1="10" Y1="10" X2="100" Y2="200" /> </Canvas> 동적으로 추가하는  코드도 마찬가지다  myCanvas.Children.Add( new Line{X1=10,Y1=10,X2=100,Y2=200} ); ViewModel로 바인딩해서 많은 선을 그렸었는데 역시 마찬가지로 이미지다음에 Template을 추가해 바인딩 해놓으면 쉽게 된다.
자세한 내용 보기