js STUDIO | JavaScript、jQuery日本語リファレンス
AngularJS 1.2 ngモジュール ディレクティブ フィルター サービス 型 グローバルAPI ngMockモジュール サービス グローバルAPI AUTOモジュール サービス ngAnimateモジュール サービス ngCookiesモジュール サービス ngMockE2Eモジュール サービス ngResourceモジュール サービス ngRouteモジュール サービス ディレクティブ ngSanitizeモジュール フィルター サービス ngTouchモジュール ディレクティブ サービス このサイトについて リファレンスの翻訳を中心に、JavaScriptに関する情報を取り扱うサイトです。 現在、公開しているJavaScript関連の情報です。 JavaScript Mozilla Developer Networkの内容を翻訳して公開しています。 jQuery jQuery
Let's Make A Simple AJAX Note Taking App
LINKTEXTIn this tutorial we will be making a simple app with PHP and jQuery that lets users write notes. The notes are going to be saved in plain text files on the server. It demonstrates how to read and write files in PHP, how to resize a textarea with jQuery, depending on the text inside it, and how to create a simple AJAX interaction. Grab a copy of the demo from the button above and read on! T
jQuery で html 読み込みすると、キャッシュされて困る の巻
ＩＴを通して一人一人の存在価値を高め、人と会社と地域のより良い未来をつくります。インプラス株式会社のブログです。 またまたキャッシュネタですわ…。 jQuery で html 読み込みをしたいのは、Webページのヘッダーやメニューやフッター（環境などによって表示が遅れることがあるので、ヘッダーやメニューはあまりオススメしませんけど…。）などだと思いますが、ニュース、トピックスには使いたい所ですよね。 head内に、下記のように記述するだけなので、超カンタンです。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("#topicsbox").load("topics.html"); }) </script> 読み込みたいファイルはto
画像ファイルをアップロードし、サーバー側で処理した結果を画面遷移せずに表示する
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery.uploadのサンプル</title> <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="./js/jquery.upload-1.0.2.min.js"></script> <script type="text/javascript"> $(function() { $('#file_id').change(function() { $(this).upload('upload.php', function(res) { $(res
jQuery.uploadを使った、画像のサムネイルを表示するフォームのデモを作りました。 - Toro_Unit
以前、jQuery.uploadでアップロード画像のサムネイルの作成というエントリーを書いたので、それの実装を作ってみました。アップロードする画像を選択すると、アップロードされ、それのサムネイルが表示されます。 また、ページを離れるときに画像をJavascriptで削除していますが、実際に使うときは使わない場面も多いと思いますので、その部分は適当に削除するなり、なんなりして下さい。 デモ：http://demo.torounit.com/jquery.upload/ script.js(ajaxでのアップロード等々) [js] jQuery(function($){ //送信ボタンの非表示 $(‘#submit’).hide(); //フォームの内容が変更されたとき $(‘#img’).change(function() { var preview = $(‘#preview’); //現
jQuery.uploadでアップロード画像のサムネイルの作成 - Toro_Unit
Ajaxを使ったメールフォームとかってやっぱり素敵ですよね。 以前仕事で写真投稿付きのフォームを作らざるを得なかったので、どうせならということでAjax化しました。 というわけでjQuery.uploadを使って写真をアップロードして、サムネイルを表示するチュートリアルです。 2011-12-03追記:デモ作りました。jQuery.uploadを使ったフォームのデモを作りました。 コード html [html] <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>upload form</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquer
floatを使ったカラムの高さを揃える | 改造人ツクルダー & ザ・テクトロイド・ボックス
CSSの「float: left」でボックスを横に並べ、2カラム3カラムの構成にすることが増えてきた。 しかし、それぞれのカラムは内容の情報量に応じて高さが可変するため、カラムの高さが揃わないという大問題が起きてしまう。 ↓このように 「#container」：親ボックスのid 「#right_column」：右カラムのid 「#left_column」：左カラムのid [codesyntax lang=”css” title=”CSS”] #container { width: 300px; } #left_colmun { text-align: center; width: 200px; background: #aaaaee; float: left; } #right_colmun { text-align: center; width: 100px; background: #
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる : nogunogu
とあるWebアプリをiPhone対応させようと思っています。 iPhone対応なんて、レイアウトをちょっといじる程度かと思って調べていたら、 なんとiPhone搭載のモバイルSafariはタッチ関連のイベントをJavascriptで扱えるというじゃないですか。 “iPhone Human Interface Guidelines for Web Applications” を見てみると、 ユーザーの操作として上げられている中に「Flick」があります。 ということは、フリックイベントを設定できて、ページをめくる的な操作がササッと作れるはず。 などと思って調べたところ、どうやらタッチ・ジェスチャー関連のイベントは下記の7つみたいです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gesturee
Home - Slide SJS
We have been working since 2009. We started with two people: a designer and a programmer. Today the company employs almost 20 people who are divided into four teams. Everyone is a master of his craft. There are open vacancies. We use all our experience, knowledge and skills to help you properly implement your plans to make the site a convenient tool - in this we see our mission. In tandem with the
jQueryのイベントをチュートリアルで学ぶ（後編） (1/2)
(前編からの続き） イベント発生時に一度だけ命令を実行する one() 指定した要素で発生したイベントに対して、一度だけ実行する命令を設定できるのが one() です。 $(セレクター).one("イベント発生の条件",function(){ //イベント発生時に実行する命令 }) one() の括弧内にはイベント発生の条件を指定します。イベント発生の条件には、ここまでに説明してきた click や dblclick、mouseup、pusedown、mousemove、mouseout、mousemove などを記述します。その後を,（カンマ）で区切り、 function(){...} に実行したい命令を書きます。 次のサンプルでは、a要素がクリックされたときに、一度目は画像が切り替わり、二度目はa要素に設定されているリンク先に移動します。 ▼サンプル14（スクリプト部分） $(func
jQueryでページ送り（ページネーション）付きのカルーセルパネルスライドUIを作成する方法｜BLACKFLAG
先日「jQueryでシンプルなカルーセルパネルスライドUIを作成する方法」と題した、 jQueryでのシンプルなカルーセルパネルを実装する方法を紹介しましたが そのカルーセルパネルに、ページ送り（ページネーション）を付けた形での バージョンアップ（？）版を作ってみたので紹介してみます。 まずは動作のサンプルから。 左右に現れる矢印、もしくは画像下の「●」をクリックしてみてください。 jQuery SIMPLE CAROUSEL with PAGINATION【SAMPLE】 前回のサンプルとは違い、左右の矢印をクリックすることで エリア枠内に表示されている画像がまるっと入れ替わります。 上記サンプルは画像20枚を4ページにわけて スライドさせている構成になっています。 画像下の「●」をクリックすることで 該当ページ（パネル？）へスライドします。 このカルーセルパネルUIの全体構成について、
ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
第4回 要素の操作＆ユーティリティ編
連載目次 $.eachメソッドは、引数objで指定されたオブジェクト（ハッシュ）、または配列の内容を、コールバック関数fncにより順に処理します。 コールバック関数fncは、以下のような性質を持ちます。 第1引数は、オブジェクト（ハッシュ）のキー、または配列のインデックス番号を受け取る 第2引数は、オブジェクト／配列の個々の値を受け取る 戻り値としてfalseを返した場合、その場で繰り返し処理を中止（それ以外の値を返した場合には無視） それでは、具体的な例を見てみましょう。以下のサンプルは、配列booksの内容を順にリスト表示します。ただし、categoryキーが「ASP.NET」以外のものが登場したところで処理を打ち切ります。 <script type="text/javascript"> $(function() { // 書籍情報を配列booksに格納 var books = [ {
jQueryのダウンロードとインストールのチュートリアル (3/3)
Google AJAX Libraries APIによるjQueryの利用 本文では、jQuery本体をダウンロードする方法を紹介しましたが、米グーグルのサービス「Google AJAX Libraries API」を使えばダウンロード不要でjQueryを利用できます。Google AJAX Libraries APIは、さまざまなJavaScriptライブラリーをグーグルのサーバーにホスティングし、Webページに直接読み込めるようにしたサービスです。jQuery以外にも、「jQuery UI」「Prototype」「script.aculo.us」「MooTools」「Dojo」「SWFObject」「Yahoo! User Interface Library（YUI）」などの主要なJavaScriptライブラリーに対応しています。 Google AJAX Libraries APIで提
最近気になってきたjQueryについて色々調べてみました - もとまか日記
最近、「jQuery」というキーワードをよく見かけます。 これって何だろ？と思ったので調べてみたら、JavaScriptのライブラリのようで。 てことで、最近ちょっと気になってたJQueryについて調べてみました。 jQueryの概要 まずは難しいことは抜きにして、以下を読んでみると分かりやすいです。 はじめてのjQuery jQuery仕様関連 一応ですが、仕様について。 jQuery 日本語リファレンス 必要に応じてみればいいかな？と思ってるので、まだ細かくは見てません。 初心者向けの基礎知識、基礎講座 最初は初心者向けの記事を読んでみると良さそうです。 ASCII.jp：40分で覚える！jQuery速習講座一晩で覚えるjQueryの逆引き基礎サンプル7つjQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみるjQuery 開発者向けメモ サンプル、プラグイン 調べてて
jQuery でサイズや位置を取得する方法を図にしてみた - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary サイズの取得 煩雑になるので height の記述しかありませんが、width に置き換えれば幅もとれます。 普通のボックス要素 height() メソッドで取得できる値には、padding や border の分の高さを含みません。 CSS の height と同じなので、css('height')メソッドで取得してもよさそうですが、こちらの場合ブラウザの種類や CSS の定義の仕方で取得される値が異なる（クロスブラウザとしての機能が完全でない）ので、純粋に px 単位の高さを取得したい場合は height() メソッドを使用した方が無難です。 スクロールバー付きボックス要素 clientHeight には
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DevDocs
jQuery.uploadを使ってみる | モリ☆ログ
remora.cx