傑特_資訊手札

RadioButton 切換選項時，同時變更額外想要變更的圖片

VB.Net
<script language="javascript">
function changeRadioImg(radioBox) {
        var RB1 = document.getElementById('<%= rbList.ClientID %>');
        var radio = RB1.getElementsByTagName("input");
        var image = document.getElementById('Img');
        for (var i = 0; i < radio.length; i++)
          {
            if (radio[i].checked)
                {
                 image.src = "";
                }
            }
        }
</script>

<img id="Img" alt="Img"/>
<div class="abc" style="WIDTH: 770px;HEIGHT: 100px;overflow-x:scroll;text-align:center;vertical-align :middle;border-style:outset; border-width:1px">
<asp:RadioButtonList ID="rbList" runat="server" DataTextField="img" DataValueField="id"
        RepeatDirection="Horizontal" TextAlign="Left" DataTextFormatString="<img src='{0}/><br>">         </asp:RadioButtonList>
</div>

ClientScript.RegisterStartupScript(Me.GetType(), "changeRadioImg", "<script type='text/javascript'>changeRadioImg(document.getElementById('" + rbList.ClientID + "'));</script>")

一般RadioButtonList都是使是文字的方式來讓使用者選擇項目，這次遇到希望使用圖片來選擇項目的需求

VB.Net

<asp:RadioButtonList ID="rbList" runat="server" DataTextField="img" DataValueField="id"
         RepeatDirection="Horizontal" TextAlign="Left"
  DataTextFormatString="<img src='{0}'/><br>">                                                                                    
 </asp:RadioButtonList>

    Private Class ConfSettingItem
        Public Sub New(ByVal id As String, ByVal img As String, ByVal Value As String)
            Me.id = id
            Me.img = img
            Me.Value = Value
        End Sub
        Private _id As String
        Private _img As String
        Private _Value As String

        Public Property id() As String
            Get
                Return _id
            End Get
            Set(ByVal value As String)
                _id = value
            End Set
        End Property

        Public Property img() As String
            Get
                Return _img
            End Get
            Set(ByVal value As String)
                _img = value
            End Set
        End Property

        Public Property Value() As String
            Get
                Return _Value
            End Get
            Set(ByVal value As String)
                _Value = value
            End Set
        End Property

    End Class

     Dim infos As New List(Of ConfSettingItem)

     infos.Add(New ConfSettingItem(id, url, value))
     infos.Add(New ConfSettingItem(id, url, value))
     rbList.DataSource = infos
     rbList.DataBind()

以上方式也可以改直接使用ListItemCollection更為簡單

<asp:RadioButtonList ID="rbList" runat="server"  RepeatDirection="Horizontal" TextAlign="Left"
  DataTextFormatString="<img src='{0}'/><br>">                                                                                  
 </asp:RadioButtonList>

     Dim infos As New ListItemCollection()
     infos.Add(New ListItem(url, id))
     rbList.DataSource = infos
     rbList.DataBind()

C#

<asp:RadioButtonList ID="rbList" runat="server" DataTextField="img" DataValueField="id"
        RepeatDirection="Horizontal" TextAlign="Left"
         DataTextFormatString="<img src='{0}' />">                                                                                        </asp:RadioButtonList>

 private class ConfSettingItem
 {
    public string id { get; set; }
    public string img { get; set; }
    public string Value { get; set; }
 }

 List<ConfSettingItem> infos = new List<ConfSettingItem>
 {
  new ConfSettingItem{ id="", img="", Value=""},
  new ConfSettingItem{ id="", img="", Value=""},
 };

infos .Add(new ConfSettingItem { id = "", img = "", Value = "" });

 rbList.DataSource = infos;
 rbList.DataBind();

使用者原本希望點擊button時就自動全選並且復製textbox內容，但因為瀏覽器的安全機制，只有IE可以做到，Firfox及chrome都沒有辨法做到。

所以改為點擊textbox時，就自動全選。
使用者在自已點選右鍵「復製」。

onfocus="this.select()" onMouseUp="return false"

<asp:TextBox ID="tb1" onfocus="this.select()" onMouseUp="return false" runat="server" ></asp:TextBox>

Firefox onClick return false but it doesn't work

問題：IE及Chorme使用onClick 當回傳false後就利用window.event.cancelBubble = true停止執行。

但在Firefox測試時發生，還是一樣執行接下來的事件。

因此在firefox時需變成使用    e.stopPropagation()停止執行。

if (window.event) //for IE
 {
  window.event.cancelBubble = true;
 }
 else //for Firefox
 {
    var e = arguments.callee.caller.arguments[0] || event;
    e.stopPropagation();
  }

資料來源：http://blog.darkthread.net/post-2008-06-26-stop-event-bubbling.aspx