selectize/src/plugins/dropdown_header/plugin.js

Selectize is a jQuery-based custom <select> UI control. Useful for tagging, contact lists, country selectors, etc.

/**
 * Plugin: "dropdown_header" (selectize.js)
 * Copyright (c) 2013 Brian Reavis & contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 * @author Brian Reavis <brian@thirdroute.com>
 */

Selectize.define('dropdown_header', function(options) {
	var self = this;

	options = $.extend({
		title         : 'Untitled',
		headerClass   : 'selectize-dropdown-header',
		titleRowClass : 'selectize-dropdown-header-title',
		labelClass    : 'selectize-dropdown-header-label',
		closeClass    : 'selectize-dropdown-header-close',

		html: function(data) {
			return (
				'<div class="' + data.headerClass + '">' +
					'<div class="' + data.titleRowClass + '">' +
						'<span class="' + data.labelClass + '">' + data.title + '</span>' +
						'<a href="javascript:void(0)" class="' + data.closeClass + '">&times;</a>' +
					'</div>' +
				'</div>'
			);
		}
	}, options);

	self.setup = (function() {
		var original = self.setup;
		return function() {
			original.apply(self, arguments);
			self.$dropdown_header = $(options.html(options));
			self.$dropdown.prepend(self.$dropdown_header);
		};
	})();

});