ドラッグ移動ボックスにおいて、移動中のボックスを半透明にする
jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスにおいて、移動中のボックスを半透明にする方法。移動中のボックスを半透明にするには、opacity オプションを使う。 実装例（サンプル） 実装例の動作について 「移動中のボックスを半透明にする。」と書いてあるボックスを、ドラッグして、移動させると、移動中のボックスが半透明になる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/jav
テーブル内の行やセルなどの要素をドラッグ＆ドロップで自由に配置できるスクリプト・REDIPS.drag
使い方<script type="text/javascript" src="redips-drag.js"></script> <script type="text/javascript" src="script.js"></script>ライブラリと設定用のjsファイルを読み込んでマークアップするだけです。 デモのマークアップは以下のような感じ。 <div id="drag"> <table> <colgroup> <col width="30"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> </colgroup> <tbody> <tr> <th colspan="6" class="mark">テーブル</th> </tr> <tr c
要素をドラッグアンドドロップする方法 - Web/DB プログラミング徹底解説
はじめに ドラッグアンドドロップが出来れば、Web の UI を簡素化し、かつ直感的に作り上げられる場合があります。ドラッグアンドドロップの実装方法はいろいろあるでしょうが、ここでは単にマウスのダウン、移 動、アップのイベントを上手に組み合わせることによって、ドラッグアンドドロップの実装を試みます。 デモのダウンロード 1. 解説 この資料では、ドラッグする要素及びドロップするターゲット要素共に position スタイルを absolute にして、絶対位置指定しています。絶対位置指定ですから、要素の移動は簡単です。 HTML では次のように、ドラッグする要素、ドロップするターゲットのクラスをそれぞれ "dragged_elm"、"drop_target" とします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww
JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]
Web 開発や拡張機能開発で JavaScript のコードを書いていると、誰もが一度は次のようなことで悩むかと思います。 ブロックスコープと名前空間 (グローバル変数汚染の回避) 読み書きしやすくデバッグしやすいコードスタイル コールバック関数と this オブジェクトの取り扱い デバッグ方法とデバッグ支援モジュール 非同期処理の書き方 いずれも解決方法は人によって様々で、これが常にベストと言えるものがなさそうですが、私なりにそれぞれ検討したことなどを書いてみようかと思います。もっと良い方法があるとか色々皆さんのご意見やツッコミをいただければ幸いです。 JavaScript では名前空間は言語仕様でサポートされておらず、ライブラリや拡張機能などのコードを書くときにはグローバル変数の使用を最小限に抑える必要があります。先日の Mozilla 勉強会＠東京 3rd でも佐藤さんと守山さんの発
![JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8eebd75773eb0321573d9040b42d88f184780c77/height=288;version=1;width=512/https%3A%2F%2Fdev.mozilla.jp%2Fwp-content%2Fthemes%2Fmodest%2Fimages%2Fpage-image.png)
javascript初心者によく教えること - Qiita
色々な人に同じことを教えている気がするのでまとめておく。 他の言語でもいいので、変数、分岐、繰り返し、関数くらいがわかってたら、下のことにとりかかっても早くない。 上の方が効果/学習コストが高い。 困ったらChromeデバッガ とにかく困ったらChromeデバッガを使う。jsもcssもhtmlもChromeデバッガを使って確認する。 使い方は一通り勉強した方がいい。 とりあえずjQueryとcoffeescriptを使う jsのmvcフレームワークとかに比べると学習コストが激安。 初心者であれば、とりあえず使っておいて間違いない。 検索は、「javascript+◯◯」ではなく、「jquery+◯◯」 生jsを排除してなるべくjQueryに寄せて書くことで、IE対応を減らせる。記述量も減る。 変数を一つのグローバルなオブジェクトにまとめて格納する 名前空間の汚染を小さくするために、状態保存
[JavaScript] dataスキームURI生成（画像データのBase64変換）
Greasemonkey のユーザスクリプトなどの JavaScript ソースコード内に画像データを埋め込める、 『data:image/gif;base64,～～～』形式のデータ（dataスキーム）を生成します。 画像ファイルなどのバイナリデータを Base64 エンコードに変換しています。 data スキーマでは、外部ファイルへのアクセスなしにスクリプト内で完結して画像を表示できるため、 小さなアイコンなどの表示には便利です。data スキームは Firefox・Opera では利用できます。 残念ながら Internet Explorer は data スキームに対応していないので利用できません。 やってみよう 画像URL: ▼ ▼ JavaScript ソースコード生成結果: ここにソースコード結果が表示されます。 ▼ data スキーム経由の画像表示: 生成したコードの使い方
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
【LINE】既読にしないでLINEの未読メッセージを読む方法(ブックマークレット版) - ぼくはまちちゃん！
こんにちはこんにちは！！ 前回のLINEを既読にせずに読むツールは、結局規制を受けて使えなくなってしまったので、今度はブックマークレット版を作ってみました！ なので今回のは、パソコンでしか使えません＞＜ ほんとはスマホの人に使ってほしかったんだけど…。 それでもよければどうぞ！ ブックマークレット使ったことない人のために、一応使い方も書いておきますね！ 1. LINEのメールアドレス登録をしておく アプリの設定 → メールアドレス登録で、メールアドレスとパスワードの登録をしておきます。 このアドレスはスマホのじゃなくても、GMailとかでもOKです！ 後から何回でも変更できます。 2. Google Chrome をインストールしておく Google Chrome - ブラウザのダウンロード 3. Google Chrome の「ブックマークバー」を表示しておく Chromeの右上にある設
Twitter-APIを使ってみました
「現在発売中の日経ソフトウエア2010年3月号に記事を書きました！Web APIに ついての特集で、今はやりのTwitterと、Google ChartのAPIを活用したPHPの アプリケーションを作成する内容になっています。ぜひ読んでみてください。 皆さまのご意見やご感想をお待ちしています！ 」By Katsuhiro Ogawa こんな序文を見つけました。 ブログネタに困っていた時だったのもあり、 また、現在担当しているプロジェクトで使うかもしれないということで、 TwitterのAPIをちょっと触ってみました。 まずは、APIの仕様について。 http://apiwiki.twitter.com/ ここで、原文で確認できるようです。 日本語に翻訳している方がいるようです。ありがたいですね。 http://watcher.moe-nifty.com/memo/2007/04/twitt
JavaScript で OAuth 認証を行う方法 - vivid memo
最近、twitter クライアントを Firefox 拡張機能として作ったりしているのですが、twitter では認証方式として OAuth が採用されているため、JavaScript で OAuth 認証を行う必要があります。 ここでは、JavaScript の OAuth ライブラリを用いて OAuth 認証を行う方法を説明します。 OAuth 自体の詳しい説明などは OAuth の公式サイト をご覧ください。 OAuth ライブラリの入手 Google code に OAuth 関連ライブラリのプロジェクトサイト があります。 ここで、John Kristian さん作の JavaScript 用のライブラリも公開されています。 JavaScript 用 oauth ライブラリ Revision 1249 の段階では、ライブラリとして使用するのに必要なファイルは以下の 2 つのファイ
TwitAPI.js
≫Download 概要 Twitter の API を JavaScript から簡単に使うためのライブラリです。 上部の Download リンクより、js ファイルをダウンロードして読み込む事で、専用のプロキシサーバを通じて Twitter API を呼び出す事が出来るようになります。 Twitter API が BASIC 認証をサポートしなくなる事に合わせて、TwitterAPI.js の後継ライブラリとして開発されました。 現在のバージョンは 0.2.1 です。 TwitMgr (閉鎖済) や Splitwit (閉鎖済) の開発の都合上、必要になった機能については順次追加していったりしていますが、まだ十分に枯れたとは言えません。 動作のおかしい点などあれば、ご連絡頂けると助かります。 特徴 OAuth 対応 プロキシサーバを経由して Twitter API にアクセス 単一の
JavaScriptのコード整形＆色付け(貼り付け用)
JavaScriptのコードをフォーマット＆色付けを行い、その内容をHTMLに貼り付けられる形にします。 JsDecoderというソースの整形＆色付けを行ってくれる便利なライブラリを使って実現しています。 JsDecoder - code.gosu.pl →Blogへ戻る 使い方 下記のテキストエリアにJavaScriptのコードを入力し、「Preview」ボタンを押します。 すると、コードを整形したイメージが表示されます。 そのコードをHTML上に貼り付ける場合には、さらにその下のテキストエリアのテキスト内容を使用します。 format color
Event Listener: イベントリスナ [JavaScript / DOM]
Event Listener とは Event Listener とは、イベントを受け取って処理するものです。 JavaScript では関数がイベントリスナの役割を担うことが多いです。 ここでいうイベントとは、「画面上のどこかをクリックした」 だとか 「HTML の読み込みが完了した」 などといった事です。 従来は、イベントとイベントリスナ (関数) を結びつける方法としてイベントハンドラ式が使用されてきました。 // 「クリックされた」 というイベントを受け取るイベントリスナ (関数) myFunc を HTML 要素に結びつける例 // [(X)HTML] 要素の属性として記述する方法 <button onclick="myFunc();" id="test" /> // [JavaScript] element 要素のプロパティを使用する方法 // id が "test" である要
そろそろきっちりJavaScript(8) prototype.jsを読む(2)
Classオブジェクト 前回に引き続き、prototype.jsのソースコードを読んでいこう。前回の記事掲載後、「Firebug 1.05」、「prototype.js 1.5.1」が正式リリースされている。前回の時点ではprototype.js 1.5.1_rc2を準備したが、せっかくなので正式版で読み進めることにしよう。なお、FirebugについてはライセンスがThe BSD Licenseへ変更されている。詳細については別掲の記事も参考にされたい。 さて、今回は34行目Classオブジェクトの定義から見ていこう。(行頭の数字は行番号を示す。) 34 var Class = { 35 create: function() { 36 return function() { 37 this.initialize.apply(this, arguments); 38 } 39 } 40 }
JavaScript OOP におけるクラス定義方法 - IT戦記
クラスを定義する方法です。考え付くだけでも、これだけたくさんの方法があります。やっぱり、 JavaScript って柔軟であり複雑な言語ですね。 ちなみに、以下のすべての例はこのクラスを定義しています。 ちなみに、僕は一番下の書き方ですね。 皆さんはどのようにプログラミングしていますか？ プロトタイプを使わない。クロージャを使う。 // プロトタイプを使わない。 // クロージャを使う。 function Item(price) { this.showPrice = function() { alert(price); }; } プロトタイプを使わない。クロージャを使わない。 // プロトタイプを使わない。 // クロージャを使わない。 function Item(price) { this.price = price; this.showPrice = function() { aler
for 文と無名関数のイディオム - IT戦記
id:cho45 がチョロっと書いたコードが話題になっている 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech このような書き方は、自分もたまにする。 というわけで、この書き方をする利点を以下の順に解説して見る。 単純な for 文の問題点 with 文を使った解決方法と、その微妙な問題点 無名関数を使った解決方法 単純な for 文の問題点 まずは、以下の HTML に対して <ul> <li>hoge</li> <li>fuga</li> <li>piyo</li> </ul> 以下の JavaScript を実行して var list = document.querySelectorAll('ul > li'); for (var i = 0, len = list.length; i < len; i++) { var node = list[i]; v
Core - jQuery 日本語リファレンス
Core/API/jQuery jQuery関数/$(...) jQuery(expression, context) CSSセレクターを受け取って、マッチしたエレメント集合のjQueryオブジェクトを返す。 jQuery(html, [ownerDocument]) HTML文字列を受け取ってDOM Elementを作成し、それらを含むjQueryオブジェクトを返す。 jQuery(elements) 受け取ったエレメントをjQueryオブジェクトにして返す。 jQuery(callback) $(document).ready()の短縮形。 jQueryオブジェクト操作 each(callback) 全ての要素に対してコールバック関数を実行する。 size() jQueryオブジェクトが持つ要素数を返す。 length jQueryオブジェクトが持つ要素数を保持する。 selector
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ふじこのプログラミング奮闘記
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting
The forefront of html5 implementation
