0

我正在开发一种数字教科书功能，该功能允许学生单击链接以打开一个简单的 div 表单，供他们输入对该特定问题的答案。弹出表单只是简单的 HTML/CSS，带有一些 jQuery UI 来隐藏、显示和使其可拖动。这是转折点。我有多个问题，每个问题都需要附加到一个唯一的 div 上。没问题，我想。我将设置每个 href 以链接回我在 DIV 中分配的唯一 ID。问题是，我似乎无法使用相应的 a href 来定位正确的 DIV。相反，无论单击哪个链接，都会出现相同的问题集。这看起来超级简单，我可能过于复杂了。我可以在这里做什么？

HTML：

<div id="draggable" class="messagepop pop">
  <form method="post" id="new_message" action="/answers">
    <p><label for="body">What type of person is Carsten?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
    <p><label for="body">How do you know?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
    <p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
  </form>
</div>

<div id="draggable" class="messagepop pop">
  <form method="post" id="new_message" action="/answers">
    <p><label for="body">What can you learn about an active volcano from the photograph?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
    <p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
  </form>
</div>

<a href="#" id="show">Draw Conclusions</a>&emsp;What kind of person is Carsten? How do you know?
<a href="#" id="show">Use Text Features</a>&emsp;What can you learn about an active volcano from the photograph?

其中第一个 a href 需要打开第一个 div，第二个 a href 打开第二个 div，依此类推。

CSS：

.messagepop {
overflow-y: auto;
overflow-x: hidden;
cursor:default;
display:none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align:left;
width:394px;
height: 335px;
z-index:50;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px 4px 4px 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;}

JS：

$(document).ready(function() {
$('.show').click(function() {
    if ( !$(this).next('div').is(':visible') ) {
        $(".messagepop").slideFadeToggle();
        $(this).next('div').slideFadeToggle();
    }
});

$('.hide').click(function() {
    $(this).parent().slideFadeToggle();});

$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);};

$(function() {
$("#draggable").draggable();});
4

2 回答 2

1

感谢您的建议和解决我写得不好的方法。看来你已经让它工作了。

从那以后，我发现了一个 jQuery Mobile 解决方案，它比我试图整合的解决方案要容易得多。

对于未来的观众来说，它看起来就像这样。

<a href="#popup1" class="popuplink" data-rel="popup">Draw Conclusions</a>
<a href="#popup2" data-rel="popup">Use Text Features</a>

<div data-role="popup" id="popup1" class="ui-content" data-position-to="window">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <p>What kind of person is Carsten?</p>
    <input type="text"/>
    <p>How do you know?</p>
    <textarea></textarea>
</div>

<div data-role="popup" id="popup2" class="ui-content" data-position-to="window">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <p>What can you learn about an active <mark><b>volcano</b></mark> from the photograph?</p>
    <textarea></textarea>
</div>

这里的逻辑对我来说更有意义，并且确保它可以在移动设备上正常工作还有一个额外的好处。然后，如果您想让它可拖动，只需放入：

<script>
$(function() {
$(".ui-content").draggable();
});
</script>

然后，如果您希望它在移动设备上可拖动（请记住，移动设备本身不支持 jQuery UI），您将不得不调用各种 hack。我喜欢Touch Punch。

将 Draggable 与 Touch Punch 结合使用时，您可能会遇到表单输入问题，但这是另一个线程的故事。

于 2013-08-23T02:20:58.470 回答
0

这是一个演示：http: //jsfiddle.net/ebNsz/

我已经为 question-div:s 设置了 id:s 并使用 'a' 元素中的 'href' 属性来定位它们。不确定你想用“slideFadeToggle”功能做什么，所以我改用了“fadeToggle”。

HTML：

<div id="q1" class="messagepop">
  <form method="" id="form1" action="/answers">
    <label for="answer1">What type of person is Carsten?</label><textarea name="answer1" class="answer"></textarea>
    <label for="answer2">How do you know?</label><textarea name="answer2" class="answer"></textarea>
    <div>
        <input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
    </div>
  </form>
</div>

<div id="q2" class="messagepop">
  <form method="" id="form2" action="/answers">
    <label for="answer1">What can you learn about an active volcano from the photograph?</label><textarea name="answer1" class="answer"></textarea>
    <div>
        <input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
    </div>
  </form>
</div>

<p><a href="#q1" class="toggle">Draw Conclusions</a>&emsp;What kind of person is Carsten? How do you know?</p>
<p><a href="#q2" class="toggle">Use Text Features</a>&emsp;What can you learn about an active volcano from the photograph?</p>

jQuery：（jsFiddle 不支持 .draggable()，所以我注释掉了第一行并添加了第二行。）

$(function() {

    /* $("div.messagepop").draggable().hide();*/
    $("div.messagepop").hide();

    $("a.toggle").click(function(e)
    {
        e.preventDefault();
        var targetpop = $(this).attr('href');        
        $(targetpop).siblings("div.messagepop").fadeOut();
        $(targetpop).fadeToggle();
    });

    $("a.close").click(function(e)
    {
        e.preventDefault();
        $(this).closest("div.messagepop").fadeToggle();        
    });

});

CSS：

.messagepop {
position: absolute;
top: 20%;
left: 50%;
z-index: 50;
margin-left: -197px;
text-align: center;
width: 394px;
height: 335px;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
}

label {
display: block;
}

textarea {
width: 75%;
height: 5em;
margin: 0 0 1em 0;
}
于 2013-08-19T20:07:01.400 回答