[jQuery] jQuery UI Note ✪✪✪✪✪

jQuery UI 官网文档备忘录


120927h
复杂的版本匹配, 让抽换版本的工作变成沉重的负担, 光是换一个 jQuery1.4.3 与 jQuery UI 1.8.5 的版本, 就耗掉一个早上的时间, 才发现与 jQuery 1.7.1 搭配 jQuery UI 1.8.5 以后的 Tabs 的 ui.panel 竟然不见了耶! ui.tab 和 ui.index 倒是好好的, 虽然可以由 ui.tab 再自行取回 ui.panel, 不过这实在是一个猪头解决方式, 只好先退回 1.8.5 再说了。

131225w
jquery-ui-1.10.2.min.js 无法取得未定义或 Null 参考的属性 '_focusTabbable', 更至新版就行了!

   ◎ jQuery UI -- Ticket #9241 (closed bug: fixed) 2013-4-25
   ◎ stackoverflow -- jQuery UI Focus Stealing 2013-3-28

jQuery UI 1.10 Upgrade Guide

http://jqueryui.com/upgrade-guide/1.10/#tooltip


※ jQuery UI 版本匹配

     jQuery 1.10.2 搭 jQuery UI 1.10.3  130709,131227 下载  91kb+223kb

     jQuery 1.9.1 搭 jQuery UI 1.10.2  130321 整理  91kb+223kb

     jQuery 1.8.2 搭 jQuery UI 1.9.2 121223 下载
     jQuery 1.8.2 搭 jQuery UI 1.9.1 121109 下载
     jQuery 1.8.0 搭 jQuery UI 1.8.23  120926 下载

     jQuery 1.7.1 搭 jQuery UI 1.8.18  120410 整理

     jQuery 1.4.4 搭 jQuery UI 1.8.10  110309 下载  77kb+203kb

     jQuery 1.4.2 搭 jQuery UI 1.8.5  101018 下载   71kb+200kb
     jQuery 1.4.2 搭 jQuery UI 1.8.4  100915 下载  71kb+198kb
     jQuery 1.4.2 搭 jQuery UI 1.8.2  100609 下载   71kb+203kb

     jQuery 1.3.2 搭 jQuery UI 1.7.3
     jQuery 1.3.2 搭 jQuery UI 1.7.2  090808 下载  56kb+189kb

  ( jQuery 与 jQuery UI 版本须匹配, 没记下来都忘了是那个配那个了! 好乱哪! )


※ jQuery UI 备忘‧备忘‧备忘

◆ jQuery UI 官网 http://jqueryui.com
◆ jQuery UI Demos & Documentation
◆ jQuery UI Themes

※ Interactions

€ Draggable € Droppable € Resizable ❤ [jQuery] jQuery Drag & Drop
€ Selectable
€ Sortable

※ Widgets

€ Accordion
€ Autocomplete
€ Button
€ Datepicker
€ Dialog
€ Menu
€ Progressbar
€ Slider
€ Spinner
€ Tabs
€ Tooltip

※ Effects

€ Add Class
€ Color Animation
€ Effect
€ Hide
€ Remove Class
€ Show
€ Switch Class
€ Toggle
€ Toggle Class

※ Utilities

€ Position
€ Widget Factory



◎ jQUIT -- jQuery UI Metro Style Builder

※ Interactions

€ Selectable
€ Sortable

※ Widgets

€ Accordion
€ Autocomplete


*

€ Button

   $('X').button();

    // Checkboxes 工具栏选择项
   $( "#check" ).button();
   $( "#format" ).buttonset();

  
  


    
    
    
  

    // Icons
   $('X').button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s"} , text: false });

    // Radio
    $( "#radio" ).buttonset();

    


      
      
      
    

    // Split button
   $('#select').button({
         text: false,
         icons: { primary: "ui-icon-triangle-1-s" }
       })
       .click(function() {
         var menu = $( this ).parent().next().show().position({
           my: "left top",
           at: "left bottom",
           of: this
         });
         $( document ).one( "click", function() {
           menu.hide();
         });
         return false;
       })
       .parent().buttonset().next().hide().menu();

  


    

      
      
    

    
  

    // Toolbar
     ...

     #toolbar { padding: 4px; display: inline-block; }
     *+html #toolbar {    display: inline;  } /* support: IE7 */

  


      ...
  

