ラベル custom tooltips の投稿を表示しています。 すべての投稿を表示
ラベル custom tooltips の投稿を表示しています。 すべての投稿を表示

2015年1月22日木曜日

2 - ol3.1ex 50b - Custom tooltips 2

「(button-title.js(250-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

「250-ol3ex.js」
var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
  /** ol.layer.Tile 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels for 
   * specific resolutions. 
   * プリレンダリング(事前描画)を提供するレイヤソースのための、
   * 特定の解像度でのズームレベルによって編成されているグリッドの
   * タイルイメージ。(ol3 API)
   */
   source: new ol.source.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。(ol3 API)
    */
  })
 ],
 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します
 target: 'map',
 view: new ol.View({
  center: [-8730000, 5930000],
  rotation: Math.PI / 5,
  /** Math.PI
   * 円周率。約 3.14159 です。
   * (MDN[https://developer.mozilla.org/ja/docs/Web
   * /JavaScript/Reference/Global_Objects/Math/PI])
   */
  zoom: 8
 })
});
$('.ol-zoom-in, .ol-zoom-out').tooltip({
/** Tooltips tooltip.js
 * Inspired by the excellent jQuery.tipsy plugin written 
 * by Jason Frame; Tooltips are an updated version, 
 * which don't rely on images, use CSS3 for animations, 
 * and data-attributes for local title storage.
 * Jason Frame によって書かれた優れたjQuery.tipsyプラグイン
 * に触発されました。Tooltips は、更新されたバージョンで、画像
 * に依存しない、アニメーションに CSS3 を使用し、ローカルタイト
 * ル·ストレージのためのデータの属性です。
 * (Bootstrap[http://getbootstrap.com/javascript/
 * #tooltips])
 * 
 * カーソルを何かの項目に合わせたとき、その項目に覆いかぶさるよう
 * な形で小さな枠が出現し、その枠内には選択された項目に関する補足
 * 情報が表示される。
 * (ツールチップ[http://ja.wikipedia.org/wiki/
 * %E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97])
 */
 placement: 'right'
 /** placement
  * How to position the tooltip - top | bottom | left | 
  * right | auto.
  * ツールチップの配置方法 - top | bottom | left | right | auto
  * (Bootstrap[http://getbootstrap.com/javascript/
  * #tooltips])
   */
});
$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
 placement: 'left'
});


「JavaScript Bootstrap(http://getbootstrap.com/javascript/)」の「Tooltips tooltip.js」に次のようにあります。

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
ジェイソンフレームによって書かれた優れた jQuery.tipsy プラグインからインスピレーションを受けています。ツールチップは更新されたバージョンで、画像に依存せずに、アニメーションにCSS3を、および、ローカルタイトル·ストレージのデータ属性を使用しています。

Tooltips with zero-length titles are never displayed.
長さゼロのタイトルのツールチップが表示されることはありません。

$('#example').tooltip(options)
「Options」
Name: placement
Type: string|function
Default: 'top'
Description:
How to position the tooltip - top | bottom | left | right | auto.

When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
"オート"を指定した場合、動的に tooltip を再配向します。placement が「auto left」の場合、tooltip は可能なら左に表示され、それ以外の場合は右に表示されます。

When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.
関数が placement を決定するために使用される場合には、その最初の引数として tooltip のDOMノードと、その第二引数としてトリガー要素のDOMノードとに呼びだされます。このコンテキストは、 tooltip インスタンスに設定されています。


「v3.1.1/ol/ol/control/zoomcontrol.js」の一部を抜粋します。
---
ol.control.Zoom = function(opt_options) {
 var options = goog.isDef(opt_options) ? opt_options : {};
 var className = goog.isDef(options.className) ? options.className : 'ol-zoom';
 var delta = goog.isDef(options.delta) ? options.delta : 1;
 var zoomInLabel = goog.isDef(options.zoomInLabel) ?
  options.zoomInLabel : '+';
 var zoomOutLabel = goog.isDef(options.zoomOutLabel) ?
  options.zoomOutLabel : '\u2212';
 var zoomInTipLabel = goog.isDef(options.zoomInTipLabel) ?
  options.zoomInTipLabel : 'Zoom in';
 var zoomOutTipLabel = goog.isDef(options.zoomOutTipLabel) ?
  options.zoomOutTipLabel : 'Zoom out';
 var inElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
  'class': className + '-in',
  'type' : 'button',
  'title': zoomInTipLabel
 }, zoomInLabel);
---
 var outElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
  'class': className + '-out',
  'type' : 'button',
  'title': zoomOutTipLabel
 }, zoomOutLabel);

---

2 - ol3.1ex 50a - Custom tooltips 1

「Custom tooltips((button-title.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.1.1」->「examples」->「button-title.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「button-title.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「250-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「button-title.html」の内容をコピーして「250-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「250-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「button-title.js」の内容をコピーして貼り付け、修正します。「button-title-require.js」も「250-ol3ex-require.js」に貼り付けます。


「250-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.1.1/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <style type="text/css">
   .tooltip-inner {
    white-space: nowrap;
   }
  </style>
  <title>ol3 custom tooltips example</title>
 </head>
 <body>
  <!-- 
  bootstrap.min.css, bootstrap-responsive.min.css で設定されたセレクタを使用。
  -->
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
     <!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
     -->
      <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.1.1/examples/"><img src="v3.1.1/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Custom tooltips</h4>
     <p id="shortdesc">
      This example shows how to customize the buttons tooltips with
      <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
     </p>
     <div id="docs">
      <!--
      See the <a href="button-title.js" target="_blank">button-title.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      See the <a href="250-ol3ex.js" target="_blank">250-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">custom, tooltip</div>
    </div>
   </div>
  </div>
  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   bootstrap.min.js(tooltip など)
   example-behaviour.js(Examples用 JSコード[文字コードなど])
  -->
  <script src="v3.1.1/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.1.1/resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="v3.1.1/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=button-title" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=250-ol3ex" type="text/javascript"></script>
 </body>
</html>