jQueryを使用して、サイトにフェードやスライド、表示・非表示、タイマーなどのアニメーション効果を取り入れるチュートリアルを紹介します。 Super-Easy Animated Effects with jQuery チュートリアルは英語ですが、使用する関数、ソース(HTMLとJavaScript)が必要最小限でまとめられており、デモページ(シンプルすぎかも)もあるため、英語が苦手な人でも大丈夫だと思います。 下記に、チュートリアルをいくつかご紹介。 アニメーションでフェードイン・フェードアウト <textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascr
こでまでの作業のまとめ 以下が追加事項一覧です。 dataJST を追加し、時刻を加工しJSTの時刻も合わせて登録するようにした。 (が、時間の足し引きの値の理屈がどもう怪しい) 検索機能 (JQuery にて同じ画面内に絞り込んだ検索結果を表示) 該当件数表示Javascript (JQuery のライブラリ)を利用するようにした。 スタイルシート main.css を多少加工した。 イメージ画像の追加 ( app.yaml をよく理解していないこともあり、苦労した。Configuring an App もみてみたが、やはり実例がわかりやすい) テンプレートを使用しないと datastore からの検索結果と同時に日本語を表示しようとすると UnicodeDecodeエラーが発生することから、これを利用。 やはりテンプレートは楽だと思います。 ただし、JQuery で検索結果をダイナミッ
jQueryとCakePHPの異種格闘技戦。jQueryが勝っとる。これからはjQueryか。prototypeはそれ自体が汎用的な単語のため、フェアな勝負にならない。 そういうわけでjQueryのajaxを使ってみて(とりあえず挫折)したのでメモ。(いや、ajaxを使うというだけなら簡単。使い方が悪いだけ。) $.ajax()を使えばいい。 $.ajax({ url: 'hogehoge.htm', type: 'POST', dataType: 'json', // xml、 html、script、json data: params, timeout: 1000, error: function(){ // エラー時 alert('Error'); }, success: function(htm){ // コールバック } }); 上記コードで’hogehoge.htm’にpost
App EngineをjQueryでAjax化しBigtableをCRUD操作:Google App Engineで手軽に試すJavaクラウド(3)(1/4 ページ) BigtableはCRUD処理ができるんです! 連載第1回の「EclipseでJava版App Engineを始めるための基礎知識」では環境設定が中心でしたが、連載第3回となる今回は、「Google App Engine for Java(以下、GAEj)」上で動作するJSPのユーザーインターフェイス(以下、UI)をAjax/JavaScriptでリッチにし、「Bigtable」でCRUD(登録・参照・更新・削除)処理を行ってみます。 今回の解説では、Ajax/JavaScriptライブラリのjQueryのバージョン1.3.2を使用したCRUD処理画面の操作内容と、そのJavaScriptでのプログラム処理を最初に見ていき、
jQuery Droppablesでドロップ処理も超簡単ドラッグした要素をドロップして、いろいろな処理を行えるようにする jQuery UI の Droppables を紹介します。複雑な判定などを必要とするドロップ処理もjQueryなら極めて簡単に使えます。 前回は Draggables でDOM要素をドラッグしました。 今回は、その、ドラッグした要素をドロップしていろいろな処理を行えるようにする jQuery UI 、 Droppablesを紹介します。 前回見たとおり、jQueryではドラッグ処理を簡単に実装できますが、複雑な判定などを伴うドロップ処理も とても簡単に利用することができます。 jQuery Download jquey.js(-min.js) UI/Droppables Droppables デモ ダウンロード jquery.ui-1.0.zip (101 KB Dr
コンテンツ PHP入門 jQuery入門 Flash Flash(ActionScript)でゲーム作成入門 Flash(ActionScript)で様々なゲームを作ろう Flash(ActionScript)とPHPの連携入門 PHP(旧コンテンツ) PHPでファイルの読み書き・掲示板 PHPで日付・時刻の計算 PHPでアクセスカウンタ&解析 PHPでGDを使ってみよう PHPとPostgreSQLの連携入門 Java (旧コンテンツ) Javaでシューティングゲームを作ろう Perl (旧コンテンツ) CGI(Perl)の基本と掲示板作成 C/C++ C/C++言語とDXライブラリでゲーム作成入門 (旧コンテンツ)C言語とelで様々なゲームを作ろう jQuery simple plugins ひとりごと、ふたりごと(ブログパーツ) オリジナルソフトウェア その他未分類なモノ iOSアプ
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します(
今回のサンプルの基本的な情報 ここまででDraggables、Droppables、Selectablesの基本的な使い方が分かったと思いますので、いよいよここからは、応用編のサンプル解説をしていきます。もう一度サンプルを見てみましょう。 ■ サンプルの基本設計 このサンプルの基本設計は次のようになります。 ディレクトリが2つあり、それぞれを親要素とするファイルが3つずつぶら下がる ディレクトリをselectable()にする ファイルをdraggable()にする ただし、初期状態は'disable'にしておき、ファイルが選択されたときに'enable'にする ディレクトリをdroppable()にする ファイルがディレクトリにドロップされたら、そのファイルが、そのドロップされたディレクトリの子要素になるようにDOMの操作を行う ■ 複数要素のドラッグ ここで1つ難しいのは、複数ファイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く