1

我在弹出窗口中有 3 个选项卡。根据单击的超链接，我希望它可以激活特定的选项卡。

剥离了所有非必要代码后，如果超链接应用了“ui-btn”类，它似乎会失败。如果链接未设置样式，则它可以正常工作。 它选择了正确的选项卡，但它不会使导航栏链接处于活动状态/突出显示。

有人能对此有所了解吗？或者一个简单的解决方法。

请参阅JSFiddle 演示

HTML

<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">

<main class="ui-content">
<form action="" method="post" id="CC_dayform" data-ajax="false">

<div data-role="tabs" id="tabs">
  <div data-role="navbar">Type:
    <ul>
      <li><a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a></li>
      <li><a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a></li>
      <li><a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a></li>
    </ul>
  </div>

  <div id="CC_OO_tab">
        <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
                <input type="checkbox" name="OO_req" id="CC_OO_req" />
                <label for="CC_OO_req">OO</label>
            </fieldset>
        </div>
    </div>

  <div id="CC_CLO_tab">
        <div class="ui-field-contain">

            <fieldset data-role="controlgroup">
            <input type="checkbox" name="CLO_req" id="CC_CLO_req" />
            <label for="CC_CLO_req">CLO</label>
            </fieldset>
        </div>

    </div>
    <div id="CC_DO_tab">
        <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
                <input type="checkbox" name="DO_req" id="CC_DO_req" />
                <label for="CC_DO_req">DO</label>
            </fieldset>
        </div>
</div>

<fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
<button type="submit" form="CC_dayform">Save</button>
<a href="#" data-rel="back" onclick="document.getElementById('CC_dayform').reset();" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
</fieldset>

</form>
</main>
</div>



These don't work...
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" class="ui-btn ui-btn-a ui-btn-inline">OO chosen</a> 
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');" class="ui-btn ui-btn-a ui-btn-inline">CLO chosen</a> 
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');" class="ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>
As they're 'ui-btn'
<br />
These work--><a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" >OO chosen</a> 
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');">CLO chosen</a> 
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');">DO Chosen</a> as they have no 'ui-btn'

jQuery

function editDayform(day, OO, CLO, DO) {
  if (OO == 'on') {
    $('#CC_OO_tab_link').trigger('click');
  } else if (CLO == 'on') {
    $('#CC_CLO_tab_link').trigger('click');
  } else if (DO == 'on') {
    $('#CC_DO_tab_link').trigger('click');
  }
  if (OO == 'on') {
    $('#CC_OO_req').prop('checked', true).checkboxradio('refresh');
  }
  if (CLO == 'on') {
    $('#CC_CLO_req').prop('checked', true).checkboxradio('refresh');
  }
  if (DO == 'on') {
    $('#CC_DO_req').prop('checked', true).checkboxradio('refresh');
  }
  return true;
}
4

1 回答 1

1

首先解决你的问题。
我不确定，幕后究竟发生了什么。但是，如果您单击 jquery-mobile 按钮.ui-btn，jquery-mboile 将从.ui-btn-active您页面上的所有其他按钮中删除并突出显示被单击的按钮。这需要一些时间。但是您在 jquery-mobile 完成删除所有.ui-btn-active.
如果您延迟$('#CC_OO_tab_link').trigger('click');并且 1 毫秒已经足够，它会起作用。查看代码片段

	function editDayform(day, OO, CLO, DO) {
	  if (OO == 'on') {

	    setTimeout(function() {
	      $('#CC_OO_tab_link').trigger('click');
	    }, 1);

	  } else if (CLO == 'on') {
	    setTimeout(function() {
	      $('#CC_CLO_tab_link').trigger('click');
	    }, 1);


	  } else if (DO == 'on') {
        setTimeout(function() {
	      $('#CC_DO_tab_link').trigger('click');
	    }, 1);
	  }
	  if (OO == 'on') {
	    $('#CC_OO_req').prop('checked', true).checkboxradio('refresh');
	  }
	  if (CLO == 'on') {
	    $('#CC_CLO_req').prop('checked', true).checkboxradio('refresh');
	  }
	  if (DO == 'on') {
	    $('#CC_DO_req').prop('checked', true).checkboxradio('refresh');
	  }
	  return true;
	}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">

  <main class="ui-content">
    <form action="" method="post" id="CC_dayform" data-ajax="false">

      <div data-role="tabs" id="tabs">
        <div data-role="navbar">
          Type:
          <ul>
            <li>
              <a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a>
            </li>
            <li>
              <a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a>
            </li>
            <li>
              <a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a>
            </li>
          </ul>
        </div>

        <div id="CC_OO_tab">
          <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
              <input type="checkbox" name="OO_req" id="CC_OO_req" />
              <label for="CC_OO_req">OO</label>
            </fieldset>
          </div>
        </div>

        <div id="CC_CLO_tab">
          <div class="ui-field-contain">

            <fieldset data-role="controlgroup">
              <input type="checkbox" name="CLO_req" id="CC_CLO_req" />
              <label for="CC_CLO_req">CLO</label>
            </fieldset>
          </div>

        </div>
        <div id="CC_DO_tab">
          <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
              <input type="checkbox" name="DO_req" id="CC_DO_req" />
              <label for="CC_DO_req">DO</label>
            </fieldset>
          </div>
        </div>

        <fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
          <button type="submit" form="CC_dayform">
            Save
          </button>
          <a href="#" data-rel="back" onclick="document.getElementById('CC_dayform').reset();" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
        </fieldset>

    </form>
  </main>
  </div>

  These don't work...
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" class="ui-btn ui-btn-a ui-btn-inline">OO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');" class="ui-btn ui-btn-a ui-btn-inline">CLO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');" class="ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>
  As they're 'ui-btn'
  <br />These work--><a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');">OO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');">CLO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');">DO Chosen</a> as they have no 'ui-btn'

