2012-02-10 29 views
6

Tôi muốn tạo một điều khiển bằng cách sử dụng khung công tác jquery. Tôi biết rằng tôi phải sử dụng làm cơ sở jquery.ui.widget.js làm nhà máy.cách tạo điều khiển tùy chỉnh bằng cách sử dụng jquery ui?

Điều khiển này tôi muốn tạo có hành vi tương tự như tabcontrol. Tôi muốn tạo ra một tileview, vì vậy khi yo chọn một nội dung trong một bảng điều khiển bội số xem ... nó mở rộng và những người khác sụp đổ đến một bên của kiểm soát. Giống như trang này http://demos.telerik.com/silverlight/#TileView/FirstLook Có hướng dẫn nào, từng bước để tạo tiện ích con tùy chỉnh không?

+2

Kiểm tra này có thể giúp bạn http: //www.erichynds.com/jquery/tips-for-developing-jquery-ui-widgets/ – ShankarSangoli

Trả lời

7

Một điểm khởi đầu tốt là tài liệu hướng dẫn jQuery UI về chủ đề này: http://wiki.jqueryui.com/w/page/12138135/Widget-factory

Tối thiểu widget của bạn phải thực hiện đoạn mã sau (mẫu lấy từ tài liệu):

(function($) { 
    $.widget("demo.multi", { 

    // These options will be used as defaults 
    options: { 
     clear: null 
    }, 

    // Set up the widget 
    _create: function() { 
    }, 

    // Use the _setOption method to respond to changes to options 
    _setOption: function(key, value) { 
     switch(key) { 
     case "clear": 
      // handle changes to clear option 
      break; 
     } 

     // In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget 
     $.Widget.prototype._setOption.apply(this, arguments); 
     // In jQuery UI 1.9 and above, you use the _super method instead 
     this._super("_setOption", key, value); 
    }, 

    // Use the destroy method to clean up any modifications your widget has made to the DOM 
    destroy: function() { 
     // In jQuery UI 1.8, you must invoke the destroy method from the base widget 
     $.Widget.prototype.destroy.call(this); 
     // In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method 
    } 
    }); 
}(jQuery)); 
Các vấn đề liên quan