色美女视频在线,男人强操性感蕾丝美女视频在线网站,美女视频在线免费播放

淺析對話框中頭像選擇的實現(xiàn)

2011.02.10

我們要做的效果就是:在注冊頁面，我們點擊選擇頭像，就會彈出一個對話框，陳列一組頭像供我們選擇，我們選中一個"確定"后，對話框消失，注冊頁面出現(xiàn)剛剛選擇的頭像。就是這樣，很多編輯器就是這樣的。
    難點:1.在窗口之間如何傳值(不是頁面的那種傳值)。
            2.如何獲取單選框的值。
    廢話多說無益，直接進入主題.
    我們的解決方案是:
            1.通過window對象的ShowModialog()彈出一個對話框，通過對話框中的returnValue再傳給父窗口。
             2.通過遍歷窗口中的單選框控件的checked來獲取單選框的值。
    下面我以實例說明:
    1.在主頁面(父頁面)加入js代碼:
        <script language="javascript" type="text/javascript">
        function ReturnImg()
        {
            //heading.htm就是彈出的對話框的頁面
            var a=window.showModalDialog("headimg.htm",window,"dialogHeight:310px; dialogWidth:260px;center:yes;")//參數(shù)表示控制對話框內(nèi)容，對象，對話框的大小。
            if(a==undefined)//對用戶關(guān)掉對話框時傳值為undefined的處理
            {
              document.getElementById("ShowHeadimg").innerHTML="<img src='headimg/1.gif'/>";
            }
            else
            {
              document.getElementById("ShowHeadimg").innerHTML="<img src='headimg/"+a+".gif'/>";
            }
        }
    </script>

body代碼為:(css代碼略)
<body>
    <form id="form1" runat="server">
    <div>
    <table class="style1" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3">注冊</td>
            </tr>
            <tr>
                <td style="width:30px;"> 姓名:</td>
                <td colspan="2">謙虛的天下</td>
            </tr>
            <tr>
                <td>頭像:</td>
                <td style="width:40px; height:40px;">
                    <div id="ShowHeadimg"></div>//用來顯示頭像的層
                </td>
                <td>
                    <input id="Button2" type="button" value="選擇>>" onclick="ReturnImg()" />
                      //調(diào)用js函數(shù)，彈出對話框
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input id="Button1" type="button" value="提交" /></td>
            </tr>
        </table>
    </div>
    </form>
</body>
headimg.htm的代碼是:
//下面的js代碼遍歷文中的radio控件，獲取用戶選中的值，就是前面的難點2
js代碼是:<script language="javascript" type="text/javascript">
    function GetRadioImg(){

var Rvalue = form1.Radio.value;

       for(var i=0;i<form1.Radio.length;i++)
       {
           if(form1.Radio[i].checked==true)
           {
              Rvalue = form1.Radio[i].value;
              break;
           }
       }
     window.returnValue=Rvalue;//通過returnValue傳回參數(shù)，就是前面的難點1
     window.close();
}
    </script>
body代碼是:<body>
<form id="form1">
    <div class="style1">
        <table>
            <tr>
                <td>
                    <img src="headimg/1.gif" /><br /><input id="Radio" checked="checked" name="R1"
                        type="radio" value="1" /></td>
                <td>
                   <img src="headimg/2.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="2" /></td>
                <td>
                   <img src="headimg/3.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="3" /></td>
                <td>
                    <img src="headimg/4.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="4" /></td>
                <td>
                    <img src="headimg/5.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="5" /></td>
                <td>
                    <img src="headimg/6.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="6" /></td>
            </tr>
            <tr>
                <td>
                    <img src="headimg/7.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="7" /></td>
                <td>
                    <img src="headimg/8.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="8" /></td>
                <td>
                    <img src="headimg/9.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="9" /></td>
                <td>
                    <img src="headimg/10.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="10" /></td>
                <td>
                    <img src="headimg/11.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="11" /></td>
                <td>
                    <img src="headimg/12.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="12" /></td>
            </tr>
            <tr>
                <td>
                    <img src="headimg/13.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="13" /></td>
                <td>
                    <img src="headimg/14.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="14" /></td>
                <td>
                    <img src="headimg/15.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="15" /></td>
                <td>
                    <img src="headimg/16.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="16" /></td>
                <td>
                    <img src="headimg/17.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="17" /></td>
                <td>
                    <img src="headimg/18.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="18" /></td>
            </tr>
            <tr>
                <td>
                    <img src="headimg/19.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="19" /></td>
                <td>
                    <img src="headimg/20.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="20" /></td>
                <td>
                    <img src="headimg/21.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="21" /></td>
                <td>
                    <img src="headimg/22.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="22" /></td>
                <td>
                    <img src="headimg/23.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="23" /></td>
                <td>
                    <img src="headimg/24.gif" alt=""/><br /><input id="Radio" name="R1"
                        type="radio" value="24" /></td>
            </tr>
            <tr>
                <td colspan="6">
                    <input id="Button1" type="button" value="確定" onclick="GetRadioImg()"/></td>
            </tr>
        </table>
    </div>
    </form>
</body>

本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

打開APP，閱讀全文并永久保存查看更多類似文章

JavaScript閉包——點贊小案例

用ASP制作張揚個性的調(diào)查系統(tǒng)

html和css基礎(chǔ)

【代碼應用】用代碼制作以圖標，圖片，文字導航

博客常用幾種圖片霧化代碼

Ubb編輯器2

更多類似文章 >>

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看