取得jQueryUI Tabs的當前tab panel

節選並翻譯自http://stackoverflow.com/questions/300078/jquery-ui-tabs-get-currently-selected-tab-index 雖然該帖子已經有些時日，不過我沒有發現有人提及這個方案： 如果不在Tab的事件（tab events ，http://jqueryui.com/demos/tabs/#events ）中，如何取得當前tab （ "selected tab" ）--當前選中的tab的下面的顯示內容的panel。我有一個簡單的方式... 

1. var curTab = $( '.ui-tabs-panel:not(.ui-tabs-hide)' );  

你可以很容易的得到索引號index， 完全正確， 下面是其文檔中提及的方式 

1. var $tabs = $( '#example' ).tabs();  
2. var selected = $tabs.tabs( 'option' ,  'selected' );  // => 0  

不過你可以用我說的方式來獲取索引號index 或者其他任何當前panel的屬性.. 

1. var curTab = $( '.ui-tabs-panel:not(.ui-tabs-hide)' ),  
2.     curTabIndex = curTab.index(),  
3.     curTabID = curTab.prop( "id" ),  
4.     curTabCls = curTab.attr( "class" );  

[DEBUG]jquery drop down menu hover後快速閃動

http://www.queness.com/resources/html/dropdownmenu/index.html

做DROP DOWN MENU 時, 用左JQUERY的 SLIDEUP同 SLIDEDOWN 來用作ANIMATION , 好似以上網址中的DEMO 咁

$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);

},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);

但發現到一個BUG, 就係當你好快咁mouseenter , 再好快咁mouseleave 個submenu, bug就產生了, 竟然見到個sub menu 不斷咁出現→消失→出現→消失...

最後發覺, 係個animation 問題, 當你移出/移入pointer既時候, slidedown animation 未完成又開始做slideup animation, 就會loop死左

解決方法原來好簡單, 就是在開始ANIMATION前STOP左去先

$('#nav li').hover(
function () {
//show its submenu
$('ul', this).stop(true, true).slideDown(100);

},
function () {
//hide its submenu
$('ul', this).stop(true, true).slideUp(100);
}
);

完成!

例子 - 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>

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 得 ~

js change obj to param string

js 用會 {id:12, name:'user'} 來做data,

點可以好快咁變成 id=12&name=user 呢?

ajax call 時好好用的~!

var params = {id:12, name:'user'};

jquery:

http://api.jquery.com/jQuery.param/

$.param(params);

PS: space 會變做+

prototype:

http://api.prototypejs.org/language/Object/toQueryString/

Object.toQueryString(params);

PS: space 會變做%20

js trim

how to trim a string using js?

function trim(str){

 return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

}

function trim(str){

 return str.replace(/^\s+|\s+$/g, '');

}

str = trim(str);

jquery:

http://api.jquery.com/jQuery.trim/

str = $.trim(str);

prototype:
http://api.prototypejs.org/language/String/prototype/strip/

str =  str.strip();

add element after an element

如何在某個element之後新增一個element呢~?

原來jQuery 同 Prototype 都各自有 method

http://api.jquery.com/after/

http://api.prototypejs.org/dom/Element/insert/

jQuery--

$('#eleId').after('<b>Hello</b>');

Prototype--

$('eleId').insert({

after: '<b>Hello</b>'

});