从LinkButton的JQuery的弹出 [英] JQuery Popup from LinkButton
问题描述
我这是使用jQuery框架和ASP.NET（VB）以下code。
I have the below code which is using the JQuery framework and ASP.NET (VB).
基本上低于code段是在ASP页上，并从视图中隐藏，直到您单击超链接/按钮，然后在弹出窗口，下面是隐藏弹出code，这是我知道的工作：
Basically the below code snippet is on the asp page, and is hidden from view until you click a hyperlink/button and then the popup appears, below is the hidden popup code, which I know works:
<!--HIDDEN POPUP 1 BEGIN-->
<div class="ui-popup-screen ui-overlay-a ui-screen-hidden" id="popupDialog1-screen"> </div>
<div class="ui-popup-container pop ui-popup-hidden" id="popupDialog1-popup"><div data-role="popup" id="popupDialog1" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true">
<div data-role="header" data-theme="a" class="ui-corner-top ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Export Data</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
<h3 class="ui-title">Export Data</h3>
<asp:HiddenField ID="hidDataName" runat="server" />
<p>Choose one of the formats below to export the data to.</p>
<div data-role="controlgroup" data-type="horizontal">
<asp:LinkButton ID="btnExcel" runat="server" data-role="button"><asp:Image ID="imgExcel" runat="server" ImageUrl="~/images/Excel.ico" Width="50px" Height="50px" />Excel</asp:LinkButton>
<asp:LinkButton ID="btnPDF" runat="server" data-role="button"><asp:Image ID="imgPDF" runat="server" ImageUrl="~/images/PDF.ico" Width="50px" Height="50px" />PDF</asp:LinkButton>
<asp:LinkButton ID="btnWord" runat="server" data-role="button"><asp:Image ID="imgWord" runat="server" ImageUrl="~/images/Word.ico" Width="50px" Height="50px" />Word</asp:LinkButton>
<asp:LinkButton ID="btnCSV" runat="server" data-role="button"><asp:Image ID="imgCSV" runat="server" ImageUrl="~/images/CSV.ico" Width="50px" Height="50px" />CSV</asp:LinkButton>
</div>
</div>
</div></div>
<!--HIDDEN POPUP 1 END-->
现在我有下面这将打开没有问题的弹出罚款链接：
Now I have the link below which opens the popup fine with no issues:
<a href="#popupDialog1" data-rel="popup" data-position-to="window" data-role="button" data-inline="false" data-transition="pop" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" aria-haspopup="true" data-theme="j" aria-owns="#popupDialog1" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-hover-j ui-btn-up-j">
<span class="ui-btn-inner"><span class="ui-btn-text">Approve All</span></span></a>
不过，我希望能够在上述按钮的点击运行一些code，我一直在使用一个LinkButton，但是我不能让弹出显示尝试。我想运行一些code的原因是我需要知道在页面上按钮请求的弹出窗口。
However I want to be able to run some code on the click of the above button, I have tried using a LinkButton however I can't get the popup to show. The reason I want to run some code is I need to know what button on the page requested the popup.
我希望，有一定的道理。
I hope that makes some sense.
任何帮助AP preciated。
Any help appreciated.
谢谢，
史蒂夫
Thanks, Steve
推荐答案
我觉得你可以解决它的两种方法之一。
I think you can solve it one of two ways.
- 使用jQuery来处理click事件。
- 在控制使用的OnClientClick事件。
- 使用数据rel属性的链接按钮。</ li>
- Use jQuery to handle the click event.
- Use the OnClientClick event on the control.
- Use the data-rel attribute on the link button.
选项1：
设置的ClientIDMode =静态，最容易在我看来，或者在JavaScript（如下图所示）使用control.ClientID。这可以确保jQuery的code将执行您想要的控制。 code了jQuery和运行code。
Set the ClientIDMode="Static", easiest in my opinion, or use the control.ClientID in the javascript (shown below). This makes sure the jQuery code will execute on the control you want. Code up the jQuery and run your code.
<script>
$(document).ready(function() {
$("#btnExcel").click(function() {
$("#popupDialog1-screen").popup();
}
});
</script>
或
<script>
$(document).ready(function() {
$("#<%= btnExcel.ClientID %>").click(function() {
$("#popupDialog1-screen").popup();
}
});
</script>
选项2：
<asp:LinkButton ID="btnExcel" runat="server" OnClientClick="ExcelClick();"
data-role="button"><asp:Image ID="imgExcel" runat="server"
ImageUrl="~/images/Excel.ico" Width="50px" Height="50px" />
Excel</asp:LinkButton>
...
<script>
function ExcelClick() {
$("#popupDialog1-screen").popup();
}
</script>
选项3：
<asp:LinkButton ID="btnExcel" runat="server" data-rel="popup">
<asp:Image ID="imgExcel" runat="server" ImageUrl="~/images/Excel.ico"
Width="50px" Height="50px" />Excel
</asp:LinkButton>
请注意：
在code你把上面的code当插件运行（jQuery Mobile的）被autoinitialized。既然你想从一个链接按钮调用它，你要么需要将数据rel属性添加到链接按钮，或者您需要调用手动像我在选择1和2，请查阅jQuery Mobile的做上面的对话框的一个更详细的说明文档。
In the code you put up above the code is autoinitialized when the plugin is run (jQuery Mobile). Since you want to call it from a link button, you either need to add the data-rel attribute to the link button or you need to call the dialog manually like I did above in option 1 and 2. Consult the jQuery Mobile documentation for a more detailed explanation.
从文档：
调用插件弹出这个插件将autoinitialize任何页面上
包含与属性数据角色=弹出一个div。然而，如果
您可以根据需要直接调用插件弹出任何选择，只是
像任何jQuery插件和编程的工作，弹出
选项，方法和事件API：
Calling the popup plugin This plugin will autoinitialize on any page that contains a div with the attribute data-role="popup". However, if needed you can directly call the popup plugin on any selector, just like any jQuery plugin and programmatically work with the popup options, methods, and events API:
$（#myPopupDiv）.popup（）;
$( "#myPopupDiv" ).popup();
您将需要测试code，以确保我得到了正确的div id作为我还没有机会了。
You will need to test the code to make sure I got the correct div id as I have not had a chance.
希望这有助于。
韦德
这篇关于从LinkButton的JQuery的弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
