噗落格的資訊空間-網路技術分享-Asp.Net.VB.C#.程式開發.微網誌.網路行銷.facebook 行銷.噗浪行銷.社群行銷

分享 ASP，ASP.NET，VB，C#，程式開發，網站設計，部落格，微網誌，網路行銷，facebook 行銷，噗浪行銷，社群行銷，電腦硬體軟體，網路賺錢等資訊內容。『噗落格』裡的文章大多是從各網站摘錄(轉貼)下來的，僅提供研究及筆記之用途，如有侵權請留言告知！一開始不打算賺錢,一個不可能中的可能

2010年3月24日星期三

jquery radio、checkbox、select 取值、選取

轉：jquery radio取值，checkbox取值，select取值，radio選中，checkbox選中，select選中，及其相關
獲取一組radio被選中項的值
var item = $('input[@name=items][@checked]').val();
獲取select被選中項的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二個元素為當前選中值
$('#select_id')[0].selectedIndex = 1;//不知為何要加[0]
radio單選組的第二個元素為當前選中值
*這招沒辦法用在checkbox上
$('input[@name=items]').get(1).checked = true;

獲取值：
文本框，文本區域：$("#txt").attr("value")；
多選框checkbox：$("#checkbox_id").attr("value")；
單選組radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();

控制表單元素：
文本框，文本區域：$("#txt").attr("value",'');//清空內容
$("#txt").attr("value",'11');//填充內容

多選框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判斷是否已經打勾

單選組radio： $("input[@type=radio]").attr("checked",'2');//設置value=2的項目為當前選中項
下拉框select： $("#sel").attr("value",'-sel3');//設置value=-sel3的項目為當前選中項
$("11112222").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框

事件
用click 觸發改變事件(用change 還得再點旁邊才會觸發)
$("input[@name='RadtioName']").click(function(){
});

source:http://www.cnblogs.com/xlfj521/archive/2008/01/29/1057375.html

[jQuery]判斷 checkbox 是否選取，實現全選跟全部取消

update 2009.05.13: jQuery 1.3 版之後不支援 $(”input[@name='user_active_col[]‘]”) 寫法，請改寫成 $(”input[name='user_active_col[]‘]”)

在 jQuery 底下要如何實現這個功能，其實還蠻簡單的，首先看 html 部份

<input name="user_active_col[]" type="checkbox" value="1"> 1
<input name="user_active_col[]" type="checkbox" value="2"> 2
<input name="user_active_col[]" type="checkbox" value="3"> 3
<input name="user_active_col[]" type="checkbox" value="4"> 4
<input name="user_active_col[]" type="checkbox" value="5"> 5
<input name="clickAll" id="clickAll" type="checkbox"> 全選

jQuery 部份如下：

$("#clickAll").click(function() {

   if($("#clickAll").attr("checked"))
   {
     $("input[name='user_active_col[]']").each(function() {
         $(this).attr("checked", true);
     });
   }
   else
   {
     $("input[name='user_active_col[]']").each(function() {
         $(this).attr("checked", false);
     });           
   }
});

這樣就可以了，轉自http://blog.wu-boy.com/2008/12/23/658/

2010年3月23日星期二

[javascript] 取得 RadioButtonList 選項值 (ASP.Net 控制項)

ASP.NET 的 RadioButtonList 在 HTML 也是由 Table + checkbox 組成，如果要用 JavaScript 判斷 User 選了那個 RadioBox，可以參考以下範例:

var selValue;
var table = document.getElementById("RadioButtonList1");

for(i=0;i<table.rows[0].cells.length;i++)
     if(table.rows[0].cells[i].childNodes[0].checked == true)
      selValue = table.rows[0].cells[i].childNodes[0].value;

要注意的是，這裡的RadioButtionList是用水平橫式的(Horizontal)，如果用直式的(Vertical)，table.rows[0].cells[i]要改為table.rows[i].cells[0]。

轉自 http://felixhuang.pixnet.net/blog/post/25333748

2010年3月22日星期一

[javascript] 全選或全取消 CheckBoxList (ASP.Net 控制項)

在ASP.NET控制項中，CheckBoxList 是用 Table 加 checkbox 組合而成的，如果要用 javascript 做到全選或全部取消，需要一點小技巧

輸入參數 checkBoxID 是 CheckBoxList 的 ClientID， TRUE_OR_FALSE 要全選輸入true 或取消 false:

