jQuery移动获取按钮打开弹出

时间:2022-12-04 19:04:17

I have a listview, when I click a link in the listview it launches a popup. For simplification purposes I have omitted the listview and am starting with just a single button.

我有一个listview,当我点击listview中的链接时它会弹出。为了简化,我省略了listview,只从一个按钮开始。

I want to retrieve attributes from the button that caused the popup to show, in my example the attribute named customAttr. I then want to insert the value into popupBasic.

我想从导致弹出窗口显示的按钮中检索属性,在我的例子中名为customAttr。然后我想要将值插入到popupBasic中。

Here is my very basic sample jQuery Mobile code:

以下是我最基本的jQuery移动代码示例:

<a href="#popupBasic" data-rel="popup" customAttr="value">Basic Popup</a>

<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
</div>

jsFiddle: http://jsfiddle.net/cPRCU/2/

jsFiddle:http://jsfiddle.net/cPRCU/2/

Normally when I work with jQuery (non-Mobile) I am more involved with the click event/opening of popup's/dialogs. I would like to be able to read the button that caused the popup to show, how can I do this?

通常,当我使用jQuery(非移动)时,我更关注弹出窗口/对话框的单击事件/打开。我希望能够读取弹出窗口显示的按钮,我如何做到这一点?

3 个解决方案

#1


6  

Adding a click handler to the button seems to work. In this handler, modify the popup before it gets shown:

向按钮添加单击处理程序似乎是可行的。在这个处理器中,在弹出窗口显示之前修改它:

$('a[data-rel="popup"]').click(function () {
    var link = $(this);
    var data = link.attr('customAttr')
    var popup = $(link.attr('href')); // assume href attr has form "#id"
    popup.append(($('<p />').text(data)));
});

This is a generic handler which supports a page with multiple buttons/popups. If some buttons should not have this behaviour, I would add a class to the desired button, and make the a[data-rel="popup"] selector more specific.

这是一个通用处理程序,它支持具有多个按钮/弹出窗口的页面。如果某些按钮不应该具有这种行为,我将向所需的按钮添加一个类,并使a[data-rel="popup"]选择器更具体。

See fiddle: http://jsfiddle.net/cPRCU/3/

看到小提琴:http://jsfiddle.net/cPRCU/3/

#2


3  

I did it on a listview itself as it would be more useful to you.

我是在listview上做的因为它对你更有用。

For a ListView

You have to register a click event for the <a> tags in your listview as below first.

您必须首先为listview中的标记注册一个单击事件。

$('#mylist a').bind('click', function(event){
});

meanwhile, make sure to store the data inside the anchor tag as below. data-customattr everything is small here.

同时,请确保将数据存储在锚标记中,如下所示。这里所有的数据都很小。

e.g.

如。

<a href="#popupBasic" data-rel="popup" data-customattr="value2" >Basic Popup 2</a>

Now you can read the value of data-customattr inside the click event as below

现在可以在单击事件中读取data-customattr的值,如下所示

$(this).data('customattr')

Now I assume that you have a id for the <p> tag inside the popup. Something as below

现在我假设在弹出窗口中有一个

标记的id。的东西如下

  <p id="mypopup">This is a completely basic popup, no options set.</p>

using the ID you can replace the popup's content.

使用ID可以替换弹出窗口的内容。

finally putting all together something like below

最后把所有的东西放在一起。

$('#mylist a').bind('click', function(event){
    console.log($(this).text());
   $('#mypopup').html($(this).data('customattr'));
});

Checkout this live fiddle for the working example http://jsfiddle.net/gFTzt/5/

为工作示例http://jsfiddle.net/gFTzt/5/签出此活动小提琴

For a button

If you insist on a example using button then declare a button with an ID as below

如果您坚持使用按钮的示例,那么声明一个ID如下所示的按钮

<a href="#popupBasic" data-rel="popup" id="mybutton" data-role="button" data-customattr="button value">button example</a>

As mentioned above register a click event and read the customattr value.

如上所述,注册一个单击事件并读取customattr值。

 $('#mybutton').bind('click',function(){
        alert($(this).data('customattr'));
 });

Check out this live fiddle example for both button and listview http://jsfiddle.net/gFTzt/5/

请查看按钮和listview的live fiddle示例http://jsfiddle.net/gFTzt/5/

using .attr()

Here I've used the data to get the value. without data attribute we can directly get the value from the anchor tag as below.

这里我用数据来获取值。没有数据属性,我们可以直接从下面的锚标记获取值。

E.g. we have a anchor tag as below.

我们有如下的锚标签。

<a href="#popupBasic" customattr="value1">Basic Popup 1</a>

