jquery.ui.progressbar 中文文档- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery.ui.progressbar 中文文档

Javascript: 为调试JavaScript添加输出窗口的代码; Js 中debug方式; 一些mootools的学习资源; JavaScript 精粹读书笔记(1,2); CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库; 数组Array进行原型prototype扩展后带来的for in遍历问题; javascript 鼠标拖动图标技术; 比较搞笑的js陷阱题; js 自定义的联动下拉框; js 省地市级联选择; JavaScript 类似flash效果的立体图片浏览器; JavaScript Event学习第九章鼠标事件; jQuery AJAX回调函数this指向问题; toString()一个会自动调用的方法; jQuery 文本框模拟下拉列表效果; 关于页面被拦截的问题; javascript 解析url的search方法; 一个XML格式数据转换为图表的例子; Javascript 获取链接(url)参数的方法[正则与截取字符串]; 一些收集整理非常不错的JS效果代码

No. « ‹ 285 286 287 288 › »

技术文章搜索

关键字

Javascript 中的 jquery.ui.progressbar 中文文档

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 99 ::

收藏到网摘: n/a

JavaScript 地震特效 JS 拖动效果实现代码比较简单

这个是最早做出来的, 现在也改成xml格式了, 呵呵.

复制代码代码如下:

<?xml version="1.0" encoding="UTF-8" ?>