function SetCheckBoxListChecked(checkBoxID,TRUE_OR_FALSE){
          var table = document.getElementById(checkBoxID);
          for(i=0;i<table.rows.length;i++){
                    table.rows[i].cells[0].childNodes[0].checked = TRUE_OR_FALSE;
          }
}

轉自 http://felixhuang.pixnet.net/blog/post/21838073

用 jQuery 在 DropdownList 加入或移除 item

加入
$("#ddlCities").append(""Bangalore"");
OR
$("#ddlCities").append($("").val("0").html("Bangalore"));

移除
$('#ddlMyCombo >option').remove();

2010年3月15日星期一

C# userControl LoadControl 動態載入

        Control cl = LoadControl("_UC/Uc_Promotion_1.ascx");
        Panel1.Controls.Add(cl);

        Panel1.Controls.Add(LoadControl("_UC/Uc_Promotion_1.ascx"));

2010年3月7日星期日

JavaScrip 廣告輪播及廣告切換

<SCRIPT Language="JavaScript">
<!--

var speed = 4000  //圖片切換時間
var img= new Array()
var url= new Array()
var current = 0
//一張圖片對應一個網址,可無限增加,編號由0開始
img[0] = new Image(); img[0].src = "news_img/01.jpg"; url[0] = "http://www.XX1.org.tw"
img[1] = new Image(); img[1].src = "news_img/02.jpg"; url[1] = "http://www.XX2.org.tw"
img[2] = new Image(); img[2].src = "news_img/03.jpg"; url[2] = "http://www.XX3.org.tw"
img[3] = new Image(); img[3].src = "news_img/04.jpg"; url[3] = "http://www.XX4.org.tw"

function start() 
{
current++
if(current >=img.length) current = 0
document.imgs.src = img[current].src
setTimeout("start()",speed);
}

function cimgs(i) 
{
current = i;
document.imgs.src = img[i].src;
}

function go() {
//window.location = url;
window.open(url[current],'','menubar=no,status=no,toolbar=no,width=1024,height=768').focus();

}
//-->
</SCRIPT>

<body onload="setTimeout('start()',speed)">       
<table width="100%" border="0" cellspacing="0" cellpadding="0" style=" font-size:12px">
              <tr>
                <td colspan="4" height="160" align="center">
                <a href="javascript:go()"><img src="news_img/01.jpg" name="imgs" border="0"></a>
                </td>
              </tr>
              <tr>
                <td height="40" align="center">
                <div id="imgA" onclick='cimgs(0);'>XX1</div>
                </td>
                <td height="40" align="center">
  <div id="imgB" onclick='cimgs(1);'>XX2</div>
                </td>
                <td height="40" align="center">
                <div id="imgC" onclick='cimgs(2);'>XX3</div>
                </td>
                <td height="40" align="center">
  <div id="imgD" onclick='cimgs(3);'>XX4</div>
                </td>
              </tr>              
             </table>

2010年3月6日星期六

撰寫跑馬燈/廣告輪撥的好工具：jQuery Cycle Plugin

DEMO http://malsup.com/jquery/cycle/
假設有三張圖片你希望能依序輪流顯示：

<div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div>

然後先定義這一區的 CSS

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
}
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0;
}

然後只要寫一行 JavaScript 就完成了整個廣告輪撥的工作：

$('.pics').cycle('fade');

若你想調整輪撥的速度（假設每 5 秒鐘換一張圖）

$('.pics').cycle({ 
    fx:    'fade', 
    speed:  5000 
 });

整體來說就是這個簡單，底下是官網上提供的示範與程式碼範例：
http://malsup.com/jquery/cycle/begin.html
http://malsup.com/jquery/cycle/int.html
http://malsup.com/jquery/cycle/int2.html
http://malsup.com/jquery/cycle/adv.html
http://malsup.com/jquery/cycle/adv2.html
http://malsup.com/jquery/cycle/more.html?v2.23

參考網址 http://blog.miniasp.com/post/2008/08/Writing-Marquee-and-Banner-Rotate-with-jQuery-Cycle-Plugin.aspx

訂閱：文章 (Atom)

2010年3月24日 星期三

2010年3月23日 星期二

2010年3月22日 星期一

2010年3月15日 星期一

2010年3月7日 星期日

2010年3月6日 星期六