阅读更多

37顶
5踩

Web前端

原创新闻 表单元素:40个CSS/JS风格和功能技术处理

2008-08-19 15:10 by 副主编 QQbyte 评论(46) 有41878人浏览

 

下面是最常用的40个CSS/JS风格和功能技术处理表单元素,真是收集的很全。

 

1-Styling dropdown select boxes-  修饰下拉列表。

form field


2-<select> Something New, Part 1-  使用一点 DOM scripting 和一些有创意的CSS,你能让下拉列表好看的多。

form field


3-Styling even more form controls- 这是对HTML表单元素的控制,通过CSS能控制checkbox选择的不同显示效果。

form field


4-Check it, don’t select it- 当多选框选择元素太多,让选择项可以滚动的效果。demo代码在这里: here.

form field


5-DropDown - xHTML/CSS/Javascript replacement of classic selectbox- 这是一个替代传统下拉列表的demo。

form field


6-Masked Input Plugin- 这是对jQuery库进行修改后的效果,提供给用户更方便输入和进行验证。代码在 Internet Explorer 6/7, Firefox 1.5/2, Safari, 和 Opera上测试通过.

form field


7-Custom Checkbox with jQuery- 提供定制化的checkbox效果。有 Safari skin 和 default skin两种皮肤供选择。

form field


8-LiveValidation- LiveValidation 是一个小开源 javascript 库,提供客户端输入验证。

form field


9-FancyForm- FancyForm 是一个强大的checkbox替代脚本,在外观和功能方面提供最强的灵活性。

 

form field


10-Styling disabled text inputs-  一个不可输入的文本输入框。查看demo代码: Styling disabled form controls with CSS

form field


11-PrettyCheckboxes- 一个简单的 jQuery 插件 来定制checkbox和radio buttons的外观。

form field


12- Building a better web forms: Context highlighting using jQuery- 当用户输入焦点变化时,输入框效果变化,demo代码在这里:here

form field


13-Control.SelectMultiple  这是下拉列表和checkbox同时使用的例子,很酷。

 

form field


14- Justify elements using jQuery and CSS- 创建一个表单,内部元素需要精确定位对齐,你可以使用jQuery轻松做到这一点.

form field


15-jQuery Form Input Example Plugin- 一个 jQuery 插件,在用户输入焦点进入后提示文字消失,很多网站用这一招。demo代码在这里: here.

form field


16-Jquery-Autotab- 自动tab跳转,也是一个 jQuery 插件。

 

form field


17-jquery-asmselect- 下拉列表的增强版。demo代码这里: here and here.

form field


18-jQuery.AddToList- 一个非常方便定制的jQuery插件,下拉显示更多内容,通过AJAX方式新增内容,如果新增成功,成为下拉菜单的选项之一。很有用的技巧,Demo代码这里: here.

form field


19-Easy Multi Select Transfer with jQuery- 一个jQuery完美的菜单选择例子。

form field


20-fValidator- fValidator 是一个开源免费 javascript 工具,提供简单表单验证。例子在这里: examples .

form field


21-Grow a textarea- 提供重新定义textarea框大小的功能。

 

form field


22-jQuery selectbox replacement-  一个 jQuery 插件,提供更好界面替换HTML下拉列表。demo代码在这里: here.

form field


23-Unobtrusive Slider Control V2- 通过输入值滑动块定位,以及改变颜色等。demo例子在这里: here.

form field


24- jQuery Field Plug-in- jQuery插件,提供强大的form表单控制功能,比如文件上传类型等。

 

form field


25-jquery.combobox- jquery.combobox是一个有用的创建HTML风格combobox工具。 demo代码在这里: here.

 

form field


26-Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements- 这个 JavaScript 和 CSS 提供可定制的图片作为背景给checkbox, radio buttons 和 select lists.

form field


27-ToggleFormText plug-in example- ToggleFormText 是一个 jQuery 插件提供输入框帮助文字显示。

 

form field


28-Password field with strength meter- extjs库,显示密码强度。

 

form field


29-STYLING FILE INPUTS WITH CSS AND THE DOM- 优美的文件输入框设计。

 

form field


30-Pin plugin for Prototype, Remember Field’s Values- prototype 的 Pin 插件提供记录某个输入框值的功能。demo代码: here.

form field


31-accessible, javascript-enhanced, css-able form elements for mootools- 一个mootools javascript-class 客户定制元素,能够通过CSS定制你的 checkboxes 和 radiobuttons 。

form field


32-Resizeable Textboxes- 重定义text输入框的大小。

form field


33-Resizeable Textboxes- 用图片代替按钮,用 JavaScript 和 jQuery写的.  demo 这里:here.

form field


34-jQuery AlphaNumeric- jQuery AlphaNumeric 是一个 javascript控制插件,限制textboxes 或者 textareas输入字符长度。

form field


35-Mootools Form Hints- Mootools/Javascript Form 提供输入框在线帮助。

 

form field


36-MultiSelect- 下拉选择框+checkbox效果。例子在这里: here.

form field


37- Watermark Input Plugin- 这是一个jQuery插件,显示附加信息的输入框。

form field


38-Select box manipulation

form field


39-Spinner Control 

form field


40-Autohelp

form field


 

 

来自: noupe.com
37
5
评论 共 46 条 请登录后发表评论
26 楼 Jekey 2008-08-21 12:20
很好的资源,谢谢!
25 楼 bengan 2008-08-21 09:10
刚好要用到~~谢谢了!
24 楼 rikugun 2008-08-21 08:57
非常详细,谢谢楼主了
23 楼 JlN 2008-08-20 22:55
不错,收藏了
22 楼 isky 2008-08-20 20:09
不错  怎么没有看到tree?
21 楼 Czero 2008-08-20 18:08

