在传单地图弹出窗口中启动Jquery UI对话框的问题
Issue with launching Jquery UI Dialog box in Leaflet Maps Popup
在我的传单地图,我想有一个弹出绑定到一个图层,有缩略图的图像。
当用户单击缩略图时,将出现一个带有该图像的较大版本的灯箱。
我选择使用Jquery UI中的对话框来完成此操作。
JS Fiddle of What I have so far
/// I am using a leaflet JS Fiddle Template was provided by SO User Asad here:
/// http://stackoverflow.com/a/13699060/3679978
/// I THINK I understand the concept he explained about dynamically generating Javascript.
// Load Map stuff.
var map = L.map('map_canvas').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-light/{z}/{x}/{y}.png', {
attribution: 'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> — © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18,
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
// Create an element to hold all your text and markup
var container = $('<div />');
// Create var to hold html string for thumbnail
// Originally Based off this: http://stackoverflow.com/a/4452494/3679978
var tempimg = '<a class="preview" href="#" /><div class="myImage"><img src="http://www.w3schools.com/images/pulpit.jpg" alt="myimage" width="120" height="90"/></div>';
// Delegate all event handling for the container itself and its contents to the container
container.on('click', '#button_pdf', function() {
alert("test");
});
// same as above but for class myImage on line 20
container.on('click', '.myImage', function() {
$('div.myImage').dialog();
});
// Insert whatever you want into the container, using whichever approach you prefer
container.html("This is a link: <input id='button_pdf' type='button' value='Click to test' />."+ tempimg);
// container.append($('<span class="bold">').text(" :)"))
// Insert the container into the popup
marker.bindPopup(container[0]);
我认为问题很清楚:
- Jquery UI对话框在打开时表现异常
- 对话框关闭后缩略图消失。
Javascript,JQuery和传单仍然是新的。请建议。
注意:如果有更好的解决我的图像弹出问题,我愿意听取它。
谢谢!
figure out:
EDIT:这是JSFiddle: http://jsfiddle.net/8Lnt4/52/
//Creates the div element in jQuery
var container = $('<div/>');
// Creates a variable holding html string to go in above container
// Note I made the same image thats going to be enlarged into a smaller 120x90 thumbnail
var tempimg = '<div id="dialog" style="display: none;"><img id="image" src=""/></div><div class="myImage"><img src="http://www.w3schools.com/images/pulpit.jpg" alt="myimage" width="120" height="90"/></div> Click to enlarge';
// Upon clicking the .myImage Class in the container (which is the thumbnail) Open a jQueryUI Dialog...
container.on('click', '.myImage', function() { $('#dialog').dialog(
//...which upon when it's opened...
{open: function(){
///... assign a variable that can acess the div id 'image'...
imageTag = $('#image');
///... and set the image src in #image (note that it'll be the fullsize this time)...
imageTag.attr("src","http://www.w3schools.com/images/pulpit.jpg");
},closeOnEscape: true, modal:true});
});
container.html(tempimg);
相关文章:
- 我的jQuery插件参数没有正确启动,遇到了问题
- jQuery悬停在没有鼠标悬停的情况下启动
- jQuery mouseup在拖离链接后未启动
- 无线电输入更改的jQuery事件未启动
- Rails jquery ajax调用未启动
- Jquery时间启动计时器,我有一个计时器的代码,但它在页面加载时启动
- 重新启动jquery脚本后,角度停止工作
- jQuery事件侦听器多次启动
- 重新启动游戏jQuery功能不工作
- javascript资产中的jQuery未启动
- 使用Javascript或jQuery启动和停止引导转盘
- JQuery启动文件下载,然后运行一个函数
- Web启动JNLP Web从javascript或jquery启动
- 是否可以在jquery启动或每次操作时将变量传递给它
- 上一个完成后的jQuery启动函数
- 用于.ogg循环播放的javascript/jquery启动按钮
- 当文档准备就绪时,单击事件Jquery启动
- 如何在使用jQuery启动的模态中更新-data行属性
- 无法使用jQuery启动事件
- 使用悬停中的 jQuery 启动和停止计时器