この記事は賞味期限切れです。（更新から1年が経過しています） Codogue.comに追加した、ツリー文字列のジェネレータ「AsciiTree」をご紹介します。 例えばディレクトリ構造をテキストで表現したい時など、 「けいせん」と入力して「├」や「└」などに変換するのが手間。 コマンドプロンプトやターミナルのtreeコマンドで出力出来ますが、その場合は余計なフォルダも出力されたり、 あるいはその為にディレクトリ構造を一度生成する必要があります。 というわけで、作ってみました。例のごとく、単機能です。 AsciiTree 使い方 上の入力フォームにタブやスペースのインデントで階層構造をあらわしたテキストを入力して「生成」ボタンを押すと、 下のエリアに結果が出力されます。 例えば次のようなテキストは root hoge foo bar foobar barbaz fuga baz piyo 次
サジェスト+Ajaxでタグがスムーズに入力できるjQueryプラグイン「Tag-it!」 タグ入力を補完してくれるjQueryプラグインは探すと結構あったのですが、日本語でサジェストが上手くいかなかったり、CSSでスタイルがカスタマイズできなかったりと色々問題がありまして、最終的にこの「Tag-it!」 に落ち着きました。 投稿日2012年11月29日 更新日2012年11月29日 ダウンロード 「Tag-it!」は下記URLからダウンロードしてください。 また、別途 jQuery と jQuery UI が必要です。 jQuery Tag-it! プラグインをダウンロードしたらheadなどで読み込みましょう。 下記では jQuery などのライブラリは Google CDN で読み込んでます。 html <link rel="stylesheet" type="text/css" hre
dynatree - Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag'n'drop, and lazy loading. - Google Project Hosting リアルなWindows風ツリービューが実装できるjQueryプラグイン「dynatree」。 次のようにまるでWindowsのインタフェースじゃないか、といってしまう人が多数なツリービューが実装できます。 Ajaxによる動的ローディングやコンテキストメニュー、ツリービュー横のチェックボックス等、機能はそろっています。 また、ドラッグ＆ドロップでアイテムを移動できるあたりも素晴らしいところです 何かと便利なUIなので、実装する際には１つの
子孫のみハイライト [ad#ad-2] CSS3 Family Treeの実装 HTML ツリーはリスト要素で、各アイテムの親子関係はリストの入れ子で実装します。 <div class="tree"> <ul> <li><a href="#">親</a> <ul> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> </ul> </li> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> <li><a href="#">孫</a> <ul> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> </ul> </li> <li><a href="#">孫</a></l
タグクラウドを３D化する試みはいくつかあるみたいですが、javascript(jQuery)ではないっぽいので作ってみました。setIntervalの代わりにjQueryのタイマープラグインを使っています。 ul要素 のタグリストを元にして、position:absolute;のリンクブロックを作り、それぞれを立方体(もしくは直方体)になるように位置を計算して、タイマーやマウスアクションのイベントで再計算する感じです。今回はタイマーで自律的にゆっくりと動かしています。 タグの数が立方数なら立方体となり、中心で回転しますが、 立方数でない場合は中心がずれます。 これはこれで動きとしては面白いかも。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く