留下脚印,回去参考参考
20 楼 magic650 2008-08-20 16:35
很炫
19 楼 mikehuhu 2008-08-20 16:02
好贴~~~
18 楼 xjchome 2008-08-20 15:39
好东西不错啊
17 楼 jkfzero 2008-08-20 14:03
收下了,好东西。
16 楼 devis 2008-08-20 12:55
翻译过来就说翻译过来的嘛
15 楼 skymouse 2008-08-20 12:53
不错
喜欢得留下了脚印
14 楼 hellas 2008-08-20 12:48
好贴留名1
13 楼 InnocentBoy 2008-08-20 12:26
真的很不错!
12 楼 zengxianhong 2008-08-20 12:20
很实用,收下了
11 楼 liyanboss 2008-08-20 10:27
pretty cool
10 楼 fornever 2008-08-20 10:07
很不错,辛苦了!
9 楼 laiseeme 2008-08-20 09:37
bucuo shoucangle
8 楼 srdrm 2008-08-20 09:24
整个就是一jquery插件介绍[b][/b]
7 楼 flyfan 2008-08-20 09:15
看起来真不错的样子

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • C#中使用WinGraphviz实现dot脚本语言绘图

    C#中使用WinGraphviz实现dot脚本语言绘图,有具体的Demo,一个是老版本的,我重新修改了一下,在vs2013中可以正常使用。

  • 2D图形引擎Cairo例子

    【代码】2D图形引擎Cairo例子。

  • 绘图板 c# winform 源码

    绘图板 c# winform 源码。

  • C# 绘图基本方法

    绘图方法

  • C#绘图程序(画图)

    c#写的GDI+的应用小程序,实现了画圆,矩形等基本功能。可以实现线条粗细控制,颜色等。但只能画完图后,才可以看到所画图形。可以自行完善

  • Asphyre Pro 1.1.0

    和Asphyre一样,不过支持D3D

  • 浅析C#中图形编程

    像Java一样,C#提供了一整套相当丰富的类库、方法以及事件以供开发者使用。C#还引入了GDI+,它是由GDI演变而来的,具有比GDI更强大的功能而且简化了程序员的编程工作。所以开发者运用这些,就可以很方便的开发出具有强大图形图像功能的应用程序了。本文,笔者就通过一些实例像读者介绍一下C#中的图形编程的基本知识。   简单实例:   首先,让我们从例子开始,以下是一个最简单的实例:

  • .NET绘图的相关注意事项,常见问题

    关于在透明的bitmap里面绘制文字,会产生黑边、导出的图片不能被pr、ae等软件识别、picturebox实时刷新、.net动画,我想替换原来的图片,但是图片被占用

  • GLGameEngine:一个非常基本的C#游戏引擎,它尽可能接近OpenGL(OpenTK),从而具有最大的自由度

    GLGameEngine:一个非常基本的C#游戏引擎,它尽可能接近OpenGL(OpenTK),从而具有最大的自由度

  • c#使用GDI+简单绘图

    private void button2_Click(object sender, EventArgs e) { Bitmap image = new Bitmap(200, 200); Graphics g = Graphics.FromImage(image); //使绘图...

  • 图形引擎--介绍

    图形引擎--介绍1 简介1.1 概念1.2 应用领域1.2 重要性2 细分介绍Unity引擎(王者荣耀)Cocos引擎(消消乐)OGRE:Object-Oriented Graphics Rendering EngineOSG:Open Scence GraphIrrlichtAxiomRealmForgeUnreal知识点游戏引擎参考 1 简介 1.1 概念 引擎,是借用机器工业的同名术语,表明在整个系统中的核心地位。也可以称之为“支持应用的底层函数库”或者说是对特定应用的一种抽象。 目前图形引擎中比较出

  • 图像滤镜艺术---ZPhotoEngine超级算法库

    本人分享一个算法库ZPhotoEngine,模拟实现了PS的大部分算法以及Instagram/Camera360/美图秀秀等大部分滤镜特效,跟大家分享一下!

  • C#版Instagram-Toaster滤镜Demo

    一个用C#实现的Instagram中Toaster滤镜的Demo,同时包括Photoshop实现的文件,喜欢Instagram滤镜的同学,想弄明白滤镜如何编码的,或者PS如何实现的,可以看一下,下载免费!共勉!

  • ZPhotoEngine算法库

    实现了PS中大部分的算法效果,Instagram、美图秀秀、美颜相机、Camera360大部分的滤镜特效

  • NET框架下使用双缓冲技术绘图

    NET框架下使用双缓冲技术绘图 2006-9-28 | 来源:天极yesky    作者:窦瑞欣   本文主要介绍 .Net 框架的基本绘图技术。通过简要的介绍和示例程序来探讨绘图技术的优势、劣势以及其它相关注意事项。  简介  幸运的是当编写一个典型的Windows 窗体程序时,窗体和控件的绘制、效果等操作是不需要特别加以考虑的。这是为什么呢?因为通过使用 .Net 框架,开发人员可以拖动一系列

  • c#开源的图像编辑代码

    这是一个集多个功能为一体的c#开源代码,实现的功能有“图片的左右旋转、图片的翻转、图片的适应窗宽、图片的适应窗高、图片的放大和图片的缩小”等功能。

  • ZPhotoEngine图像算法引擎V2.0

    2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

Global site tag (gtag.js) - Google Analytics