0

私は、学生がリンクをクリックして簡単な div フォームを開いて、その特定の質問に対する回答を入力できるようにするデジタル教科書機能に取り組んでいます。ポップアップ フォームは、非表示、表示、およびドラッグ可能にするための jQuery UI を備えたシンプルな HTML/CSS です。これがひねりです。それぞれが一意の div に添付する必要がある複数の質問があります。問題ありません、と私は思いました。それぞれの a 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 を開く必要があり、2 番目の a href で 2 番目の 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 がネイティブにサポートされていないことを思い出してください)、ある種のハックを呼び出す必要があります。タッチパンチが好きです。

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() をサポートしていないため、1 行目をコメントアウトして 2 行目を追加しました。)

$(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 に答える