jquery下拉刷新源码_下拉刷新代码

文章目录：

• 1、JS或者jquery的上拉加载和下拉刷新是怎么实现的
• 2、Jquery mobile 下拉刷新 怎么弄
• 3、怎么使用ajax或jquery动态刷新下拉菜单里的值

JS或者jquery的上拉加载和下拉刷新是怎么实现的

1、首先新建一个html文件，命名为test.html，在test.html文件内，引入jquery.min.js库文件，成功加载该文件，才能使用jquery中的方法。

2、在test.html文件内，使用button标签创建一个按钮，按钮名称分别为“刷新页面”。

3、在test.html文件内，设置button标签的id为btn，主要用于下面通过该id获得button对象。

4、在js标签内，使用$(function(){ })方法在页面加载完成时，通过window.location.href获得当前页面的链接，并把链接保存在变量url中。

5、在js标签内，通过id(btn)获得button对象，给它绑定click点击事件，实现当按钮被点击时，使用window.location.href方法跳转至url，从而实现刷新页面的效果。

6、在浏览器打开test.html文件，点击按钮，查看实现的效果。

Jquery mobile 下拉刷新 怎么弄

　在JQueryMobile页面在第一次初始化进行一次整体渲染，动态生成的需要局部渲染。

在jquerymobile实现listview局部渲染的方法：

复制代码 代码如下:

function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){

var queryPublishOrderListURL=""+trackOrDealOrInsp+"/"+userCode+"/"+type+"/"+pageNum;

$.ajax({

type: 'get',

dataType : "json",

url: queryPublishOrderListURL,

contentType: 'application/json',

data: [],

success: function(data) {

var sb = new StringBuffer();

$.each(data, function(i,item){

//创建一个工单列表行对象

sb.append("ul data-role='listview' data-inset='true' data-theme='c' data-pidertheme='b' ");

sb.append("li data-role='list-pider' "+item.work_orders_id+"span class='0466-5f83-687f-756c ui-li-count'"+i+"/span/li");

sb.append("lia id='"+item.work_orders_id+"' href='inspectorder.html' ");

sb.append("p data-role='fieldcontain' label for='work_orders_id'工单号:/labelspan id='work_orders_id'"+item.work_orders_id+"/span/p");

sb.append("p data-role='fieldcontain'label for='founder_na'创建人:/labelspan id='founder_na'"+item.founder_na+"/span/p");

sb.append("p data-role='fieldcontain'label for='found_time'创建时间:/labelspan id='found_time'"+item.found_time+"/span/p");

sb.append("p data-role='fieldcontain'label for='type_na'工单类型:/labelspan id='type_na'"+item.type_na+"/spanimg src='../../images/beforeforward.png' style='float: right'//p");

sb.append("p data-role='fieldcontain'label for='work_cont'工单内容:/labelspan id='work_cont'"+item.work_cont+"/span/p");

sb.append("/a/li");

sb.append("/ul");

});

var content = sb.toString();

$("#queryList").html(content);

},

error:function(XMLHttpRequest, textStatus, errorThrown){

alert("请求远程服务错误!");

},

complete: function() {

$("p[data-role=content] ul").listview();

}

});

}

备注：

listview针对jquerymobile针对listview组件刷新。

$("p[data-role=content] ul").listview();

如果想针对listview内部的li刷新可以使用

$("p[data-role=content] ul li").listview("refresh");

否则报错误如下：

jquerymobile listviewcannot call methods on listview prior to initialization; attempted to call method 'refresh'

jquerymobile checkbox及时刷新才能获取其准确值

复制代码 代码如下:

一般登录的时候 都有个记住用户名 记住密码 的两个checkbox 多选框

用jquerymobile 做页面 ，当勾选checkbox 时总是不能获取它正确的值。

解决办法：

[code]

$('input[type="checkbox"]').bind('click',function() {

$(this).prop('checked').checkboxradio("refresh"); // 绑定事件及时更新checkbox的checked值

});

如果要用js去改变checkbox的值时也要及时刷新。

$('input [type="checkbox"]').attr('checked',false).checkboxradio("refresh");

$('input [type="checkbox"]').attr('checked',false).checkboxradio("refresh");

原因：因为手动改变它的值后，jquerymobile不能重新渲染。 这样页面显示的值和实际值就不一样了。 （jquerymobile 把form表单元素都隐藏起来，然后用 js添加了一些元素易于美化input, select ,textarea 等元素的效果）

[/code]

下拉框刷新

复制代码 代码如下:

$("#selectbox").html(optionList).selectmenu('refresh', true);

复制代码 代码如下:

复选按钮

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

单选按钮组:

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

选择列表::

var myselect = $("select#foo");

myselect[0].selectedIndex = 3;

myselect.selectmenu("refresh");

滑动条

$("input[type=range]").val(60).slider("refresh");

开关 (they use slider):

var myswitch = $("select#bar");

myswitch[0].selectedIndex = 1;

myswitch .slider("refresh");

select 禁用样式

select id="select-choice-1" class="e23a-7d81-6af1-b402 mobile-selectmenu-disabled ui-state-disabled" disabled="disabled"name="select-choice-1" aria-disabled="true"

option value="standard"Standard: 7 day/option

option value="rush"Rush: 3 days/option

option value="express"Express: next day/option

option value="overnight"Overnight/option

/select

button禁用样式

input class="7d81-6af1-b402-0208 ui-btn-hidden mobile-button-disabled ui-state-disabled" type="button" disabled="disabled"value="不可用" aria-disabled="true"

怎么使用ajax或jquery动态刷新下拉菜单里的值

只要检测document和window对象的高度，在一个滚动事件中利用他们的关系约束，触发一个自定义的函数即可实现这是基于

options

，在

options

获取失去焦点事件

或者

下拉项选中事件

重新刷新数据这样做便于控制下拉列表何时显示隐藏，无法取消（我尝试过阻止默认事件，这方面成熟的jquery插件也不少，结果没有反应），所以最好的方法我觉得就是模拟select，自己写一组html替换select，就是说不用select标签，不用担心click的问题首先说下解决方案：function(data){/script.html(data)：{参数名;info"/如果你需要传参数的话;div上边的代码也是对的，我给你写个简洁的.;，但是不够简洁;，可以写在这里,参数名，可能你看不太懂.：$('/);div

id="script，格式为;第一步，使用jquery的ajax技术，将数据读入。相关的函数有$.ajax(),

$.get(),

$.post()$.load()

等函数。使用方法请百度一下，教程非常多。第二步，将读入的数据使用jquer的选择器比如$("#divid").html("这里放入数据")，也可以用$.text()，具体区别请参考$.html()和$.text()的使用方法。另外，jquer还支持读取json数据和script数据，可以将读取的数据直接使用或者执行。具体根据你的需要改变。