切换翻转开关后如何使弹出屏幕出现?

Posted

技术标签:

【中文标题】切换翻转开关后如何使弹出屏幕出现?【英文标题】:How do I make a popup screen to appear once I toggle a flipswitch? 【发布时间】:2019-04-14 12:44:45 【问题描述】:

我正在使用 jQuery Mobile 创建一个学校项目。

我希望有一个分配了是/否的切换按钮,当切换选项时,我希望出现相应的弹出窗口以确认更改。

执行此操作的最佳方法是什么,因为我尝试了几种变体,但都没有运气。谢谢!

<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <form id="flipswitchTeacher">
            <label for="flipswitch">Are you available to teach?</label>
            <select name="flipswitch" id="flipswitch" data-role="flipswitch" data-corners="false">
                <option a href="#confirmTeacherNo" value="no">NO</option>
                <option a href="#confirmTeacherYes" value="yes">YES</option>
            </select>
        </form>


        <div data-role="popup" id="confirmTeacherNo" class="ui-content" data-theme="a">
        <p>Confirm No</p>
        </div>

        <div data-role="popup" id="confirmTeacherYes" class="ui-content" data-theme="a">
        <p>Confirm Yes</p>
        </div>

【问题讨论】:

请展示您尝试过但没有成功的方法 抱歉,我忘了包含 jQM 库。它已被修改。 @A.M.您的示例似乎不包含任何 javascript 或 jQuery 脚本。您将需要创建一个 change 回调来查看该值并在该值符合您的条件时创建对话框或弹出窗口。 【参考方案1】:

如果您查看此处的详细信息:https://api.jquerymobile.com/popup/,您将看到:

使用基于标记的配置,当点击带有data-rel="popup" 的链接时,将显示链接的href 中引用的id 对应的弹出容器。要以编程方式打开弹出窗口,请使用弹出容器上的 open 方法调用 popup:

$( "#myPopupDiv" ).popup( "open" )

可以这样执行:

$(function() 
  $("#flipswitch").change(function(e) 
    var target = $("option:selected", this).attr("href");
    $(target).popup("open");
  );
);
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<form id="flipswitchTeacher">
  <label for="flipswitch">Are you available to teach?</label>
  <select name="flipswitch" id="flipswitch" data-role="flipswitch" data-corners="false">
    <option href="#confirmTeacherNo" value="no">NO</option>
    <option href="#confirmTeacherYes" value="yes">YES</option>
  </select>
</form>


<div data-role="popup" id="confirmTeacherNo" class="ui-content" data-theme="a">
  <p>Confirm No</p>
</div>

<div data-role="popup" id="confirmTeacherYes" class="ui-content" data-theme="a">
  <p>Confirm Yes</p>
</div>

希望对您有所帮助。

【讨论】:

以上是关于切换翻转开关后如何使弹出屏幕出现?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Mobile - 单击时更改翻转开关

关闭主窗口后如何使弹出窗口自动关闭

在我取消选中收音机并将所有变量设置为未定义后,我的弹出元素将再次出现

华为手机屏幕出现涂鸦

使用带有 angularjs 和 jquery mobile 的翻转切换开关

什么是 jQuery,我可以在弹出窗口中显示选定复选框、下拉列表和翻转开关的文本值