我正在尝试将图像扩展为可移动的小窗口。 html是用xslt创建的，但这里是img标签，点击后应该展开。我尝试使用onclick="functionname()"，但它说功能未定义。
<img class='AOIMapFir' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=100&height=85&layer={$identifier}_{$codeLVal}' onerror="this.setAttribute('src','/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=100&height=85');"></img>
这是javascript中的函数：
NPSIMapPopUp : function(){
$('.AOIMapFir').click(function(){
$('#dialog').dialog({
appendTo: ".widget",
title: "Area of Interest",
resizable: false,
position: {
my: "center",
at: "center",
of: ".container"
},
width: "auto",
height: "auto",
closeOnEscape: true,
show: { effect: "blind", duration: 200 }
});
$("#dialog").dialog("open");
$(".ui-widget").css({
"font-size": +10+"px",
"background-color": "none"
});
});
}
我尝试在js文件的顶部使用'click .AOIMapFir' : 'NPSIMapPopUp'，但是当我调试时，我从未看到它进入函数，无论如何我已经尝试过。谢谢你的帮助！
<xsl:if test="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes">
<li class="attr">
<div class="col1"></div>
<div class="col2">Raster Types</div>
<div class="col3">
<xsl:for-each select="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes">
<!-- shift the context to the lookup elements -->
<xsl:variable name="raster_label">
<xsl:apply-templates select="$metacard_label-top">
<xsl:with-param name="curr-label" select="@codeList"/>
</xsl:apply-templates>
</xsl:variable>
<xsl:choose>
<xsl:when test=". != ''"> <!-- If the element value is not null, display it. Else display attribute value. -->
<xsl:value-of select="." /> - <xsl:value-of select="$raster_label" /><br />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@codeListValue" /> - <xsl:value-of select="$raster_label" /><br />
</xsl:otherwise>
</xsl:choose>
<xsl:variable name="rasterType" select="cdpeenv:CE_Metadata/cdpeenv:resourceMetadata/gmd:MD_Metadata/gmd:fileInformation/gmd:MD_FileInformation/gmd:rasterTypes"></xsl:variable>
<xsl:variable name="identifier" select="/tdf:TrustedDataObject/tdf:HandlingAssertion/tdf:HandlingStatement/edh:ExternalEdh/edh:Identifier"></xsl:variable>
<xsl:variable name="codeLVal" select="@codeListValue"/>
<xsl:variable name="aoi_min_long" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:westBoundLongitude/gco:Decimal"/>
<xsl:variable name="aoi_min_lat" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:southBoundLatitude/gco:Decimal"/>
<xsl:variable name="aoi_max_long" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:eastBoundLongitude/gco:Decimal"/>
<xsl:variable name="aoi_max_lat" select="$current/cdpeenv:CE_Metadata/cdpeenv:subjectMetadata/cdpeenv:CE_Subject_Metadata/cdpeenv:CE_Coverage_Metadata/cdpeenv:extent/gmd:EX_Extent/gmd:geographicElement/gmd:EX_GeographicBoundingBox/gmd:northBoundLatitude/gco:Decimal"/>
<img class='AOIMapFir' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=100&height=85&layer={$identifier}_{$codeLVal}' ></img><!-- this works -->
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable {$identifier}" style="display: none; height: auto; width: auto; font-size: 10px;" tabindex="-1" role="dialog" aria-describedby="dialog" aria-labelledby="ui-id-1"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Area of Interest</span><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close" style="font-size: 10px;"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button></div><div id="dialog" class="hide-dialog ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 81px; max-height: none; height: auto;"><img class='aoi' src='/api/thumbnails/npsi?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300&layer={$identifier}_{$codeLVal}' onerror="this.setAttribute('src','/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=400&height=300');"></img></div></div>
</xsl:for-each>
</div>
</li>
</xsl:if>
答案 0 :(得分：0)
我最终能够创建一个有效的点击事件的唯一方法是绑定js文件中render函数内的click函数。
define(
[ 'sandbox', 'text!../templates/unitinfo.html',
'../collections/metacards', '../models/metacard',
'cdpe$/metacard-view', 'cdpe_config',
'third/jquery.mCustomScrollbar', 'third/jstree' ],
function(sandbox, unitInfoTemplate, MetacardsCol, Metacard,
MetacardView, cdpeConfig) {
var AppView = sandbox.mvc
.View({
unitInfoTemplate : sandbox.template
.parse(unitInfoTemplate),
collection : new MetacardsCol(),
events : {
'click .close' : function() {
sandbox.emit("preview-pane.close");
},
'click .mc-menu li' : 'switchTab',
'click .findUIC' : 'findUIC',
'click .newProjectBtn' : 'SubmitNewProject',
'click .entity-dropdown' : 'showEntityMenu',
'click .findMission' : 'findMission',
'click .oob-dropdown' : 'showOOBMenu',
'click .jstree-icon' : 'insertSearchIcon',
'click .AOIMap' : 'AOIMapPopUp',
'click .SAOIMap' : 'SAOIMapPopUp'
},
initialize : function() {
sandbox.events.bindAll(this);
this.collection.bind('change:html', function() {
});
$(window).scroll(
function() {
$('.preview-pane').css('left',
850 - $(window).scrollLeft());
});
$(window)
.resize(
function() {
this
.$('.mc')
.css(
'height',
$(window)
.height()
- 220
+ 'px')
.mCustomScrollbar(
{
theme : "cdpe-preview",
advanced : {
updateOnContentResize : true
}
});
});
},
load : function(options) {
sandbox.logger.info('Loading Preview Content');
this.$el.css('display', 'inline-block');
this.getMetacard(options);
/*
* var model = new Metacard( { id: object } ), that =
* this; model.bind('change:html', function() {
* that.$('.content').html(model.get('html'));
* that.$('.mc\\.display').metacardView(); });
*/
},
hide : function(object) {
this.$el.css('display', 'none');
},
render : function(model) {
var that = this;
this.$('.mc\\.display').remove();
this.$('.ph').remove();
this.$('.content').append(
this.addRowShading(model.get('html')));
this.$('.mc\\.display').metacardView();
this.$('.mc').css('height',
$(window).height() - 220 + 'px')
.mCustomScrollbar({
theme : "cdpe-preview",
advanced : {
updateOnContentResize : true
}
});
this.createExpandingAttrs();
// this.$( '.mc\\.display'
// ).metacardView('setTabContent', { name:'oob',
// title: 'Order of Battle Hierarchy' , content:
// '<div id="oob_hierarchy"></div>'});
this.$("#oob_hierarchy").jstree({
"json_data" : {
"data" : model.get('oob-tree-json')
},
"plugins" : [ "themes", "json_data", "ui" ],
"themes" : {
"theme" : "classic",
"dots" : false,
"icons" : true
}
}).bind("select_node.jstree",
function(event, data) {
if (data.rslt.obj.data("unit-info")) {
that.toggleUnitInfo(data.rslt.obj);
}
});
// this.$( '.mc\\.display'
// ).metacardView('setActiveTab', { tabName: 'oob' }
// );
>>>>>>>>>>>>>>> $('.AOIMapFir').click(function(){
Alertify.dialog.alert('clicked');
})
this.delegateEvents();
},
createExpandingAttrs : function() {
this.$(".attr.expand ul .toggle").bind(
'click',
function(event) {
var topLine = $(this).closest("li");
if ($(this).hasClass('closed')) {
$(this).removeClass("closed")
.addClass("open"); // toggle
// plus/minus
topLine.siblings().css("display",
"list-item"); // toggle
// hidden
// lines
} else {
$(this).removeClass("open")
.addClass("closed");
topLine.siblings().css('display',
'none');
}
return false;
});
},
insertSearchIcon : function(evt) {
var treeExists = $('.jstree-icon').html();
var currentTarget = $(evt.currentTarget);
if (treeExists != null) { // Check to see if tree
// exists
var elementExists = document
.getElementsByClassName('oob-dropdown');
zero = 0;
if (elementExists.length == zero) { // Check to
// see if
// button is
// already
// there
$('.jstree-leaf')
.each(
function() { // If not a
// unit put
// button
var id = this.id;
if (id.indexOf("unit") == -1) {
$(this)
.prepend(
'<button class="oob-dropdown" id="oob-button"></button>');
}
});
}
}
},
getMetacard : function(options) {
// this.insertSearchIcon();
this.$('.mc\\.display').remove();
this.$('.ph').remove();
this.$('.content').append(
'<span class="ph">Loading</span>');
var self = this, model = this.collection
.get(options.id);
if (model && model.get('html')) {
this.render(model);
} else if (model) {
sandbox.logger
.info('Model html empty, attempting fetch from server');
model.fetch({
error : function(model, jqXHR, options) {
sandbox.emit('error', {
action : 'initialError',
jqXHR : jqXHR
});
}
});
} else {
sandbox.logger
.info('Model not in local storage, fetching from server');
model = this.fetchMetacard(options);
if (model) {
model.once('change:html', function() {
if (this.get('oob-tree-json')) {
self.render(this);
}
});
model.once('change:oob-tree-json',
function() {
if (this.get('html')) {
self.render(this);
}
});
}
}
},
fetchMetacard : function(options) {
var metacard = (options && options.id)
&& new Metacard({
id : options.id
});
// metacard.fetch();
this.collection.add(metacard);
return metacard;
},
preview : function() {
this.$('.preview-pane').toggleClass('hover');
},
toggleUnitInfo : function(node) {
var info = node.children('.unit-info');
if (info.length && info.css('display') === 'none') {
info.css('display', 'block');
} else if (info.length) {
info.css('display', 'none');
} else {
this.showUnitInfo(node);
}
},
showUnitInfo : function(node) {
var unitInfo = node.data("unit-info"), obj = {
data : {}
}, a = node.children('a');
for ( var attr in unitInfo) {
obj.data[this.capitalise(attr)] = unitInfo[attr];
}
$(this.unitInfoTemplate(obj)).insertAfter(a);
},
switchTab : function(evt) {
var tab = $(evt.currentTarget), pageName = tab
.data('page'), page = this
.$('.' + pageName), activePage = this.$(
'.mc-menu .active').data('page');
// if the tab is already active, do nothing
if (!tab.hasClass('active')) {
this.$('.mc-menu .active')
.removeClass('active');
this.$('.' + activePage).css({
"display" : "none"
});
tab.addClass('active')
page.css({
"display" : "block"
});
}
},
capitalise : function(string) {
return string.charAt(0).toUpperCase()
+ string.slice(1);
},
findUIC : function(evt) {
evt.preventDefault();
var uic = $(evt.currentTarget).data('uic');
sandbox.emit("search-submit", {
query : uic
});
// function (e){
// var thumbContainer =
// document.getElementById("findUIC");
// var thumbnail = document.createElement("img");
// thumbnail.onload=function() {
// thumbContainer.appendChild(thumbnail);
// }
// thumbnail.src = "../apps/";
// }
},
findMission : function(evt) {
evt.preventDefault();
var queryData = $(evt.currentTarget)
.data('mission');
var mission = "MissionAreaFacet:" + queryData;
sandbox.emit("search-submit", {
query : mission
});
},
SubmitNewProject : function() {
var proj = this.$('.projectTitle').text();
// var proj = node.data("projectTitle");
// var proj = node.data("projectTitle"), obj = {
// data : {} }, a = node.children('a');
// var unit_title =
// $(this.unitInfoTemplate(obj)).insertAfter(a);
// var proj =
// $(this.unitInfoTemplate(obj)).insertAfter(a);
Alertify.dialog.alert(proj);
sandbox.emit("edcss-add", proj);
},
addRowShading : function(html) {
var $mc = $(html);
$('.page', $mc)
.each(
function(index, value) {
$(this)
.children('ul')
.children('li')
.each(
function(index,
value) {
if (index % 2 === 0) {
$(value)
.addClass(
"even")
}
;
})
});
return $mc;
},
SAOIMapPopUp : function(evt) {
$('#dialog2').dialog({
appendTo : ".widget",
title : "Area of Interest",
resizable : false,
position : {
my : "center",
at : "center",
of : ".container"
},
width : "auto",
height : "auto",
closeOnEscape : true,
show : {
effect : "blind",
duration : 200
}
});
// $('body').append('<img
// src="/api/thumbnails/edcss?bbox={$aoi_min_long},{$aoi_min_lat},{$aoi_max_long},{$aoi_max_lat}&width=80&height=80"></img></div>');
$("#dialog2").dialog("open");
$(".ui-widget").css({
"font-size" : +10 + "px",
"background-color" : "none"
});
},
AOIMapPopUp : function(evt) {
$('#dialog').dialog({
appendTo : ".widget",
title : "Area of Interest",
resizable : false,
position : {
my : "center",
at : "center",
of : ".container"
},
width : "auto",
height : "auto",
closeOnEscape : true,
show : {
effect : "blind",
duration : 200
}
});
$("#dialog").dialog("open");
$(".ui-widget").css({
"font-size" : +10 + "px",
"background-color" : "none"
});
},
showEntityMenu : function(evt) { // Drop down menu
// for EDCSS
// Note: the message column in the logtransaction
// file size
// needs to be increased for the search related
// query to work (10000)
var btn = $(evt.currentTarget);
zero = 0;
minus = -1;
entityName = btn.siblings('span').text(),
entityMap = _.where(
cdpeConfig.oobEntityMap, {
"edcss name" : entityName
});
if (entityMap.length == zero) {
entityMap = null;
}
function getRelEnt(eMap) { // Pull each related OOB
// entity
if (eMap != null) {
var result = "";
var numOfObj = eMap.length;
for (i = 0; i < numOfObj; i++) {
if (i + 1 == numOfObj) {
result += '"' + eMap[i]["obs name"]
+ '"' + " OR " + entityName;
} else {
result += '"' + eMap[i]["obs name"]
+ '"' + " OR ";
}
}
return result;
}
}
html = '<div class="entity-dropdown-menu">'
+ '<ul><li class="search-exact">Search Exact Text</li>';
html += entityMap ? '<li class="search-related">Search Related OOB Entities</li></ul></div>'
: '</ul></div>'
$dropdown = $(html);
btn.addClass('open').after($dropdown);
// Prevents from double opening of same menu
btn.on('click', function(event) {
if (btn.find(".entity-dropdown-menu")) {
$dropdown.remove();
}
});
$(document)
.on(
'click',
function(event) { // Gets the menu
// to close when
// clicking
// anywhere else
if (!$(event.target).closest(
btn).length) {
if (btn.hasClass('open')
&& $dropdown
.is(':visible')) {
btn.removeClass('open');
$dropdown.remove();
}
}
});
(function() { // Sets the behavior of button/menu
var time = 1000, timer;
function handlerIn() {
clearTimeout(timer);
$dropdown.stop(true).css('opacity', 1)
.show();
}
function handlerOut() {
timer = setTimeout(function() {
$dropdown.fadeOut(500);
btn.removeClass('open');
}, time);
}
$dropdown.hover(handlerIn, handlerOut);
$(evt.currentTarget).hover(handlerIn,
handlerOut);
}());
var fixEntNme = entityName; // Replaces / with a
// space from the
// entityName to allow
// for searching exact
// terms
while (fixEntNme.search("/") != minus) {
fixEntNme = fixEntNme.replace("/", " ");
}
entityName = fixEntNme;
$dropdown.on('click', '.search-exact', function() {
sandbox.emit("search-submit", {
query : entityName,
resetFilters : true
});
});
$dropdown.on('click', '.search-related',
function() {
sandbox.emit("search-submit", {
query : getRelEnt(entityMap),
resetFilters : true
});
});
},
showOOBMenu : function(evt) { // Drop down menu for
// JTDS
$(".oob-dropdown-menu").each(function() {
$(".oob-dropdown-menu").remove();
});
var btn = $(evt.currentTarget);
zero = 0;
minus = -1;
entityName = btn.siblings('a').text();
entityName2 = entityName.substring(1,
entityName.length);
entityMap = _.where(cdpeConfig.oobEntityMap, {
"obs name" : entityName2
});
if (entityMap.length == zero) {
entityMap = null;
}
function getRelEnt(eMap) { // Pull each related OOB
// entity
if (eMap != null) {
var result = "";
var numOfObj = eMap.length;
for (i = 0; i < numOfObj; i++) {
if (i + 1 == numOfObj) {
result += '"'
+ eMap[i]["edcss name"]
+ '"' + " OR "
+ entityName2;
} else {
result += '"'
+ eMap[i]["edcss name"]
+ '"' + " OR ";
}
}
return result;
}
}
html = '<div class="oob-dropdown-menu">'
+ '<ul><li class="search-exact">Search Exact Text</li>';
html += entityMap ? '<li class="search-related">Search Related EDCSS Entities</li></ul></div>'
: '</ul></div>'
$dropdown1 = $(html);
btn.addClass('open').before($dropdown1);
// Prevents from double opening of same menu
btn.on('click', function(event) {
$(".oob-dropdown.open").each(
function() {
$(".oob-dropdown.open")
.removeClass('open');
});
});
$(document)
.on(
'click',
function(event) { // Gets the menu
// to close when
// clicking
// anywhere else
if (!$(event.target).closest(
btn).length) {
if (btn.hasClass('open')
&& $dropdown1
.is(':visible')) {
btn.removeClass('open');
$dropdown1.remove();
}
}
});
(function() { // Sets the behavior of button/menu
var time = 1000, timer;
function handlerIn() {
clearTimeout(timer);
$dropdown1.stop(true).css('opacity', 1)
.show();
}
function handlerOut() {
timer = setTimeout(function() {
$dropdown1.fadeOut(500);
btn.removeClass('open');
}, time);
}
$dropdown1.hover(handlerIn, handlerOut);
$(evt.currentTarget).hover(handlerIn,
handlerOut);
}());
$dropdown1.on('click', '.search-exact', function() {
sandbox.emit("search-submit", {
query : entityName2,
resetFilters : true
});
});
$dropdown1.on('click', '.search-related',
function() {
sandbox.emit("search-submit", {
query : getRelEnt(entityMap),
resetFilters : true
});
});
}
}); // End AppView
return AppView;
});