属性とはhtmlでいうと要素で設定しているいろいろな値、 例えば:<a href="index.html"></a> 属性:href、属性値:index.html、要素:a 属性を変更できると、画像を入れ替えたり、urlを変更したり、大きさを変えたり、ホームページでの表現の幅が広がります。 attr 属性値を変更する場合 $("セレクタ").attr("変更したい属性の名前","変更後の属性値"); 例えば、 属性srcをa.jpg→b.jpgに変更する場合。 jquery $("img").attr("src","b.jpg"); html 変更前:<img src="a.jpg"> 変更後:<img src="b.jpg"> さらにたくさんの属性を変更したい時 $("セレクタ").attr({"属性名":"変更後の属性値","属性名2":"変更後の属性値"}); が使えます。 例えば、
JavaScriptで必要なデータ構造の覚書です。 目次 配列 配列を生成する。 配列にデータを追加する。 配列にデータを格納する。 配列からデータを取得する。 配列中のすべてのデータに同じ処理をする。 オブジェクト オブジェクトを生成する。 オブジェクトにデータを格納する。 オブジェクトからデータを取得する。 オブジェクト中のすべてのデータに同じ処理をする。 関連記事 配列 配列は複数件のデータを扱うためのデータ構造です。 ■配列を生成する。 配列の生成は以下のように行います。 var 配列の名前 = []; var 配列の名前 = [ データ, データ, … ]; 配列の生成では、配列の名前を指定します。 もし、生成時にデータを格納する場合に、[]内にデータを指定します。 なお、JavaScriptでは配列の生成時にサイズを指定しません。 例えば、空の配列array1を生成するには、以
With this widget, you can make beautiful interactive timelines like the one below. Try dragging it horizontally or using your mouse-wheel. Click on each event for more details. Licensing Timeline is open source software and is licensed under the BSD license. Credits This software was originally sponsored by The Andrew W. Mellon Foundation as part of the SIMILE project. Its original author is David
今回は、HTML内に持っていた地点データをJSONファイルに分離して、AJAXを使用してJSONファイルを読み込んでマーカーを設定します。 今回のサンプルでは、jQueryを使います。 処理イメージとしては、以下の感じです。 HTML読み込み 地図生成 地点データ読み込み(JSONファイル) マーカーの設定 用意したJSONファイルは、以下のとおり { "points":[ { "title": "ローソン", "content":"ローソン 神戸中央西町", "lat":"34.687574", "lng":"135.189857" }, { "title": "南京町広場", "content":"南京町広場", "lat":"34.6882", "lng":"135.188087" }, { "title": "ライオンズマンション", "content":"ライオンズマンション神戸
コントロールの種類と表示設定 コントロールの無効化 ナビゲーションコントロール〔※廃止〕 地図タイプコントロール〔MapTypeControlOptions / MapTypeControlStyle〕 外観地図コントロール〔OverviewMapControlOptions〕 移動コントロール〔PanControlOptions〕 回転コントロール〔RotateControlOptions〕 スケールコントロール〔ScaleControlOptions / ScaleControlStyle〕 ストリートビューコントロール〔StreetViewControlOptions〕 ズームコントロール〔ZoomControlOptions / ZoomControlStyle〕 コントロールの表示位置〔ControlPosition〕 カスタムコントロールの指定〔描画、イベント処理〕 コントロー
喜寿を過ぎた隠居の気儘な生活の記録。言わば、「游行期」の雑記帳です。「林住期・游行期」の過ごし方に少しでも参考になればと願っています。 従来、右フレームの【晩秋の宍道湖私的観光地図】は、Google Maps API のV2版で作成したものを置いていた。V2 でかいた地図はまだ動くが、2010年5月に廃止されており、V3 へ移行することが奬められている。 この地図では、必要性はあまりないが、マーカーに番号を表示させていた。新しく V3 で作りなおすときにも、学習も兼ねて番号を表示させたかった。 ところが、番号入りマーカーを表示するサンプルコードが見つからない。V2 で作成したコードを V3 に置き換えることも試みたが、悲しいかな十分な知識がないし、一から勉強する意欲もないので、うまく行きそうにない。 今までに成功した V3 のコードを眺めていると【Google Maps API JS V3
今回は、GoogleMap API V3で番号つきマーカーを動的に生成して表示するサンプルです。 マーカーのピンの生成は、Google Chart APIを使います。 作成方法は簡単で、Google Chart APIは、番号つきのピンと影を生成できて、Google Map APIはマーカーのピンと影をそれぞれURL指定できるので、そこにGoogle Chart APIのURLを指定するだけです。 Google Chart APIでは、影つきピンも生成できますが、下のようにピンと影が少し離れているので、ピンと影をそれぞれ指定しました。 ピンの生成は、http://chart.apis.google.com/chartのパラメータとして以下の値を設定します。 chst=d_map_pin_letter&chld=<character>|<fill_color>|<text_color> 例え
Digital Inspiration:新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。 埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。 同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちら。ブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます。 Googleマップをレスポンシブに埋め込む方法 以下がGoogleマップのデ
フィードバックを送信 概要 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Maps JavaScript API を使用すると、独自のコンテンツと画像を使って地図をカスタマイズして、ウェブページおよびモバイル デバイスに表示できます。Maps JavaScript API で提供されている 4 つの基本地図タイプ(道路地図、衛星、ハイブリッド、地形)に、レイヤとスタイル、コントロールとイベント、さまざまなサービスとライブラリを使用して変更を加えることができます。 対象読者 このドキュメントは、JavaScript のプログラミングとオブジェクト指向プログラミングの概念を理解しているデベロッパーを対象にしています。また、ユーザーの視点で マップを使い慣れていることも必要です。ウェブ上に多数ある JavaScript チュートリアルも参考にしてください。 こ
Webサイトで地図を表示するのに便利なGoogle マップ。Googleが提供しているGoogle Maps APIを使って、地図を設置する方法から、マーカーを置いたり、道のりを表示したり、地図の色を変えたりするためのコードをまとめました。※Google Maps APIの中でも、ここではGoogle Maps JavaScript API v3を使ったサンプルを掲載します。 以下は目次です。クリックするとその項目へ移動します。 Google マップを設置する。 いちばん簡単なGoogle マップ ジオコーディングなGoogle マップ Google マップの読み込み方 場所を示す。 マーカーを置く アイコンを置く 吹き出しを出す 道のりを表示する。 ポリラインで描画する Directions Serviceを利用する 見た目をカスタマイズする。 コントロールのカスタマイズ デザインのカス
About Slider component with different options vertical or horizontal orientation minimum and maxim values step incrementor range selector 3 shapes for handles touch capabale Download Change log 11/4/2013 Added touch events support. Just add Modernizr to your page (thaks to Tony Wallace) Added 'formater' option to format the values before they are sent to the tooltip 07/3/2013 Fixed 'setValue' 23/2
Are you looking for the smoothest scroll for your web pages? Look no more. iScroll is the best smooth scrolling, high-performance, multi-platform javascript scroller that will add a sleek and modern look to your web pages. Get everything you need to know and understand about the fastest and smoothest scrolling library, iScroll. iScroll is a multi-platform JS library that lets you add scrollbars to
JavaScriptのライブラリをお手軽に導入できて便利なCDNですが、どのサービスで何のライブラリが使えるのか忘れがちだったのでメモ。 ついでに、RequireJSを使ったTIPS RequireJSを用いたCDNからライブラリの読み込みに失敗した際のフォールバック requirejs.config({ enforceDefine: true, paths: { jquery: [ 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min', "libs/jquery" ] } }); require(['jquery'], function ($) { console.log(jQuery); }); 拡
HTML5のcanvas機能を使おうと思って、以下のように書いてみたけど動かなかったのです。 そんなオブジェクトないからそんなメソッドありません、て感じのエラー付きで。 var canvas = $('#drawCanvas'); var context = canvas.getContext('2d'); で、こう書いてみたらちゃんと動く。 var canvas = getElementById('drawCanvas'); var context = canvas.getContext('2d'); なんで? getElementById('drawCanvas')はjQueryなら$('#drawCanvas')じゃないの? と思ってぐぐったら、こういうことでした。 jQueryで「$("#id")」と書くと、返ってくるのはjQueryのObjectで、getElementByIdで
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています.えーと,そりゃもうゴリゴリと. 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した.canvas要素の仕様は現在進行中で色々と変化しているため,一筋縄で行かないが大方のapiについて書き上がったので公開する.なお,まだ使えない機能等満載だったり,内容に間違いがあっても中々検証することができないので,その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり,webページの機能性・視認性が重要視される昨今では,svg要素と並び重要な役割を果たしている.もともとapple社が自社製osの機能向上策として,同
リサイズのイベントは多数発生するので、リサイズが終了した時点である処理を実行する場合の方法のメモ。(「[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する」を参考にさせていただきました。) setTimeout()メソッド このメソッドに関数と時間(ミリ秒)を指定すると、指定した時間が経過したときに、指定した関数が実行される。 また setTimeout() の戻り値(タイマーID:整数)を claerTimeout() に渡すと関数の実行が取り消される。
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く