Question

有没有办法设计一个收件人文本框，如gmail界面，点击它时会显示cc，bcc字段，点击bcc或cc后，它们会进一步展开。我使用jquery autocomplete multiple来发送电子邮件。但如何继续？

＆＃13;

   <tr>
      <td colspan="3"  class="nopadding">
         <input class="" type="text" id="recipients" placeholder="Recipients"/>
      </td>
   </tr>
   <tr>
      <td colspan="3"  class="nopadding">
         <input type="text" id="subject" placeholder="Subject"/>
      </td>
   </tr>
   <tr>
      <td colspan="3"  class="nopadding">
         <textarea rows="4" id="body" placeholder="Compose" ></textarea>
      </td>
   </tr>

＆＃13;

Answer 1

<html>
<head>
<style>
    .hidden{
        display:none;
    }
    .mailBox {
        border: 1px solid #ccc;
        margin: 0px;
        padding: 0px;
        height: auto;
        width: 400px;
    }
    .mailBox a {
        cursor: pointer;
    }
    .mailRecipients {
        height: auto;
    }
    .mailElem a {
        color: #ccc;
        text-decoration: none;
        margin-left: 10px;
        font-size: 16px;
        font-family: monospace;
    }
    .mailElem {
        border-bottom: 1px solid #ccc;
    }
    .mailElemCnt {
        display: inline-block;
    }
    .mailElemContExpand {
        float: right;
        margin-right: 10px;
        margin-top: 7px;
    }
    .mailElemCntA, .mailElemCntLbl{
        width: 75px;
    }
    .mailElemCnt input {
        width: 240px;
        padding: 10px 0px;
        border: none;
    }
    .mailElemCnt label{
        color: #ccc;
        text-decoration: none;
        margin-left: 10px;
        font-size: 16px;
        font-family: monospace;
    }
    .mailBody {
        width: 400px;
        height: 250px;
        border: none;
        border-bottom: 1px solid #ccc;
    }
    .mailboxBottom input[type=button] {
        padding: 10px 25px;
        background-color: #2196F3;
        color: white;
        border: none;
    }
</style>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" ></script>
    <div class="mailBox">
        <div class="mailRecipients">
            <div class="mailElem">
                <div class="mailElemCnt mailElemCntA">
                    <a onClick="alert('Add Dialog for Contact List');">To</a>
                </div>
                <div class="mailElemCnt">
                    <input type="text" id="mailTo" placeholder="abcTo@xyz.com"/>
                </div>
                <div class="mailElemCnt mailElemContExpand">
                    <a onClick="openCC()">CC</a>
                    <a onClick="openBCC()">BCC</a>
                </div>
            </div>
            <div id="mailIDCc" class="mailElem hidden">
                <div class="mailElemCnt mailElemCntA">
                    <a onClick="alert('Add Dialog for Contact List');">CC</a>
                </div>
                <div class="mailElemCnt">
                    <input type="text" id="mailCC" placeholder="abcCC@xyz.com"/>
                </div>
            </div>
            <div id="mailIDBcc" class="mailElem hidden">
                <div class="mailElemCnt mailElemCntA">
                    <a onClick="alert('Add Dialog for Contact List');">BCC</a>
                </div>
                <div class="mailElemCnt">
                    <input type="text" id="mailBCC" placeholder="abcBCC@xyz.com"/>
                </div>
            </div>
            <div id="mailIDSubject" class="mailElem">
                <div class="mailElemCnt mailElemCntLbl">
                    <label>Subject</label>
                </div>
                <div class="mailElemCnt">
                    <input type="text" id="mailSubject" placeholder="My Subject"/>
                </div>
            </div>
        </div>
        <div class="mailBodyBox">
            <textarea rows="4" id="mailIDBody" placeholder="Compose" class="mailBody"></textarea>
        </div>
        <div  class="mailboxBottom mailSend">
            <input type="button" value="Send" onClick="alert('Change Related to Mail Submit');"/>
        </div>
    </div>
    <script>
        function openCC(){
            $('#mailIDCc').toggle(500);
        }
        function openBCC(){
            $('#mailIDBcc').toggle(500);
        }
    </script>
</body>enter image description here
</html>

像收件人文本框一样设计GMail

1 个答案: