jQuery 插件私有属性的调用(UI 为列)

最新推荐文章于 2022-10-29 10:10:10 发布

原创最新推荐文章于 2022-10-29 10:10:10 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ui #JavaScript #ViewUI

本文介绍了一个使用 jQuery UI 实现的 Combobox 组件，该组件能够将普通的 HTML 下拉选择框转换为具备自动完成功能的输入框。文章提供了完整的 JavaScript 代码实现，包括如何在不刷新页面的情况下重新加载组件的方法。



(function( $ ) {
	$.widget( "ui.combobox", {
		create: function() {
		var self = this,
		select = this.element.hide(),
		selected = select.children( ":selected" ),
		value = selected.val() ? selected.text() : "";
	var input = this.input = $( "<input>" )
		insertAfter( select )
		.val( value )
		.autocomplete({ ....//以下省略

   //需要实现在页面无刷新的情况下 重新加载组件
   $("#test").click(function(){
        //通过创建 原型(函数) 调用组件下方法
	$.ui.combobox.prototype.create = function(){
	   this._create();
	};

	$("#combobox option:eq("+ Rand +")").attr("selected", true);
	$("#combobox").parent().find("input,button").remove();
	$( "#combobox" ).combobox("create");
    });

    <div class="ui-widget">
	<label>Your preferred programming language: </label>
	<select id="combobox">
		<option value="">Select one...</option>
		<option value="ActionScript">ActionScript</option>
		<option value="AppleScript">AppleScript</option>
		<option value="Asp">Asp</option>
		<option value="BASIC">BASIC</option>
		<option value="C">C</option>
		<option value="C++">C++</option>
		<option value="Clojure">Clojure</option>
		<option value="COBOL">COBOL</option>
		<option value="ColdFusion">ColdFusion</option>

	</select>
    </div>
<button id="test" >Test</button>