2017-08-07 11 views
1

InfoTemplateのHTMLで作成されたカスタムボタンにクリックイベントを添付した人は誰ですか?ここに私のInfoTemplate HTMLがあります:ArcGIS JS API 3.21 InfoTemplate ZoomInボタン

uploadInfoTemplate = new InfoTemplate ({ 
    title: "", 
    content: "<strong>Segment:</strong> ${segment}" + 
      "<hr/>" + 
      "<strong>Time:</strong> <i>${dateTime}</i>" + 
      "<div style='width: 100%; text-align:right;'>" + 
       "<input class='zoomButton' type='button' value='Zoom to' />" + 
      "</div>" 
}); 

私はデフォルトのInfoTemplate、すなわちzoomToリンク上に隠しアイテムを持っています。私は、単にズームインの機能をボタンで置き換えて、少し上手く見せたいと思っています。

答えて

0

あなただけのボタン「ズーム」の外観を改善するために探している場合は、CSSの数行は、トリックを行うことができます。

a.action.zoomTo { 
    color: #fff; 
    text-decoration: none; 
    background-color: #a8abaf; 
    border: solid #a8abaf; 
    border-radius: 5px; 
} 
    a.action.zoomTo:hover{ 
     background-color: #898b8e; 
     border: solid #898b8e; 
    } 

enter image description here

0

私は申し訳ありません@Jeremy闊歩よ、

私はこれを修正し、私の質問を更新するのを忘れたことを忘れました。

.zoomButton { 
    background: linear-gradient(#666666, #3F4041); 
    color: #ffffff; 
    border: 1px solid #000000; 
    border-radius: 0,2em; 
} 

.zoomButton:hover { 
    background: #333333; 
} 
:のCSSで

if(this.zoomButton) { 
    domConstruct.destroy(this.zoomButton); 
{ 

var zoomToButtonHTML = '<div style="width 100%;"><input class="zoomButton" type="button" value="Zoom to" /></div>'; 

this.zoomButton = domConstruct.create("div", { 
    "class": "action", 
    "id": "uploadLink", 
    "innerHTML": zoomToButtonHTML 
}, query(".actionList, this.map.infoWindow.domNode)[0]); 

var self=this; 
on(this.zoomButton, 'click', function(evt) { 
    self._zoomToPoint(evt. self.map); 
}); 

:私はこのような解決策を考え出しました

関連する問題