mond-tech 忍者ブログ
焼肉屋さんが大好きです。いや、そうでも無い。 たぷたぷになってきてピンチです。
20
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

クリックした部分を直接編集させるjQuery。
世にいくつかあるんだけれど、自分的にしっくりこなかったので随分前に書いたヤツを今頃出してみる。

サンプル

jquery-editable-text

使い方は

スクリプト部

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-editable-text.js"></script>

$(function() {
    $("#data1").editableText();
}


こんだけ。

<div id="data1" class="box">あいうえお<br/>
あいうえお<br/>
あいうえお<br/>
</div>


divで囲んだ部分をクリックすると編集出来る。

jQuery-UIのエフェクトを食えるようにしているので、jQuery-UIをロードしていれば

$("#data1").editableText({
    effect: [ "highlight", {}, 1000 ]
});


こんな感じで編集に入る際のエフェクトを設定できる。

編集の前後で、関数をフックさせる事も可能。非同期で何かやりたい場合等に便利。


$("#data2").editableText({
    before: function(data) {
        alert("before: " + data);
        return "hoge<br>fuga";
    },
    after: function(data) {
        alert("after: " + data);
        return "HOGE<br>FUGA";
    }
});


beforeは、エディットに入る前に叩かれ、返した値が編集テキストとして表示される。
afterは、編集後叩かれ、返した値が、画面に表示される。

編集モードの時に表示されるボタンのラベルを変えたい場合は

label: "submit"


こんな感じで。

編集状態に入るきっかけを、ボタン等他のものに変えたい場合、

$("#data3").editableText({
    trigger: "#edit-3"
});


triggerの値として、そのきっかけとなるエレメントのIDを指定。

編集状態のテキストボックス、ボタンのスタイルは

editable-text-but
editable-text

上記2つのクラス名で定義してあるので、よろしくどうぞ。
PR
テキストエリアで、選択した部分を、任意のタグで囲むJavaScript +
Firefoxで置換後、スクロールがTOPに戻ってしまう不具合が起こらないようにしたスクリプト。

http://archiva.jp/web/javascript/getRange_in_textarea.html
ここのを元にちょろちょろ変えた。冗長っぽい部分省いてみたり。

var isIE = (navigator.appName.indexOf('Microsoft') > -1) ? 1 : 0;
function insertTag(elementId, tag) {
    var o = document.getElementById(elementId);
    var top = o.scrollTop;
    var val = o.value;
    var pos = getCursorPosition(o);
    if (pos['s'] != pos['e']) {
        o.value =
            val.slice(0, pos['s']) +
            '<'+tag+'>' + val.slice(pos['s'], pos['e']) + '</'+tag+'>' +
            val.slice(pos['e']);
        o.scrollTop = top;
        if (!isIE) { o.setSelectionRange(pos['s'], pos['s']); }
    }
    else {
        o.value =
            val.slice(0, pos['s']) +
            '<'+tag+'>' + '</'+tag+'>' +
            val.slice(pos['e']);
    }
}

function getCursorPosition(o) {
    if (isIE) {
        o.focus();
        var range = document.selection.createRange();
        var dup = range.duplicate();
        dup.moveToElementText(o);
        dup.setEndPoint('EndToEnd', range);
        return {
            s: dup.text.length - range.text.length,
            e: dup.text.length - range.text.length + range.text.length
        }
    }
    else {
        return {
            s: o.selectionStart,
            e: o.selectionEnd
        }
    }
}


insertTag(テキストエリアのエレメントID、囲むタグ)


呼ぶ時は

<button onClick="insertTag('ta', 'pre');">pre</button>
<textarea id="ta" cols="42" rows="16" name="text">hogehoge</textarea>


こんな感じ。

IE6、7、Firefox3、Opera9で試して、きちんと動いているように見える。

デモ
何故Firefoxの拡張なのかもさっぱり解らない程に凄い子。

Pencil Project

何するツールかを簡単に言うと、GUI、つまりWindowを気軽にデザインするツール。
あくまで「デザイン」ね。設計用のお絵かきツールの一種。

VisualStudio等のIDE使った事ある人や、Visio使った事ある人なら、あのままの感じでデザインできると思えば良い。それを知らない人でもWindowに配置するウィジェットをdrag and dropして行くだけだから、一発で解ると思う。

出来上がったデータはPNGで吐ける。

このツールマジで操作しやすいのよね。素晴らしい。
本当は、これでXULとか吐けると燃えるんだけどなぁ。

しっかし、いよいよFirefoxは本格的にアプリのプラットフォーム化しだしたな。良い事だ。
Skypeもそうだしねぇ。完全にプラットフォーム。

ASUSのEeePCに搭載されているFirefoxやSkypeが起動7秒後に使える
Express Gate(Splashtop)の存在も、いよいよ輝きだすのかな。

http://japanese.engadget.com/tag/EeePC/



Voodooが出すカーボンのノートEnvy133にもVoodoo IOSっつー似たようなの付いてるしねぇ。

http://japanese.engadget.com/2008/07/07/voodoo-envy-133/
何処そこに既にあるし、今更感否めないけれど、まとまって良い感じに見れるのが無かったので作って家のサーバに置いた。

http://jn.orz.hm/jquery/ui_effect.html

まぁすこぶる大した事は無いんだけれどもね。

CheatSheet的に使おうと思って。

こう言うのをこれからポロポロと作ろ。

脳の記憶素子を余計な事に使いたく無い。
WEBの暗黒時代って長かった。Java系の頭の痛くなるような考えを持った方々が放出する
触った途端悪夢にうなされるようなツールやライブラリの数々。

悪夢のツールの癖して、書店やWEBにはその名が踊る。地獄絵図。

そんな中XMLも同列に並んで持ち上げられた痛い子。

記述は冗長。データは増える。定義は揺らぐ。

Parserも、データで、ここはリストとして扱うべきか、マップとして扱うべきか、が
初期値として与えられていないと、次に同じのが来たら、リスト、なんて事しなきゃいけないから、
無駄な処理発生するし。

一体何がうれしいのかさっぱり解らなかった。

HTMLに触発されて、勢いでデータ定義に使ってみました、と言う風な感じ。

大いに間違い。

データの場合、開始と終端なんてイチイチタグで囲う必要なんぞ無いワケで。
データなんて、マップとリストさえ定義出来ればどうにかなる。

YAMLとJSONなんてまさにそれだし。Perlだってそうだし。

# まぁ、並びを保持したMap(LinkedHashMap系)と、Set系は欲しいけども・・・。
# 後PerlにもYAMLのようなAliasとAnchor欲しいけど・・・って俺は、自作でAliasとAnchorやってるけどね。

オブジェクトを直接シリアライズ、デシリアライズするより、マップとリストのデータ構造を食ったり
吐いたりした方が仕組み的に非常に明瞭。
データ通信が発生する場合、コストも安く付くし。DBに入れたりメモリに入れたりする時もリソースを節約出来るし。
良い事尽くめだ。

と、ずーっと思ってたんだけど、Googleもそう思ってた、と言うか、
コアな部分ではXML使っていなかったっぽい。

http://code.google.com/apis/protocolbuffers/docs/overview.html

これが公開される予定。Googleの内部で使われていたものを外に出す系。やっぱそうだよなぁ、XMLなんて使えないよなぁ。

ホントいらない子だXMLってば。でもしぶとく残るんだろうなぁ、XMLは。くぅ～。
Copyright c mond-tech All Rights Reserved
忍者ブログ / [PR]
にほんブログ村 ＩＴ技術ブログ Webサイト構築へ