0

新しいタグを追加

私は料理レシピのデータベースを持っており、最終的にデータベースに接続してエントリを追加する Web フォームを作成しています。データベースの 1 つの列は「タグ」です。Web フォームは以前に使用されたすべてのタグを (チェックボックス付きで) 表示し、既存のタグの隣に新しいチェックボックスとして表示される新しいタグを追加するオプションをユーザーに提供します。

問題 #1: 現在、タグは 1 つのスペースで区切られていますが、見栄えを良くするために、タグをより大きなギャップで区切ってください。これを行う最善の方法は何ですか？

問題 2: タグが追加されると、最終的にこのフィールドセットの右端に到達します。それらを次の行に折り返させ、新しいタグと前のタグの間のスペースが無視されるようにする最良の方法は何ですか? (そうしないと、新しいタグが次の行にインデントされる可能性があります。これは望ましくありません!)

HTML コード:

<p>
    <fieldset>
        <legend>Tags:</legend>
        <span class="tags">
            <input type="checkbox" name="tags" value="Dessert">Dessert  <input type="checkbox" name="tags" value="Fast">Fast  <input type="checkbox" name="tags" value="Entree">Entree
        </span>
        <p>
            <input type="text" id="addtag"><input type="submit" value="Add">
        </p>
    </fieldset>
</p>

ジャバスクリプト:

$("input[value='Add']").click(function(event){
    event.preventDefault();
    tagAdded = document.getElementById('addtag').value;
    if (tagAdded!=null && tagAdded.trim()!="") {
        //$('.tags').append('????????');
    }
 });

ありがとうございました！

4

5 に答える 5

2

まず、タグ (「デザート」など) を<label>タグに含める必要があります。

<input type="checkbox" name="tags" value="Dessert" id="tag-1"><label for="tag-1">Dessert</label>

単語をクリックすると、その前のチェックボックスがアクティブになります。

次に、より大きなギャップを作成するには: CSS を使用します。

label{
    margin-right: 2em;
}

これにより、ラベル間に 2 文字 m のサイズのギャップができます

于 2012-04-25T05:25:33.627 に答える
0

チェックボックスブロックが次のようになるようにマークアップを変更します（他にも修正する必要があることに注意してください。たとえば、現在、fieldset内部に配置しようとしていますがp、これは無効で機能しません）。

<div class="tags">
<label><input type="checkbox" ...>Dessert</label>
<label><input type="checkbox" ...>Fast</label>
...
</div>

次のようなCSSコードを使用します。

.tags { margin-left: -4em; }
.tags label { padding-left: 4em;  white-space: nowrap; }

私は物事を明確にするためだけに大きな間隔を使用しています。2emでおそらく十分です。負の左マージン値をパディング値と一致させることを忘れないでください。

于 2012-04-25T06:04:34.887 に答える
0

私はこれが問題1と2を解決できると思います...

次のように各タグをラップします。

<div class="wrapper">
    <input type="checkbox" name="tags" value="Dessert">Dessert
</div>

CSS:

.wrapper { margin-right:10px; float:left; }
于 2012-04-25T05:30:18.507 に答える
0

このようにコードを入れてみてください

HTML:

<p>
    <fieldset>
        <legend>Tags:</legend>
        <span class="tags">
            <p> <input type="checkbox" name="tags" value="Dessert"> Dessert</p>
            <p> <input type="checkbox" name="tags" value="Fast"> Fast</p>
            <p> <input type="checkbox" name="tags" value="Entree"> Entree</p>
        </span>
        <div>
            <input type="text" id="addtag"><input type="submit" value="Add">
        </div>
    </fieldset>
</p>​

Javascript:

$("input[value='Add']").click(function(event){
    event.preventDefault();
    tagAdded = document.getElementById('addtag').value;
    if (tagAdded!=null && tagAdded.trim()!="") {
        $('.tags').append('<p> <input type="checkbox" name="tags" value="' + tagAdded.trim() + '" /> ' + tagAdded.trim() + '</p>');
    }
 });​

CSS:

div { clear:both; }
.tags p {
    float:left;
    margin-right:20px;    
}

</p>

于 2012-04-25T06:34:12.957 に答える
0

各チェックボックスのラベルをタグでラップし、ラベルに右側のパディングを追加できます。

于 2012-04-25T05:25:28.933 に答える