uchima.blog: jsonengine用のアプリを簡単に書けるようなjQueryプラグイン書いた

アプリのJavaScriptはこんな感じで書けるようにしてみた。

$(function() {

$('#_POST').click(function(){
  $('#myDoc-list')._POST($('#myDoc'));
});

$('#_GET').click(function(){
  $('#myDoc-list')._GET($('#myDoc'));
});

$('#_PUT').click(function(){
  $('#myDoc-list')._PUT($('#myDoc'));
});

$('#_DELETE').click(function(){
  $('#myDoc-list')._DELETE($('#myDoc'));
});

$('#_SEARCH').click(function(){
  $('#myDoc-list')._GET($('#myDoc-search'));
});

$('#_SEARCH').click();

});

実際のデモはここ。 http://uchjava.appspot.com/samples/jquery/jquery.jsonengine.js/example.html

リストの項目をクリックしたら編集出来る。

htmlはこんな感じ。

<body>
<h1>Sample by jquery.jsonengine.js</h1>
<!-- 
<form id="myDoc" class="_jeClearForm" action="/_je/myDoc">
 -->
<form id="myDoc">
<input type="text" name="msgTxt" value=""/><label>msgTxt</label><br/>
<input type="text" name="_docId" value=""/><label>_docId</label><br/>
<input type="text" name="_createdAt" value=""/><label>_createdAt</label><br/>
<input type="text" name="_updatedAt" value=""/><label>_updatedAt</label><br/>
<input type="button" id="_POST" value="POST"/>
<input type="button" id="_GET" value="GET"/>
<input type="button" id="_PUT" value="PUT"/>
<input type="button" id="_DELETE" value="DELETE"/>
<input type="reset"/>
</form>
<form id="myDoc-search">
<input type="text" name="msgTxt" value=""/>
<input type="button" id="_SEARCH" value="SEARCH"/>
</form>
<h2>messages</h2>
<p id="myDoc-list"></p>

明日はこのアプリ自体のJavaScriptソースを書かなくてもいいようにクラスとidの命名規則で動くように作る。そこまで出きたらjsonengineのBBSとjson-noteをこのプラグインで書けるようにチャレンジ。

多分そこまで出来るようになったらもっとjsonengineの利用が増えるんじゃないかと。

uchima.blog

2011年2月25日金曜日

jsonengine用のアプリを簡単に書けるようなjQueryプラグイン書いた

0 件のコメント:

コメントを投稿