*

€ DatepickerDialog

Default Date:    $( "#datepicker" ).datepicker();

Format Date:    Format options:
Default - mm/dd/yy ISO 8601 - yy-mm-dd Short - d M, y Medium - d MM, y Full - DD, d MM, yy With text - 'day' d 'of' MM 'in the year' yy

$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });  // Restrict date range

$( "#datepicker" ).datepicker( $.datepicker.regional[ "zh-TW" ] ); // Localize calendar

$( "#datepicker" ).datepicker({ altField: "#alternate", altFormat: "DD, d MM, yy" }); // Populate alternate field

$( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true }); // Icon trigger

// Date Range
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});

// Utility functions
• $.datepicker.setDefaults( settings )
• $.datepicker.formatDate( format, date, settings )
• $.datepicker.parseDate( format, value, settings )
• $.datepicker.iso8601Week( date ) ===> 1 to 53
• $.datepicker.noWeekends

   d  - 每月的第几天 (没有前导零)
   dd - 每月的第几天 (两位数字)
   o  - 一年中的第几天 (没有前导零)
   oo - 一年中的第几天 (三位数字)
   D  - day name short
   DD - day name long
   m  - 月份 (没有前导零)
   mm - 月份 (两位数字)
   M  - month name short
   MM - month name long
   y  - 年份 (两位数字)
   yy - 年份 (四位数字)

//  设定
   $(".datepicker").datepicker();
   $(".datepicker").datepicker("option", "dateFormat", 'yy-mm-dd');
   $(".datepicker").datepicker({ "dateFormat": 'yy-mm-dd' });
   $.datepicker.setDefaults($.datepicker.regional['zh-TW']);

   $("#locale").change(function () { // 变更语系
       $.datepicker.setDefaults($.datepicker.regional[$(this).val()]);
   });

// 语系  http://jqueryui.com/ui/i18n/ui.datepicker-fr.js
  jquery-ui-i18n.js  为全部语系 (59KB)

  $.datepicker.regional['af'] = {};
  $.datepicker.setDefaults($.datepicker.regional['zh-TW']);

  this.regional = [];
  this.regional[''] = { closeText: ...};

 



◎ Suresh Dasari -- Show Month and Year Only in jQuery UI Datepicker  2012-11-18  ★★★★

   $('#datepicker').datepicker({
       changeMonth: true, changeYear: true, dateFormat: 'MM yy',
       onClose: function(dateText, inst) {
           var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
           var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
           $(this).datepicker('setDate', new Date(year, month, 1));
       },
       beforeShow: function(input, inst) {
           if ((datestr = $(this).val()).length > 0) {
               year = datestr.substring(datestr.length - 4, datestr.length);
               month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $(this).datepicker('option', 'monthNames'));
               $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
               $(this).datepicker('setDate', new Date(year, month, 1));
           }
       }
   });

◎ 鸟毅的Blog jQuery UI Datepicker繁体中文年月菜单换行的小修正 2010-5-14


◆ jquery-ui-timepicker-addon.js

$('#txtEDate_DetailPage').datetimepicker({ "dateFormat": 'yy-mm-dd', "timeFormat": 'HH:mm' });

◆ jQuery.mtz.monthpicker

var yy = (new Date()).getFullYear();
$('#XXXX').monthpicker({ pattern: 'yyyy-mm', startYear: yy, finalYear: yy+1
    , monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] });


*

€ Progressbar

‧ Theming
  ui-progressbar 
  ui-progressbar-indeterminate
     ui-progressbar-value
        ui-progressbar-overlay

