3

これは簡単なように思えますが、どこにも解決策が見つかりません。あるフォームから別のフォームに切り替えるためのオプションを備えたタブまたはタグが必要であり、使用されているフォームに関係なくコピー/リセット ボタンが機能する必要があります。

これは、約 3 つ追加してその形式を維持する必要がある単一の孤独なフォームの例です。(私が持っている私の実際のページには CSS スタイルの書式設定があり、入力する項目が約 10 あります):

更新：ここまでの回答を試した後、IE7で機能するこれを行う方法も必要であることに気付きました。

<head>
<title>Form Switching</title>
</head>

<body>

<!-- First Form -->
<form name="data_entry" id="frm" action="#">
  <h2>Form 1</h2>

  <table cellspacing="5" cellpadding="3">
    <tr>
  <td>Name:</td>
      <td><textarea name="name" rows="2" cols="30" id="txt_name"></textarea></td>
    </tr>
    <tr>
      <td>Color:</td>
      <td><select name="color" id="txt_color">
          <option value=""></option>
          <option value="It is red">Red</option>
          <option value="It is blue">Blue</option>
        </select></td>
    </tr>
    <tr>
      <td>Phone Number:</td>
      <td><textarea name="phone" rows="5" cols="30" id="txt_phone"></textarea></td>
    </tr>
    <tr>
      <td>Distance:</td>
      <td><textarea name="distance" rows="1" cols="30" id="txt_distance"></textarea></td>
    </tr>

    <tr> 
      <!--COPY BUTTON-->
      <td><input type="button" style="font-weight:bold;" name="clipboard_copy" value="Copy" 
onClick="document.data_entry.holdtext.value = 'Name:&nbsp;' + document.data_entry.name.value + '\n' + 'Color:&nbsp;' + document.data_entry.color.value + '\n' + 'Phone:&nbsp;' + document.data_entry.phone.value + '\n' + 'Distance:&nbsp;' + document.data_entry.distance.value; javascript:selectcopy('data_entry.holdtext');javascript:validateForm()"></td>
      <!--RESET BUTTON-->
      <td><input type="button" style="font-weight:bold;" name="reset_form" value="Reset" onClick="this.form.reset();" /></td>
    </tr>

  </table>


  <!-- Invisible text box that concatenates all the text boxes into one so they can be copied -->
  <TEXTAREA name="holdtext" readonly="readonly" style="height:1px;width:1px;border:0" ID="holdtext"></TEXTAREA>
</form>

<SCRIPT LANGUAGE="JavaScript">

// ---------- Function to copy text to clipboard ----------
    function selectcopy(fieldid)
    {
    var field=document.getElementById(fieldid) || eval('document.'+fieldid)
    field.select()
    if (field.createTextRange)
    {field.createTextRange().execCommand("Copy")}
    }

</SCRIPT>
</body>
</html>

さらに Javascript が必要な場合は、その使用方法についてもう少し説明をお願いします。私はまだそれほど経験がなく、jquery を使用する方法がありません。これは、会社のコンピューターでしか作業できないためです。ファイルをダウンロードできません。私はメモ帳で自分のページを書いています.jQueryについて再検索した後でも、それが実際に何をするのかまだわかりません.

4

1 に答える 1

3

フィドルで更新: http://jsfiddle.net/f8Qvd/5/

更新 #2 は IE7 で動作するようになりました

これは jQuery がなくてもそれほど難しいことではありませんが、ファイル ダウンロード ポリシーについて職場の人に相談する必要があると思います。とにかく、jQuery を使用せずに続行する場合は、いくつかの div にすべてのフォームを追加するだけで、すべてを適切なコンテナー div に配置して、作業が楽になります。

次のような対応するフォーム コンテナの ID への参照を使用して、リンクまたはクリック可能な div を含むナビゲーション バー (必要に応じてタブとしてスタイル設定することもできます) を作成することもできます。

<div id="tab-nav">
    <a href="javascript:;" class="selected" data-container="form-1-container">form1</a>
    <a href="javascript:;" data-container="form-2-container">form2</a>
    <a href="javascript:;" data-container="form-3-container">form3</a>
</div><!-- #tab-nav -->

<div id="awesome-container">
    <div id="form-1-container">first tab</div>
    <div id="form-2-container">second tab</div>
    <div id="form-3-container">third tab</div>
</div><!-- #awesome-container -->

それらにすべて一意のid属性を指定し、最初は非表示の div を古き良き CSS でスタイルするようにしてください。

#tab-nav {
    border: 1px solid black;
    width: 400px;
    text-align: center;
}

#tab-nav a {
    margin-left:25px;
    margin-right:25px;
    text-decoration: none;
}

#tab-nav a.selected {
    background: #ccd;
    border: 1px solid #999;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
}

#awesome-container {
    width:400px;
    height: 300px;
    border: 1px solid blue;
}

#awesome-container div {
    width: 400px;
    height:300px;
    margin:0;
}

#awesome-container #form-1-container {
    background: #ddd;
}
#awesome-container #form-2-container {
    background: #f06;
    display: none;
}
#awesome-container #form-3-container {
    background: #04b;
    display: none;
}

それらのタブが美しくなるなんて、なんてこった！

次に進みます... JavaScriptに:)

タブとナビゲーション スタイルを処理するクリック ハンドラーを記述します。通常、jQuery がない場合は、querySelectorAll操作を行う dom 要素のリストを作成するために使用しますが、残念ながら IE7 では使用できないため、次のようになります。

(function(){
    var clack = function(e){
        
        // IE is whack, apparently
        var e = e || window.event;
        if( e.srcElement ) {
            e.target = e.srcElement;
        };
        
        var divs = document.getElementById("awesome-container").childNodes;
        for (var i = 0; i < divs.length; i++){
            if (divs[i].firstChild !== null) { // ignore text nodes
                divs[i].style.display = "none";
            }
        }
        document.getElementById(e.target.getAttribute("data-container")).style.display = "block";
        var links = document.getElementById("tab-nav").childNodes;
        for (var j = 0; j < links.length; j++) {
            if (links[j].firstChild !== null) { // ignore text nodes
                links[j].className = "";
            }
        }
        e.target.className = "selected";
    };

    var links = document.getElementById("tab-nav").childNodes;
    for (var i = 0; i < links.length; i++) {
        if (links[i].firstChild !== null) { // you get the idea
            links[i].onclick = clack;
        }
    }
})();

それでうまくいくはずです！

実際の動作を確認するには、フィドルをチェックしてください: http://jsfiddle.net/f8Qvd/5/

于 2013-05-28T21:48:52.463 に答える