we can read the value1 using the .attr() as below.

我们可以使用.attr()读取value1,如下所示。

$(this).attr('customattr')

Here is a Live fiddle example.

这是一个活生生的例子。

#3


0  

I was having a problem getting popups to work but I finally realized that the popup div needs to be inside the page. My popup was a sibling to the page where the popup link was and was not showing up until I moved it in to be a sibling of the link and child of the page.

我有一个问题,让弹出窗口工作,但我最终意识到弹出div需要在页面内。我的弹出框是弹出框链接所在页面的兄弟级,直到我将它移动到链接的兄弟级和页面的子级时才出现。

#1


6  

Adding a click handler to the button seems to work. In this handler, modify the popup before it gets shown:

向按钮添加单击处理程序似乎是可行的。在这个处理器中,在弹出窗口显示之前修改它:

$('a[data-rel="popup"]').click(function () {
    var link = $(this);
    var data = link.attr('customAttr')
    var popup = $(link.attr('href')); // assume href attr has form "#id"
    popup.append(($('<p />').text(data)));
});

This is a generic handler which supports a page with multiple buttons/popups. If some buttons should not have this behaviour, I would add a class to the desired button, and make the a[data-rel="popup"] selector more specific.

这是一个通用处理程序,它支持具有多个按钮/弹出窗口的页面。如果某些按钮不应该具有这种行为,我将向所需的按钮添加一个类,并使a[data-rel="popup"]选择器更具体。

See fiddle: http://jsfiddle.net/cPRCU/3/

看到小提琴:http://jsfiddle.net/cPRCU/3/

#2


3  

I did it on a listview itself as it would be more useful to you.

我是在listview上做的因为它对你更有用。

For a ListView

You have to register a click event for the <a> tags in your listview as below first.

您必须首先为listview中的标记注册一个单击事件。

$('#mylist a').bind('click', function(event){
});

meanwhile, make sure to store the data inside the anchor tag as below. data-customattr everything is small here.

同时,请确保将数据存储在锚标记中,如下所示。这里所有的数据都很小。

e.g.

如。

<a href="#popupBasic" data-rel="popup" data-customattr="value2" >Basic Popup 2</a>

Now you can read the value of data-customattr inside the click event as below

现在可以在单击事件中读取data-customattr的值,如下所示

$(this).data('customattr')

Now I assume that you have a id for the <p> tag inside the popup. Something as below

现在我假设在弹出窗口中有一个

标记的id。的东西如下

  <p id="mypopup">This is a completely basic popup, no options set.</p>

using the ID you can replace the popup's content.

使用ID可以替换弹出窗口的内容。

finally putting all together something like below

最后把所有的东西放在一起。

$('#mylist a').bind('click', function(event){
    console.log($(this).text());
   $('#mypopup').html($(this).data('customattr'));
});

Checkout this live fiddle for the working example http://jsfiddle.net/gFTzt/5/

为工作示例http://jsfiddle.net/gFTzt/5/签出此活动小提琴

For a button

If you insist on a example using button then declare a button with an ID as below

如果您坚持使用按钮的示例,那么声明一个ID如下所示的按钮

<a href="#popupBasic" data-rel="popup" id="mybutton" data-role="button" data-customattr="button value">button example</a>

As mentioned above register a click event and read the customattr value.

如上所述,注册一个单击事件并读取customattr值。

 $('#mybutton').bind('click',function(){
        alert($(this).data('customattr'));
 });

Check out this live fiddle example for both button and listview http://jsfiddle.net/gFTzt/5/

请查看按钮和listview的live fiddle示例http://jsfiddle.net/gFTzt/5/

using .attr()

Here I've used the data to get the value. without data attribute we can directly get the value from the anchor tag as below.

这里我用数据来获取值。没有数据属性,我们可以直接从下面的锚标记获取值。

E.g. we have a anchor tag as below.

我们有如下的锚标签。

<a href="#popupBasic" customattr="value1">Basic Popup 1</a>

we can read the value1 using the .attr() as below.

我们可以使用.attr()读取value1,如下所示。

$(this).attr('customattr')

Here is a Live fiddle example.

这是一个活生生的例子。

#3


0  

I was having a problem getting popups to work but I finally realized that the popup div needs to be inside the page. My popup was a sibling to the page where the popup link was and was not showing up until I moved it in to be a sibling of the link and child of the page.

我有一个问题,让弹出窗口工作,但我最终意识到弹出div需要在页面内。我的弹出框是弹出框链接所在页面的兄弟级,直到我将它移动到链接的兄弟级和页面的子级时才出现。