2014年1月8日 星期三

jquery slideDown延遲展開,排除反覆顯示



$(document).ready(function(){
     var mouseover_tid = [];
     var mouseout_tid = [];






     $('ul.main_menu>li').hover(//第一層
           function(event){  //滑入

                var _self = this;
                // 停止卷起事件
                clearTimeout(mouseout_tid[$(this).index()]);
                // 當滑鼠滑入超过 0.4 秒, 即展開,並紀錄陣列 ID 中
                mouseover_tid[$(this).index()] = setTimeout(function() {
                      $(_self).find('ul.submenu').slideDown('fast');  //第二層展開
                }, 400);
           },
           function(event){    //滑出
                var _self = this;
                // 停止展開事件
                clearTimeout(mouseover_tid[$(this).index()]);
                // 當滑鼠離超過 0.4 秒, 即收起, 並記錄陣列 ID 中
                mouseout_tid[$(this).index()] = setTimeout(function() {
                      $(_self).find('ul.submenu').slideUp('fast'); //第二層收起
                }, 400);
          }
});










參考/延伸資料:


var t = setTimeout( function(){   m動作    }, n毫秒 );   達n秒執行m    只執行一次
clearTimeout(t);  停止執行m
Note: To be able to use the clearTimeout() method, you must use a global variable when creating the timeout method


http://www.cnblogs.com/ishibin/archive/2013/01/30/2883822.html  
http://www.w3schools.com/jsref/met_win_settimeout.asp
http://www.w3schools.com/jsref/met_win_cleartimeout.asp




var s = setInterval(function, 1000) 每秒執行
window.clearInterval(s); 
http://yiyingloveart.blogspot.tw/2013/04/settimeout-setinterval.html
http://www.w3school.com.cn/htmldom/met_win_setinterval.asp







下拉選單 某值 不可選

標題群組


  <SELECT>  
   <OPTGROUP label="麵包">  
        <OPTION selected>起司麵包</OPTION>  
        <OPTION>菠蘿麵包</OPTION>  
       <OPTION>草莓麵包</OPTION>  
       <OPTION>布丁麵包</OPTION>  
   </OPTGROUP>  
   <OPTGROUP label="蛋糕">  
        <OPTION>奶油布丁蛋糕</OPTION>  
        <OPTION>冰淇淋蛋糕</OPTION>  
        <OPTION>水果蛋糕</OPTION>  
   </OPTGROUP>  
</SELECT> 




參考: http://www.blueshop.com.tw/board/FUM20041006152641OLG/BRD20091007215357WBF.html








特定選項不能選
<script type="text/javascript">
function treat(sel)
{ nochoice = [0,1,4,5]
  for ( var num in nochoice )
    sel.options[nochoice[num]].selected = false
}
</script>

<select name="select2" size="5" multiple class="p12" id="select2"
onchange="treat(this)">
<option selected>-------------------------------</option>
<option>[標題一]</option>
<option>aaa</option>
<option>bbb</option>
<option>----------------------------------------</option>
<option>[標題二]</option>
<option>ccc</option>
<option>ddd</option>
</select>





參考: http://tw.knowledge.yahoo.com/question/question?qid=1009100708010

2013年12月17日 星期二

SQL ORDER BY with LIKE

SELECT name 
FROM table 
WHERE name LIKE "%John%" 
ORDER BY (CASE WHEN name = "John" THEN 1 WHEN name LIKE "John%" THEN 2 ELSE 3 END),name LIMIT 10 ;


參考資料:
http://stackoverflow.com/questions/10070508/sqlite-like-order-by-match-query

2013年12月10日 星期二

input radio 點文字checked

<input type="radio" id="sex1" name="sex" value="M"  /><label for="sex1">male</label>

<input type="radio" id="sex2" name="sex" value="F"  /><label for="sex2">female</label>




參考資料:
http://blog.xuite.net/bluishbox/code/61378093-%5BHTML%5D+%E9%BB%9E%E9%81%B8+radio+%E5%BE%8C%E8%AE%8A%E8%89%B2


http://www.blueshop.com.tw/board/show.asp?subcde=BRD20081001220501J6M



http://pattyshih66.pixnet.net/blog/post/145680918-%E2%92%BF-%E4%BD%BF%E7%94%A8javascript%E5%8F%96%E5%BE%97radio%E5%92%8Cselect%E7%9A%84%E5%80%BC

2013年12月4日 星期三

Ajax + PHP + Jquery onblur

A.php
<script> 
  $(document).ready(function(){
//檢查帳號是否存在
$('#username').blur(function(){
var acc = document.getElementById("username").value;
$.ajax({url: '../db_select/db_member.php?acc='+acc, type: 'GET'})
  .done(function(response){
var msg = response; //因型態問題,須設置在變數中
if(msg == "no"){ //帳號不存在
$('#username').css({
'color' : '#F00'
});
$('#username').val('無此帳號!');
}
  });
});
});
</script>
<input name="username" type="text" id="username" />


db_member.php

$acc = "-1";
if (isset($_GET['acc']) && $_GET['acc'] != "") {
  $acc = (get_magic_quotes_gpc()) ? $_GET['acc'] : addslashes($_GET['acc']);
}
mysql_select_db($database_labor, $labor);
$sql = sprintf("SELECT acc FROM memberWHERE acc= '%s'", $acc);
$result = mysql_query($sql, $labor);
$row = mysql_fetch_assoc($result);
$total = mysql_num_rows($result);

if($total > 0){
echo "yes";
}else{
echo "no";
}

此時db_member.php就會回傳到A.php接收



參考資料:
http://stackoverflow.com/questions/12384166/send-ajax-request-when-textfields-onblur-event-is-fired

http://stackoverflow.com/questions/10886782/ajax-checking-username-onblur

2013年11月20日 星期三

javascrip 動態下拉式選單 一動二

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--
function select1_onchange(ele) {
var Target = document.form1.select2;
var Value = ele.options[ele.options.selectedIndex].value;

//先將選項清空
for(var i=0;i< Target.options.length;i++ ){
Target.options[i]=null;
}
switch (Value) {
case '1' :
var labels = new Array("A","B","C");
                         //將新選項填入
for(var i = 0; i < labels.length; i++){
var newOption=new Option(labels[i],i);
                                /*另一種寫法
                                    var newOption=new Option;
                                     newOption.value=Value+"."+(i+1);
                                      newOption.text=Value+"."+(i+1);
                                */
if(i==0){
newOption.selected=true; //如果沒有這一句,則在NS4.5中,會是空白選項為預設選項。
}
document.form1.select2.options[i]=newOption;
}
break;
case '2' :
var labels = new Array("W","Q","R");
for(var i = 0; i < labels.length; i++){
var newOption=new Option(labels[i],i);
if(i==0){
newOption.selected=true; //如果沒有這一句,則在NS4.5中,會是空白選項為預設選項。
}
document.form1.select2.options[i]=newOption;
}
break;
}
}
function select2_onchange(ele) {
        document.form1.text1.value=ele.options[ele.selectedIndex].value
}









<FORM action="" method=POST id=form1 name=form1 >
<SELECT id="select1" name="select1" LANGUAGE=javascript onchange="return select1_onchange(this)">
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
</SELECT>
<SELECT id=select2 name=select2 LANGUAGE=javascript onchange="return select2_onchange(this)">
<OPTION value="0">A</OPTION>
<OPTION value="1">B</OPTION>
<OPTION value="2">C</OPTION>
</SELECT><INPUT type="text" id=text1 name=text1 size=3></FORM>











參考資料:
http://www.programmer-club.com/showSameTitleN/javascript/2197.html
http://www.dotblogs.com.tw/jellycheng/archive/2010/12/17/20215.aspx

http://www.w3schools.com/php/php_ajax_database.asp    AJAX (javascript 更動 SQL資料)
http://stackoverflow.com/questions/15605189/mysql-query-within-javascript





2013年11月19日 星期二

HTML 超連結

< a href = "  "  target = "  " >
指定欲連結的視窗(_blank,_top,_self,_parent,框窗名稱)

target=_blank:將連結的畫面內容,開在新的瀏覽視窗中。
target=_parent:將連結的畫面內容,當成文件的上一個畫面。
target=_self:將連結的畫面內容,顯示在目前的視窗中。
target=_top:這個參數可以解決新連結的畫面內容,被舊框窗包圍的困擾,使用這
                      參數,會將整個畫面重新顯示成連結的畫面內容。 




參考:
http://www.asjh.tn.edu.tw/xupload/learning/html/htmltag/a.htm