2011/04/25

local search at html page

如果想幫個網站的一版做search function
以下的code 係好幫
一search 就會highlight 所有keyword

我用左jquery~
function highlightKeyword(){
var keyword = $('#keyword').attr('value');
keyword='('+keyword+')';

var patt=new RegExp(keyword,'gi');

var oriHTML = $('#body').html();

// 用regular expression 去replace keyword 的style
var newHTML=oriHTML.replace(patt, '<span style="color:#000000; background-color:yellow; font-weight:bold;">$1</span>');

$('#body').html(newHTML);
}

2011/04/20

例子 - select in jquery


目的是左面SELECT選擇時, 右面PARENT ITEM跟著一起轉
特別地方是只match option內的html (因為value不能比較) , 而html也不是全等, 只是"match"


jQuery("select#edit-field-category-und").change(function(){ //事件發生
    //一次印出
    var word = jQuery("select#edit-field-category-und option:selected").html();
   // jQuery("#edit-menu-parent option:contains("+word+")").attr('checked',true);
   jQuery("select#edit-menu-parent").children().each(function(){
      if (jQuery(this).text().match(word)){
          //jQuery給法
          jQuery(this).attr("selected","true");
 
      }
    });

});

jQuery對select tag的操作


  • get
    • 取出選擇的值
      $("select#Club").val();
      $('select#Club option:selected').text();

      以上2方法在單選時相同,但複選時,
      val()會用逗號分開 ex. AA, BB
      text()不會 ex. AABB
    • 取出array
      $("select#Club").children("[@selected]").each(function(){
          alert(this.text());
      });
  • set
    • 使某option變為selected
      $("#select1").children().each(function(){
          if ($(this).text()=="option you want"){
              //jQuery給法
              $(this).attr("selected","true"); //或是給selected也可

              //javascript給法
              this.selected = true;
          }
      });
    • 讓新增的option直接為selected
      var option = jQuery("new option");
      $('
      select#Club').append(option);
      $(option).attr("selected","true"); //讓option為selected
      $('
      select#Club').trigger("change"); //最後要觸發select的change事件
    • select下拉框的第二個元素為當前選中值
      $('select#Club')[0].selectedIndex = 1;//不知為何要加[0]
      =========== K. T. Chen 提到 ==========================
      在$("")加[0]的意思是把jQuery物件轉為DOM物件。這樣子jQuery物件才能使用DOM底下的selectedIndex方法。
  • event
    //改變時的事件
    $("select#Club").change(function(){ //事件發生
        //一次印出
        alert($(this).val());

        //印出選到多個值
        jQuery('option:selected', this).each(function(){
            alert(this.value);
        });
    });
  • 移除
    removeOption(index/value/regex[, selectedOnly])
    $('select#Clubs option:selected').remove();


//純javascirpt
<select onchange="alert('Index: ' + this.selectedIndex
+ '\nValue: ' + this.options[this.selectedIndex].value)">
...
</select>

2011/04/15

"disabled" 的INPUT 是不能POST的

 簡單例子...下面有張FORM, 第一個input disable了, 第二個正常

<FORM action="test.php" method="post">
    <P>
      First name: <INPUT type="text" name='firstname' value='hihi' disabled><BR>
      Last name: <INPUT type="text" name='lastname' ><BR>

       <INPUT type="submit" value="Send">
    </P>
 </FORM>

即使firstname裝有value, 但最後只有lastname 被POST 出.....

小小的定義問題, 但已令我浪費左好多時間!!!

2011/04/10

jquery $.each 的問題

用jquery 的$.each 好好用
尤其係對array 入面的野
但當我要splice 個array 的時候就好唔方便了 ><

SAMPLE:
$.each(array, function(i, item){
    if (!item.name || item.name == '' ){
        array.splice(i, 1);
        i--;
    }
});

這是冇用的
因為個i 係每個function 計
改變唔到出面個i
所以就算splice 到都會出error...

要用普通的for loop 得 ~

2011/04/03

iphone4 css style sheet

因為iphone4 個resolution 有d 唔同

所以有時css 的setting 都會唔到


呢個方就可以令iphone4 食多一張css

<link
    rel="stylesheet" type="text/css" href="iphone4.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>


或者可以咁

@media only screen and (-webkit-min-device-pixel-ratio: 2 ) {
    body{color:red;}
}