但是你的代码看起来很奇怪，里面有很多代码味道。

第一：所有onclick()在你的链接。您应该删除它们，而是应该将事件绑定到按钮。
我为按钮添加了一个名为 .dayformButton 的类和一个自定义数据 attr data-dayorm=""。然后我们在 dayformButton 类上绑定一个 click 事件，如果该事件发生，我们查看哪个按钮被点击（使用 data-dayform 属性），然后我们将此属性保存到一个 var 中，以使其可用于弹出事件侦听器。

JQuery-mobile 为所有小部件提供了许多不同的事件。在这种情况下，我们可以从弹出窗口中获取事件。我们绑定的第一个事件是beforeposition.

在弹出窗口计算将出现的坐标之前触发

在屏幕上显示弹出窗口之前，我们触发右侧选项卡上的单击事件并选中右侧复选框。您可以更改beforeposition为afteropen，您将看到复选框和选项卡在弹出窗口打开后立即激活。

最后一步，我们在弹出窗口关闭时绑定一个事件。jquery-mobile 事件afterclose

当弹出窗口完全关闭时触发

在弹出窗口关闭后，我们使用此事件重置表单。这样我们会onclick从您的 html 中删除最后一个。

您的 editDayform 函数看起来也很奇怪。你在重复自己。您正在做同样的事情 3 次，只是使用了不同的 ID。更简单的方法是将 id 更改为传递的值。这样你就可以摆脱所有这些 if 和 else 了。

	 // Set a global var
	var dayform = null;

	 // Bind a Click Event
	$(".dayformButton").on('click', function() {
	  // Which Button is clicked and set the global Var to this value
	  dayform = $(this).data('dayform');
	  console.log("Clicked: " + dayform);
	});

	 // Bind Events to the popup
	$("#CC_dayformPopup").popup({
	  beforeposition: function(event, ui) {
	    // Select the matching tab and check the checkbox
	    $('#CC_' + dayform + '_req').prop('checked', true).checkboxradio('refresh');
	    $('#CC_' + dayform + '_tab_link').trigger('click');
	  },

	  afterclose: function(event, ui) {
	    console.log("Popup closed");

	    // Reset the form when the popup is closed
	    $('#CC_dayform').trigger("reset");
	  }


	});
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">

  <main class="ui-content">
    <form action="" method="post" id="CC_dayform" data-ajax="false">

      <div data-role="tabs" id="tabs">
        <div data-role="navbar">
          Type:
          <ul>
            <li>
              <a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a>
            </li>
            <li>
              <a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a>
            </li>
            <li>
              <a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a>
            </li>
          </ul>
        </div>

        <div id="CC_OO_tab">
          <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
              <input type="checkbox" name="OO_req" id="CC_OO_req" />
              <label for="CC_OO_req">OO</label>
            </fieldset>
          </div>
        </div>

        <div id="CC_CLO_tab">
          <div class="ui-field-contain">

            <fieldset data-role="controlgroup">
              <input type="checkbox" name="CLO_req" id="CC_CLO_req" />
              <label for="CC_CLO_req">CLO</label>
            </fieldset>
          </div>

        </div>
        <div id="CC_DO_tab">
          <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
              <input type="checkbox" name="DO_req" id="CC_DO_req" />
              <label for="CC_DO_req">DO</label>
            </fieldset>
          </div>
        </div>

        <fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
          <button type="submit" form="CC_dayform">
            Save
          </button>
          <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
        </fieldset>

    </form>
  </main>
  </div>

  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" data-dayform="OO" class="dayformButton ui-btn ui-btn-a ui-btn-inline">OO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" data-dayform="CLO" class="dayformButton ui-btn ui-btn-a ui-btn-inline">CLO chosen</a>
  <a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" data-dayform="DO" class="dayformButton ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>

于 2016-02-17T02:28:37.620 回答