Code Learning: html

顯示具有 html 標籤的文章。顯示所有文章

2016年9月8日星期四

jQuery 動態加載內容(Ajax or append) 事件綁定無效解決辦法：.on()

參考：
http://www.polarxiong.com/archives/jQuery-Ajax%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E5%86%85%E5%AE%B9on-%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%E6%97%A0%E6%95%88%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95.html

1.Problem：
- 新增的『元素』讀取不到『事件』

2.Example：
- new botton 綁定『click』事件 → 出現 alert()
- 但只有寫死的有效，動態加載的卻失效
- 舉例：

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="cssName.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <title>aaa</title>
  
  <script>
  $(function(){
   $('#btn').click(function(){
    $('#the_div').append('<button>new button</button>');
   })

   $("#the_div button").click(function(){
    alert('clicked');
   }) 
   
  });

  </script>
 </head>
 <body>
 
  <div id="the_div">
   <button>new button</button>
  </div>
  
  <button id="btn">test</button>
 </body>

3.Why
- 第一次$(function(){}) 載入html時，只有寫死的new botton有被『註冊』
- 後面動態加載的並沒有被載入

4.Solution
- 使用.on方式
- $( document ).on( events, selector, data, handler );
- 舉例，將方法置換成下列程式

$(document).on('click','#the_div button',function(){
 alert('clicked');
})

2016年9月1日星期四

超連結 Html anchor link & jQuery animate scrollTop 滑動

1.Html anchor link

- 注意：
a.目前anchor都已改為id="myTestAnchor"設定
b.name="id="myTestAnchor"的設定名義上已取消，
但依然可以使用(name 只能跟<a name="myTestAnchor">test</a>搭配)

-範例：

a.設定連結(要連到哪裡??)

<a href="#mytest">按我Html超連結</a>

b.設定anchor(錨點)

<h1 id="mytest">超連結終點</h1>

2.jQuery animate + scrollTop 超連結滑動

- 注意：
a. 選取 class 為 "intro"、"demo" 或 "end" 的所有元素：$(".intro,.demo,.end")
b. $('#test').offset().top 為利用 .offset() 的方式來取得指定元素的 top 位置

-範例：
a. 功能：當id="myClick"元素被點擊時，滑動到id="test"的元素上面
b.. offset().top-100：可以控制滑動後畫面要停止在哪裡，不一定要把該元素升到最頂
c.範例程式碼：

$(function(){
     $('#myClick').click(function(){
        $('html , body').animate({scrollTop:$('#test').offset().top-100},800);
     });
});

3.完整範例

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src=""></script>
  <title>aaa</title>
  
  <script>
   $(function(){
    $('#myClick').click(function(){
     $('html , body').animate({scrollTop:$('#test').offset().top-100},800);
    });

   });
  </script>
  
 </head>
 <body>
  <button id="myClick">按我jQuery滑動</button>
  <a href="#mytest">按我Html超連結</a>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  <h1 id="test">滑動終點</H1>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  <h1 id="mytest">超連結終點</H1>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
 </body>

</html>

2016年8月29日星期一

Html rowspan 欄位合併

1.注意：
- tr 是一欄(行)
- 使用rowspan合併後，『第一筆』的資料需要『放在有用rowsapn的 tr 之中』
- 因為使用rowsapn，其實是『把格子往後推』

2.舉例：
- "56"用了rowsapn="3"，他會把格子往後『推三格』
- 因此需要將『第一筆的資料』塞進去
- 所以也放在同一個 tr 之內

<tr>
<td rowspan="3">2</td>
<td rowspan="3">2</td>
<td rowspan="3">[新聞]高雄亞灣變身3部曲邁向CBD</td>
<td rowspan="3">56</td>

<td>主文 / 共41則</td>
<td>Ptt > Gossiping</td>
<td>台灣新生報</td>
</tr>

3.完整範例

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="cssName.css">
  <script src=""></script>
  <title></title>
 </head>
 <body>
  <table border="1px solid">
   <thead>
    <tr>
     <th>排序</th>
     <th>合併後則數</th>
     <th>標題</th>
     <th>當日回文數</th>
     <th>回應數</th> 
     <th>來源</th>
     <th>作者</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>1</td>
     <td>20160822『中古屋價買新屋？建商讓利搶市、成交量恐暴衝？！』</td>
     <td>100</td>
     <td>主文 / 共100則</td>
     <td>Youtube關鍵字搜尋 > 關鍵字搜尋</td>
     <td>帥過頭房地產投資</td>
    </tr>
    <tr>
     <td rowspan="3">2</td>
     <td rowspan="3">2</td>
     <td rowspan="3">[新聞]高雄亞灣變身3部曲邁向CBD</td>   
     <td rowspan="3">56</td>
     <td>主文 / 共41則</td>
     <td>Ptt > Gossiping</td>
     <td>台灣新生報</td>  
    </tr>
     <tr>
      <td>主文 / 共15則</td>     
      <td>Ptt > Kaohsiung</td>
      <td>【記者吳國志／</td>
     </tr>
     <tr>
      <td>主文 / 共15則</td>     
      <td>Ptt > Kaohsiung</td>
      <td>【記者吳國志／</td>
     </tr>
   </tbody>
  </table>
 </body>

</html>

2016年7月21日星期四

Windos.open傳值問題

重點注意：若chrome不能執行，請用IE

方法一：單純傳值法

母：

function openWindow(){
       window.open('upload.html','mywindow','width=400,height=200');
}

子：

function backToParent(){
    //opener（母視窗）的form1的輸入值 = 目前網頁（子視窗）form2輸入的值
    opener.document.form1.textInput.value = document.form2.input.value;
    window.close();
}

方法二：呼叫母視窗的某個方法，並帶參數

母：

function action4(){
 window.open('popupView.html','PopupView', config='height=350,width=350');
 
 //document.getElementById("myText").value = window.returnValue;  
}

function actionFather(Value){
 //alert("Value")
 var Value = Value;
 
}

子：

function action5(){
           window.opener.actionFather("haha"); //呼叫父視窗的actionFather方法，並把值傳過去給他
           window.close();   
}

2016年9月8日 星期四