oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

20101012:コメントとトラックバックを停止したことにより、このサイトはアーカイブとなりました。以降、ご連絡はみもねるのウェブサイトへお願いします。
20100703:新ナマコメ(ナマコメ 2)を公開しました。コメントビューア付きで送信面においてもパワーアップしています。
旧ナマコメは将来的に使用できなくする予定なので、可能な限り新ナマコメをお使いください。
20091127:oitake は みもねる になりました。当ブログは無期限更新停止となります。詳細は最新の記事をご覧ください。

スポンサーサイト

一定期間更新がないため広告を表示しています


2009.12.16 Wednesday | | - | - | -

マルチファイルアップロードボックス(の修正版)

以前、JavaScriptでファイル参照ボックスを動的に追加する方法を紹介しましたが、ちょっとした不具合を発見したので、修正版を紹介します。
不具合の内容は「ボックスを追加すると選択済みのボックスがリセットされてしまう」というものです。innerHTMLを変更したことが原因でしょう。うかつでした。
というわけで、修正版では「新たに要素を作成して追加する」スタイルをとっています。スクリプトは以下のとおり。

<script type="text/javascript">
// ファイル参照ボックスを追加する
// ※#fileを用意しておくこと。
function file_append()
{
    var file=document.getElementById("file");
    var input=document.createElement("input");
    input.type="file";
    input.name="files[]";
    var br=document.createElement("br");
    file.appendChild(input);
    file.appendChild(br);
}
</script>
<form action="http://oitake.chicappa.jp/formtester/index.php" method="post" enctype="multipart/form-data">
<input type="button" value="もうひとつ" onclick="file_append();" /><div id="file"><input type="file" name="files[]" value="" /><br /></div>
<input type="submit" value="アップロードする" />
</form>

適当にカスタマイズして使ってください。

2007.08.23 Thursday | 11:10 | ライブラリ | comments(0) | trackbacks(0)

JavaScriptで複数ファイルのアップロード

修正版を掲載しました。本記事で紹介しているスクリプトには不具合があるので、修正版をご利用ください。

MOONGIFTさんが「複数ファイルを*華麗に*アップロードするFlash」を紹介されています。

ファイルの参照ボックスは決められた数しか表示できないので、複数の参照ボックスを利用できるというのは、ユーザビリティの面で高いメリットを期待できますね。
oitakeも昔、ユーザーの任意で参照ボックスを複製できるJavaScriptを組んだことがあるので、今回はこれをご紹介します。


「もうひとつ」ボタンを押すと参照ボックスが複製されます。
「アップロードする」ボタンを押せば、送信先のPHPがアップロードファイルを列挙するので、確認してみてください(手抜きですけど…)。
ソースコードは続きからどうぞ。なお、PHPでは「$_FILES」変数からアップロードファイルの情報を取得できます。配列になっているので、その点考慮してください。

続きを読む >>

タイポ!スクリプト第2版

※コードの事情により、Safariでは動作しないようにしました(20061124)。
前回の「タイポ!スクリプト」第1版に修正を加えました。
第1版は使用せず、この第2版を使用してください。
ちなみに「タイポ!」は、

こんな風にテキストをアレンジする

スクリプトです。

・Opera 9でも動作するようになりました。
・前回はテキストの1文字1文字をspan要素で囲み、さらにテキスト全体をspan要素で囲みましたが、今回は全体をspan要素で囲んだりしません。よって、スタイルシートを適用しやすくなりました。
・ソースコードをキレイにダイエット。

使い方は第1版とほぼ同じです。

1.ウェブページやテンプレートのなるべく最後の方ソースコードをペーストするか、なるべく最後の方.jsファイルを読み込んでください。
2.エフェクトを適用させたい要素にclass属性を設定してください。値は「typo」で始まる任意の文字列です。
3.キレイにカスタマイズしたい方は、スタイルシートを調整します。「タイポ!」は1文字1文字をspan要素で囲むので、「.typo span」セレクタにスタイルシートを適用することになると思います。
4.もっとカスタマイズしたい方は、スクリプトのユーザー定義変数を調整します。■で始まるコメントに続く変数です。

要望・不具合はコメントへどうぞ。

続きを読む >>
2006.11.22 Wednesday | 02:09 | ライブラリ | comments(0) | trackbacks(1)

タイポ!スクリプト第1版

「タイポ!スクリプト」第2版を使ってください。

「タイポ!」のウェブページ組み込み用スクリプトです。
ページを開くと、任意のテキストがタイポグラフィックっぽくアレンジされます。


▲こんな感じ。


▲こんな見せ方も。

スタイルシート次第で色んな見せ方が考えられます。
使ってみたいという方は、まず設置方法A設置方法Bを実行の上、設置方法(共通)を実行してください。

<設置方法A>

1.スクリプトファイルをウェブサイトへアップロードする。
2.ウェブページに下記コードをペーストする。

<script src="(.jsファイルへのパス)/oi_typo.js" type="text/javascript"></script>

<設置方法B>

1.この記事の続きからソースコードをコピーする。
2.ウェブページにペーストする。

<設置方法(共通)>

3.エフェクトを適用したいテキストを含むタグにclass属性を設定する。
  属性値は「typo」で始まること。また、spanタグは避けた方が良いかも。
  例:「class="typo_special"」「class="title typo"」
4.ウェブページとにらめっこしながらスタイルシートを調節する。
  「margin:1px;」や「padding:1px;」を設定すると良い。

<注意事項>

・OperaとMacintoshのIE・NN以外で正常に動作します。
・アクセスカウンターを設置しているページでは、「window.onload」部分を展開した方が良いかもしれません。
 詳しくはこのブログのソースコードを参照のこと。

続きを読む >>

モチメーター

ブロガーのモチベーションを表示するスクリプト。


記事の更新が停滞気味な時に「モチメーター」を低めに設定すれば、「やる気がないんですぅ」という言い訳を、遠回しに、代弁してくれます。
逆に高めに設定すると、「今日の記事は自信があります!」ということになるでしょう。

<設定方法>

1.コード「<div id="motimeter"></div>」をウェブページに記述する。
  記述したところに「モチメーター」が表示されます。
2.ソースコード(続きからどうぞ)をウェブページの1より下に記述する。
3.「oitake¥'s」のところを自分の名前などに変える。
4.コード「<!--mm:[0-100]-->」を記事に記述する。
  その記事を執筆した際のモチベーションをパーセンテージに換算してください。

あること自体が言い訳になりかねないけどね。

続きを読む >>