通过本文主要向大家介绍了ajax,下拉框等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
GooFunc.js文件
//获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到
function getElCoordinate(dom) {
var t = dom.offsetTop;
var l = dom.offsetLeft;
dom=dom.offsetParent;
while (dom) {
t += dom.offsetTop;
l += dom.offsetLeft;
dom=dom.offsetParent;
}; return {
top: t,
left: l
};
}
//兼容各种浏览器的,获取鼠标真实位置
function mousePosition(ev){
if(!ev) ev=window.event;
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.documentElement.scrollTop - document.body.clientTop
};
}
//给DATE类添加一个格式化输出字串的方法
Date.prototype.format = function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second ‘
//quarter
"q+" : Math.floor((this.getMonth()+3)/3),
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript">GooCombo.JS文件</pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre name="code" class="javascript">/*下拉框定义--GooCombo类*/
//dom :要被绑定的DOM对象，必须要有其ID或者NAME，且未被JQUERY对象化
//property :JSON变量，SLIDER的详细参数设置
//目前，构造函数可接受用普通DOM容器或者直接传送SELECT控件来进行渲染
function GooCombo(dom,property){
this.$div=null;//渲染完毕后最父框架的DIV
this.$id=null;//this.$div中SELECT控件的ID
this.$name=null;//this.$div中SELECT控件的NAME
this.$width = property.width; //下拉框控件的宽度，必填项
this.$haveIcon=property.haveIcon||false;
this.$input = $("<input type='text' value='" + property.text + "' " + (property.readOnly ? "readonly='readonly'" : "") + (this.$haveIcon ? " style='margin-left:20px;width:" + (this.$width - 39) + "px'" : "") + "/>"); //下拉框控件中始终显示的文本框INPUT
this.$btn=$("<div class='btn_up'></div>");//下拉框右部的按钮
this.$data=[];//下拉框控件的所有显示文字和值,二维数组
this.$type="basic";//下拉框控件的运行模式，有basic基本,multiple可多选,filter过滤显示 三种,默认为basic
this.$selectHeight=property.selectHeight||0;
this.$list=$("<ul style='width:"+(this.$width-2)+"px;height:"+property.selectHeight+"px;'></ul>");//下拉框的列表JQUERY对象
this.$lastSelect=null;//当前最近一次被选中的单元,在this.$type="multiple"时，它将不发挥其记录作用
this.$select = null; //保存所选值的单元一般为select控件
this.$autoLoad=false;//是否动设置为动态载入数据，既下拉动作触发时再载入数据，默认为FALSE()
this.$alreadyLoad=false;//是否已经载入完了数据,默认为false
//设置为动态自动获取数据(渲染后Combo中的input框被选中后载入数据)
this.setAutoLoad=function(bool){
this.$autoLoad=true;
};
if(property.autoLoad) this.setAutoLoad(property.autoLoad);
this.$ajaxType=null;//，其变量为一个远程链接参数的JSON数组，格式例如：{url:"website/pp.php",type:"POST",para:(与JQUERY中的AJAX方法中传参DATA一样)}默认为空
this.setAjaxType=function(json){
this.$ajaxType.url=json.url;
this.$ajaxType.type=json.type;
this.$ajaxType.para=json.para;
this.$ajaxType.dataType=json.dataType;
};
if (property.ajaxType) this.setAjaxType(property.ajaxType);
//开始构造函数主要内容
if(dom!=null && dom.tagName=="SELECT"){
var temp="";
for(var i=0;i<dom.length;i++){
this.$data[i]=[(dom.options[i].value||dom.options[i].text),dom.options[i].text,""];
temp+="<a href='#'><p "+"value='"+this.$data[i][0]+"'>"+this.$data[i][1]+"</p></a>";
}
this.$list.append(temp);
this.$id=dom.id;
this.$name=dom.name;
if(dom.multiple) this.$type="multiple";
this.$select=$(dom);
this.$select.wrap("<div class='Combo' id='Combo_"+this.$id+"'></div>")
this.$div=this.$select.parent(".Combo");
}
else{
this.$div=$(dom);
this.$div.addClass("Combo");
this.$select=$("<select></select>");
this.$div.append(this.$select);
}
//this.$div.before(this.$septum);
this.$div.css({width:this.$width+"px"});
this.$div.append("<div class='text' style='width:"+(this.$width-19)+"px;'></div>").append(this.$btn).append(this.$list);
this.$div.children("div:eq(0)").append("<div class='top_border'></div>").append(this.$input);
//如果DOM为一个SELECT控件，则property中的属性还可以覆盖掉原来的ID，NAME ,type="multple"的默认设置
//ID,NAME,TYPE如果在传入SELECT时就已经通过SELECT来定义，则PROPERTY中可以不用再写
if(property.id) {this.$id=property.id;this.$select.attr("id",property.id);}
if(property.name) {this.$name=property.name;this.$select.attr("name",property.name);}
if(property.type){
this.$type=property.type;
if(property.type=="multiple") {this.$select.attr("size",1);this.$select.attr("multiple",property.type);}
else this.$select.removeAttr("multiple");
}
//载入一组数据的方法
this.loadListData = function (data) {
this.$data = [];
if (this.$list.children("a").length > 0) {
this.$list.empty();
this.$select.empty();
}
temp = "", temp2 = "";
for (i = 0; i < data.length; ++i) {
this.$data[i] = [data[i][0], data[i][1], data[i][2] || ""];
if (this.$type== "filter")//在这里可以修改你想类型 basic 当鼠标点击进去是否展现初始数据
temp += "<a href='#'><p " + (this.$haveIcon ? "style='text-indent:19px;background:" + this.$data[i][2] + "' " : "") + "value='" + this.$data[i][0] + "'>" + this.$data[i][1] + "</p></a>";
temp2 += "<option value='" + this.$data[i][0] + "'>" + this.$data[i][1] + "</option>";
}
if (this.$type == "filter")
this.$list.append(temp);
this.$select.append(temp2);
this.$alreadyLoad = true;
};
if(property.data) this.loadListData(property.data);
//动态远程载入数据，AJAX请求的参数将读取this.$ajaxType中的设置
this.loadListDataAjax=function(){
var inthis=this;
$.ajax({
type:this.$ajaxType.type,
url:this.$ajaxType.url,
dataType:this.$ajaxType.dataType,
data:this.$ajaxType.para,
success:function(data){
inthis.loadListData(data);
}});
};
//提示文字
$("input[type='text']").each(function () {
if ($(this).val() == property.text) {
$(this).bind("focus", function () {
$(this).val("");
}).blur(function () {
$(this).val(property.text)
});
}
});
//绑定当INPUT框被选中时的事件
this.$input.bind("focus", { inthis: this }, //如果this.$autoLoad或!this.$alreadyLoad有一个为FALSE，则ajaxType将无效，可不传
function (e) {
if (e && e.preventDefault) e.preventDefault(); //阻止默认浏览器动作(W3C)
else window.event.returnValue = false; //IE中阻止函数器默认动作的方式
var inthis = e.data.inthis;
// inthis.$autoLoad = true;
//
//
// inthis.$alreadyLoad = false;
// inthis.$ajaxType = false;
if (!inthis.$alreadyLoad && inthis.$autoLoad) {
if (inthis.$ajaxType) {//如果是远程AJAX获取数据
inthis.loadListDataAjax();
}
else
{
inthis.loadListData(inthis.$data);
}
}
var list = inthis.$list;
var height = inthis.$selectHeight;
var width = inthis.$width;
list.css("display", "block");
$(document).bind("mouseup", function (e) {
var locate = getElCoordinate(list.get(0));