打印

[征集]适于Ajax的UI组件

本主题由 bound0 于 2008-1-2 13:56 解除置顶
优秀的适于Ajax的UI组件,具有自包含的特点(自身就能构成完整或部分的的Ajax特性),使用少量的导入代码就可以添加到Web页面或桌面宿主环境中应用。

这样的组件对于从业者和学习者来说都是很好的资源。

本贴的目标:从面向公众的角度收集、整理和发布适于Ajax的UI组件。

欢迎大家参与交流,可以推举第三方的杰作,也可以自荐原创成果。

发布内容将由本版负责维护。

发布的材料请至少包括组件名称、代码下载包(.rar附件或下载链接)、简要说明,如果方便请给出演示例子

推荐第三方组件时,请给出标准名称和作者官方链接(或Email)。

原创作品请注明所属使用协议。(开源协议作品可适当打分,加“威望”)。

预先替本贴的受益者谢谢大家的热情参与!不胜感激、涕零不已(急需面巾纸,呵呵)!

[ 本帖最后由 bound0 于 2007-3-23 19:00 编辑 ]
[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群:45274013
有这么一个现成的网站,里面有不少好东西。

http://www.miniajax.com/
该用户未注册,没有签名。
忍不住要灌水,一个星期以来的梦想被楼上的指点出来了。
呵呵,我也来顶一下。
战胜自我!!

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
先占位再说!

————————————————————————————————————
注意,5 楼以后不许再占位(谁叫你们来晚了呢 ,嫉妒本层的吧)

[ 本帖最后由 bound0 于 2007-3-19 15:28 编辑 ]
saynoo.com 空间6折

TOP

引用:
原帖由 saikey 于 2007-3-22 14:29 发表
不是很明白。AJAX的UI组件是什么。
AJAX也有UI组件?

TOP

回复 #6 jammay 的帖子

第一帖可能表述有些问题,“适于Ajax的UI组件"——当然也可以和Ajax没关系。
[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群:45274013

TOP

对这个题目有意见,觉得有为了AJAX而AJAX的意思;AJAX只不过是实现UI的手段,什么时候变成UI服务的对象了?
不如搞几个征集某些UI的解决方案,这样针对性更强些。

我的站上的所有效果都可以被点名,只是我最近恐怕没时间整理...
先发一个窗口测试,按住右下角可以改变大小,未完成最大化等操作....

_______________________________________________________________________
AJAX不是实现UI的手段
多积累些UI解决方案,实现AJAX才比较容易。现在这里说AJAX是个笼统的提法,代指所有那些具有类似于AJAX效果的应用。

[ 本帖最后由 bound0 于 2007-3-26 19:08 编辑 ]

TOP

Yahoo 的YUI
http://developer.yahoo.com/yui

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.
我在等待。

TOP

我觉得这种应用有一个前提,那就是基于哪个框架的应用。
现在流行的Ajax框架很多,如果没有指明相关的应用是基于哪个框架的话,用起来估计问题也不少。
所以我觉得,这种征集最起码也要加入一些应用的适用框架要求,要不然我自己写的Ajax对象,对于我自己来说,其他组件都用起来不错,但一跟其他的框架整合后,就一大堆问题也是不对的。
新一代四无新人……博客 | 相册
努力三件事:赚钱,技术,语言。
缺钱花了,求项目做,想低价或想比价的请勿扰。

TOP

AjaxPro
我只说.net2.0的的组件
官方网站:http://ajaxpro.info
目前最新版本:6.10.6.1.
下载地址:http://www.codeplex.com/AjaxPro/Release/ProjectReleases.aspx?ReleaseId=713
使用方法:
1、修改web.config
在system.web节点下加入
复制内容到剪贴板
代码:
<httpHandlers>
<add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
2、在后台类前引入ajax命名空间,在javascript中可以使用这个命名空间
复制内容到剪贴板
代码:
[AjaxPro.AjaxNamespace("AjaxExamples")]//下面的javascript会用到这个AjaxExamples
public partial class _DefaultCS : System.Web.UI.Page
{
...
}
3、后台中Page_Load中注册类
复制内容到剪贴板
代码:
protected void Page_Load(object sender, EventArgs e)
{
    AjaxPro.Utility.RegisterTypeForAjax(typeof(_DefaultCS));//_Default是页面类名
}
4、在需要用javascript调用的方法前加入[AjaxPro.AjaxMethod]
复制内容到剪贴板
代码:
[AjaxPro.AjaxMethod]
public DateTime GetServerTime()
{
return DateTime.Now;
}
5、在javascript直接调用后台的方法,就像在.net中用一样
复制内容到剪贴板
代码:
<script type="text/javascript">
function displayServerTime() {
    AjaxExamples.GetServerTime(function(res) {//调用服务器端的方法GetServerTime
        if(res.value != null) {
            alert("The web server time: " + res.value.toLocaleString());//res.value就是服务器端返回的结果
        }
    });
}
</script>
完整的后台代码:
复制内容到剪贴板
代码:
using System;
using System.Data;
using System.Configuration;
using System.Web;
[AjaxPro.AjaxNamespace("AjaxExamples")]
public partial class _DefaultCS : System.Web.UI.Page
{
    [AjaxPro.AjaxMethod]
    public DateTime GetServerTime()
    {
        return DateTime.Now;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(_DefaultCS));
    }
}
总结:ajaxpro用起来非常的简单,只要加入几句简单的代码就可以实现ajax应用,并且,从服务端并不是只能返回string型,它可以返回复杂的数据类型,比如,DataSet,我们可以通过ajaxpro来从服务器端取回整个DataSet,然后在javascript中像.net一样的操作这个返回的DataSet中的DataTable,随心所欲。重要的是,它的兼容性比较好,IE6与FF2.0测试完全通过(我手头只有这两种浏览器)

[ 本帖最后由 99love 于 2007-3-31 22:31 编辑 ]

TOP

jquery http://www.jquery.com

喜欢这种轻量级的,特别是 jquery 获取页面对象的方法

支持 CSS 和 XPATH 的写法。很多高难度动作尽在敲几下键盘中。

[ 本帖最后由 bound0 于 2007-4-7 09:53 编辑 ]
The Matrix Reloaded.
http://www.loveyuki.com

TOP

外国人做的一个Datagrid,很不错

程序演示:
http://www32.websamba.com/zyc4u/eba/

调用举例:
复制内容到剪贴板
代码:
<HTML xmlns:eba>
<head>
<title>EBA: Grid Control V2.6 Static Demo</title>
<!-- Include the code and stylesheet for the grid control. -->
<script language="JScript.Encode" src="ebagrid.js"></script>
<link type="text/css" rel="stylesheet" href="styles\xp\eba.css">
<!-- used as an error feedback placeholder -->
<span id="errorSpan"></span>
<script language="Javascript">
// Definition of the errorhandler for the Grid. In case of an error the function would print out the error message to the errorSpan.
function errorHandler() {
    errorSpan.innerHTML=myGrid.object.lastError;
}
</script>
</head>
<!-- This defines a XML dataisland in EBA compressed XML format.
     This dataisland is used as datasource for the LOOKUP control in the columndefinition of type LOOKUP. -->
<xml id="lookupdata">
    <root fields="service|city" keys="service|city">
        <e a="storage" b="Vancouver" xk="2" />
        <e a="catering" b="Toronto" xk="1" />
        <e a="security" b="Calgery" xk="5" />
        <e a="transport" b="Montreal" xk="4" />
    </root>
</xml>
<!-- This defines a XML dataisland in EBA compressed XML format.
     This dataisland is used as datasource for the grid control. -->
<xml id="griddata">
    <root fields="client|service|quantity|charge|memo|date|inet|image" keys="client|service|quantity|charge|memo|date|inet|image">
        <e xk="_1" a="3" b="security" c="5299.22" d="0" e="bzxbb" f="2004-01-09 22:20:3" g="http://www.cnn.com" h="resources/test2.gif" fld="" />
        <e xk="_2" a="2" b="catering" c="30.00" d="1" e="testing" f="" g="" h="resources/test3.gif" fld="" />
        <e xk="_3" a="2" b="security" c="889.00" d="1" e="more" f="2005-05-05 0:0:0" g="" h="resources/test1.gif" fld="" />
        <e xk="_4" a="2" b="security more" c="999.00" d="1" e="testing" f="2004-05-03 0:0:0" g="" h="resources/test2.gif" fld="" />
        <e xk="_5" a="1" b="catering" c="20.00" d="1" e="testing" f="2004-02-01 0:0:0" g="" h="resources/test3.gif" fld="" />
        <e xk="_6" a="2" b="security" c="600.00" d="1" e="testingdfdf" f="2006-06-05 0:0:0" g="" h="resources/test4.gif" fld="" />
        <e xk="_7" a="3" b="storage" c="5550.00" d="0" e="testing" f="" g="" h="resources/test1.gif" fld="" />
        <e xk="_8" a="2" b="security" c="8080.00" d="1" e="testing" f="" g="" h="resources/test5.gif" fld="" />
        <e xk="_9" a="1" b="" c="500.00" d="0" e="testing" f="" g="" h="resources/test1.gif" fld="" />
        <e xk="_10" a="2" b="" c="" d="1" e="testing" f="" g="" h="resources/test6.gif" fld="" />
    </root>
</xml>
<!-- The body of the webpage. Note the call to 'InitEBAGrids()' that initialises any grids on the page when it loads. -->
<body onload="InitEBAGrids()">
    <table align=center ID="Table1">
    <tr>
        <td> <!-- Insert the grid. Note the id of the grid 'myGrid' which is used to reference the control. -->
            <eba:gridlist id="myGrid" getHandler="griddata" height="250" width="740" cellHeight="16" onError="errorHandler()">
                <eba:ColumnDefinition type="LISTBOX"  label="Client"    width="60"  xdatafld="client"    values="1:Aceme,2:Henry,3:Intra,4:West" show="value" />
                <eba:ColumnDefinition type="IMAGE"    label="Image"     width="50"   xdatafld="image"     initial="resources/test1.gif" />
                <eba:columndefinition type="NUMBER"   label="Quantity"  width="100"  xdatafld="quantity"  mask="###,##0.00" />
                <eba:columndefinition type="CHECKBOX" label="Charge"    width="80"   xdatafld="charge"    values="1:charge,0:notcharge" initial="1" />
                <eba:columndefinition type="LOOKUP"   label="Service"   width="80"   xdatafld="service"   getHandler="lookupdata" />
                <eba:ColumnDefinition type="TEXT"     label="Memo"      width="80"  xdatafld="memo"      />
                <eba:ColumnDefinition type="DATE"     label="Date"      width="160"  xdatafld="date"      mask="dddd, mm-dd-yyyy h:n:s" />
                <eba:ColumnDefinition type="LINK"     label="Inet"      width="128"   xdatafld="inet"      linkurl=field(inet) />
            </eba:gridlist>
        </td>
    </tr>
</table>
          </body>
</html>
<P>
<b> <font size=+1> <a href="http://www1.websamba.com">Get You Own Free Website Now</a></font>
<p />
完整程序下载:

[ 本帖最后由 zozo98 于 2007-4-6 17:36 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

spry

DreamWeaver CS3里面的……
你风流,我俊雅,和你同年少,两情深,罚下愿,再不去跳槽。

TOP

目前好象支持ASP.NET2.0的AJAX组件最多了。

免费AJAX组件: http://ajax.asp.net/ajaxtoolkit/ 有好几十个耶!不但提供全部组件源码,还在不断增加,是微软为数不多的开源软件之一。
商品AJAX组件: NetAdvantage_20071_CLR2x_NET,ComponentOne.Studio.for.ASP.NET.2007.v1.for.DotNET.Framework.v2.0......

[ 本帖最后由 netboy10 于 2007-4-24 15:48 编辑 ]

TOP

yiu-ext

TOP

JSI 的装饰引擎

TOP

推荐EXT
官网 www.extjs.com 中文站 www.ajaxjs.com
基于Ajax的表示层解决方案 JavaScript Ajax框架 UI组件库 -前端开发新境界
特点:
1.基于纯Html/CSS+JS技术,提供丰富的跨浏览器UI组件,灵活采用JSON/XML数据源开发,使得服务端表示层的负荷真正减轻,从而达到客户端的MVC应用!
2. Ext最初以Yahoo!UI库做扩展,名字为YUI-Ext。时至今日,Ext已经扩展到除YUI外,兼容包括在JQuery、Prototype在内的底层库,并不断进一步扩展中。
3.个人、开发商免费使用.基于LGPL的协议为你商业引用EXT扫除版权障碍。(LGPL是Hibernate使用的授权方式) 我们正在中文本地化中(文档、教程),欢迎您参与我们的讨论。

TOP

谢谢这么多的好贴,学习中

TOP

高雅清香的春兰秋桂,不慕求虚荣,不阿谀权贵;芳香出于自然,不是为了博取别人欣赏。

TOP

too many person on this world make too much ~!

ajax and javascript

TOP

推荐的网站不错的`~~~

TOP

这帖撤了吧,本来收集UI组件的,成收集JS LIB的了……

TOP

超级好贴````顶

TOP

TOP

高深的知识,弄不懂

TOP

引用:
原帖由 未注册 于 2007-3-13 13:58 发表
有这么一个现成的网站,里面有不少好东西。

http://www.miniajax.com/
这个不错!
专注设计

TOP

2楼推荐的网站不错的说,谢谢了

TOP

只要好的就可以啊,多多推荐,,

TOP

呵呵,强烈推荐 EXT

网址:extjs.com

你看了后就没有理由不选它了!

TOP