‧ Options: disabled max value
‧ Methods: destroy disable enable option value widget
‧ Events : change complete create

   $( "#progressbar" ).progressbar({ value: false });
   $( ".selector" ).progressbar({ value: 25 }); // 初始
   var value = $( ".selector" ).progressbar( "option", "value" ); // getter
   $( ".selector" ).progressbar( "option", "value", 25 );         // setter

   var progressSoFar = $( ".selector" ).progressbar( "value" );
   $( ".selector" ).progressbar( "option", { disabled: true } );

   // 初始 或 绑定
   complete: function( event, ui ) {}
   $( ".selector" ).on( "progressbarcomplete", function( event, ui ) {} );

‧ Custom Label ... 

   .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; }

  

Loading...

   var progressbar = $( "#progressbar" ), progressLabel = $( ".progress-label" );
   progressbar.progressbar({ value: false,
     change: function() { progressLabel.text( progressbar.progressbar( "value" ) + "%" ); },
     complete: function() { progressLabel.text( "Complete!" ); }
   });

   function progress() {
     var val = progressbar.progressbar( "value" ) || 0;
      progressbar.progressbar( "value", val + 1 );
      if ( val < 99 ) { setTimeout( progress, 100 ); }
   }
   setTimeout( progress, 3000 );

‧ Indeterminate Value

   $( "#progressbar" ).progressbar({ value: false });
   $( "button" ).on( "click", function( event ) {
     var target = $( event.target ), progressbar = $( "#progressbar" ),
        progressbarValue = progressbar.find( ".ui-progressbar-value" );
       if ( target.is( "#numButton" ) ) {
           progressbar.progressbar( "option", {
               value: Math.floor( Math.random() * 100 )
           });
       } else if ( target.is( "#colorButton" ) ) {
           progressbarValue.css({
               "background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
           });
       } else if ( target.is( "#falseButton" ) ) {
           progressbar.progressbar( "option", "value", false );
       }
   });

*

€ Slider


*

€ Tabs

  • Nunc tincidunt
  • Proin dolor
  • Aenean lacinia

标签 1 内容
标签 1 内容


标签 2 内容
标签 2 内容


标签 3 内容
标签 3 内容




Click tabs to swap between content that is broken into logical sections.


// 默认
$( "#tabs" ).tabs();


第一页

第二页

第三页

// Ajax


		$("#tabs").tabs({
			ajaxOptions: {
				error: function(xhr, status, index, anchor) {
					$( anchor.hash ).html(
						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
						"If this wouldn't be a demo." );
				}
			}
		});

// Open on mouseover
event: "mouseover"

// Collapse content
collapsible: true

// Sortable
$( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });

// Simple manipulation

// Tabs below content


		$( "#tabs" ).tabs();
		$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
			.removeClass( "ui-corner-all ui-corner-top" )
			.addClass( "ui-corner-bottom" );


// Events
tabsselect, tabsload, tabsshow (in that order)
tabsadd, tabsremove
tabsenable, tabsdisable


$('#example').bind('tabsselect', function(event, ui) {

    // Objects available in the function context:
    ui.tab     // anchor element of the selected (clicked) tab
    ui.panel   // element, that contains the selected/clicked tab contents
    ui.index   // zero-based index of the selected (clicked) tab

});

// ...retrieve the index of the currently selected tab
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

// ...select a tab from a text link instead of clicking a tab itself
$tabs.tabs('select', 2); // switch to third tab

※ Effects

€ Color Animation
€ Toggle Class
€ Add Class
€ Remove Class
€ Switch Class

*

€ Effect

    Effects: blind  bounce  clip  drop  explode  fade  fold  highlight  puff  pulsate  scale  shake  size  slide  transfer

   $('#OrdMsg').effect( "shake", {}, 500, effectback);

   function effectback() {
       setTimeout(function() {
           $( "#OrdMsg" ).removeAttr( "style" ).hide().fadeIn();
        }, 1000 );
   };


  

       

ui-widget-header ui-corner-all">Effect


        

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.


 

Run Effect


€ Toggle
€ Hide
€ Show

※ Utilities


€ Position
€ Widget

※ Theming jQuery UI


~ THE END~