<project>
<translate item="progressbar" version="7.1">
<translators>
<translator nickname="selfimpr" name="雷果国" mail="[email protected]" homepage="http://blog.csdn.net/lgg201" qq="285821471" />
</translators>
<relatives>
<depend isitem="false">
<name><![CDATA[jquery]]></name>
<description><![CDATA[jquery的核心库]]></description>
<url><![CDATA[http://docs.jquery.com]]></url>
</depend>
<depend isitem="false">
<name><![CDATA[jquery.ui.core]]></name>
<description><![CDATA[jquery.ui的核心库]]></description>
<url><![CDATA[http://jqueryui.com/demos]]></url>
</depend>
</relatives>
<overview>
<original><![CDATA[
进度条用来设计展现当前一个进度的完成百分比. 进度条的长度在满足默认父容器情况下可以通过CSS灵活改变.
该进度条是一个精确的精度条, 也就是说需要在系统能够保证精确改变当前完成状态时使用.如果不能计算到精确的完成百分比状态, 模糊的进度条(很快会加入)或spinner animation可以带来更好的用户体验
]]></original>
</overview>
<options>
<option name="value" default="0">
<types>
<type name="数字">
</type>
</types>
<description><![CDATA[用来设置进度条初始化时候的完成比.]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').progressbar({value: 37});]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var value = $('.selector').progressbar('option', 'value');
]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').progressbar('option', 'value', 37);]]></code>
</demo>
</demos>
</option>
</options>
<events>
<event name="change">
<trigger><![CDATA[processbar的value发生改变]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: progressbarchange]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[
$("#progressbar").progressbar({
change: function(event, ui) {
//this等价于event.target
alert('又完成了1%');
}
});
]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$("#progressbar").bind('progressbarchange', function(event, ui) {
//this等价于event.target
alert('又完成了1%');
});
]]></code>
</demo>
</demos>
</event>
</events>
<methods>
<method name="destroy">
<description><![CDATA[完全移除一个进度条控件, 使其回退到该元素被初始化成进度条控件之前的状态.]]></description>
<demos>
<demo>
<code><![CDATA[$("#progressbar").progressbar('destroy');]]></code>
</demo>
</demos>
</method>
<method name="disable">
<description><![CDATA[将可进度条控件样式改变成为失效, 与enable对应.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('disable');]]></code>
</demo>
</demos>
</method>
<method name="enable">
<description><![CDATA[将进度条控件样式改变为允许, 与disable对应.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('enable');]]></code>
</demo>
</demos>
</method>
<method name="option">
<arguments>
<argument name="optionName " type="字符串"><![CDATA[选项一节中列举的所有选项名都可用]]></argument>
<argument name="value" type="任意"><![CDATA[该选项可以接受的任意数据值.]]></argument>
</arguments>
<description><![CDATA[获取或设置进度条控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置. ]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('option', optionName[, value]);]]></code>
</demo>
</demos>
</method>
<method name="value">
<description><![CDATA[获取或设置进度条控件的当前value值]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('value'[, value]);]]></code>
</demo>
</demos>
</method>
</methods>
<theme><![CDATA[
普通的主题更改可以通过JQuery的在线主题定制方便的选定.
完全的自定义主题:ui.progressbar.css
ui-progressbar: 影响进度条容器样式
ui-progressbar-value: 影响进度条自身样式.
]]></theme>
<demos>
<demo>
<description><![CDATA[
译者注: 将下面的代码直接作为一个HTML文档运行, 就可以明白它是怎么工作的了.
]]></description>
<code><![CDATA[
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Progressbar - Default functionality</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var current_value = 0;
change = function() {
$("#progressbar").progressbar('option', 'value', current_value);
current_value ++;
if(current_value <= 100) {
setTimeout('change()', 200);
}
};
progressbar_dynamic = function() {
progressbar_init();
change();
};
progressbar_init = function() {
$("#progressbar").progressbar({
value: current_value,
change: function(event, ui) {
$('#number').text($(this).progressbar('option', 'value'));
document.getElementById('number').style.position = 'relative';
document.getElementById('number').style.left = $(this).progressbar('option', 'value') * ($('.ui-progressbar').width() / 100) - 5;
}
});
};
progressbar_destroy = function() {
$("#progressbar").progressbar('destroy');
};
progressbar_disable = function() {
$("#progressbar").progressbar('disable');
};
progressbar_enable = function() {
$("#progressbar").progressbar('enable');
};
progressbar_option = function() {
var option_name = $('#option_name').val();
var option_value = $('#option_value').val();
if(option_value) {
$("#progressbar").progressbar('option', option_name, option_value);
} else {
$('#option_value').val($("#progressbar").progressbar('option', option_name));
}
};
progressbar_value = function() {
var value_value = $('#value_value').val();
if(value_value) {
$("#progressbar").progressbar('value', value_value);
} else {
$('#value_value').val($("#progressbar").progressbar('option', 'value'));
}
};
});
</script>
<style type="text/css">
input{height: 22px; margin: 1px 2px;}
input[type=button]{border: none; width: 80px;}
input[type=text]{border: 1px solid #BBBBBB; line-height: 20px;}
#number{width: 5px;}
</style>
</head>
<body>
<br /><br />
<div id="number"> </div>
<div id="progressbar"></div>
<br /><br />
<input type="button" value="init" onclick="progressbar_init();" />

<input type="button" value="destroy" onclick="progressbar_destroy();" />

<input type="button" value="disable" onclick="progressbar_disable();" />

<input type="button" value="enable" onclick="progressbar_enable();" />

<input type="button" value="dynamic" onclick="progressbar_dynamic();" />
<br />
<input type="button" value="option" onclick="progressbar_option();" />
选项名: <input type="text" id="option_name" />
选项值: <input type="text" id="option_value" />
<br />
<input type="button" value="value" onclick="progressbar_value();" />
完成度: <input type="text" id="value_value" />
<br />
<hr />
init: 初始化一个进度条
destroy: 销毁进度条
disable: 失效
enable: 有效
dynamic: 一个模拟的动态加载效果
option: 测试option方法
value: 测试value方法
</body>
</html>
]]></code>
</demo>
</demos>
<summarize><![CDATA[
progressbar是一个用value来控制显示进度条的插件, 最关键的地方在于value属性和value方法. 用自己的程序控制改变value以显示当前进度..
]]></summarize>
</translate>
</project>

保存为xml格式文件。注意编码转换。

JavaScript 地震特效 JS 拖动效果实现代码比较简单

Javascript 中的 jquery.ui.progressbar 中文文档

评论 (0) All