有很多 jQuery 的表单插件。这里收集了其中15个是最有用的插件。 ALAJAX (Ajaxify your HTML form) 该插件可轻松将你的表单变成 Ajax 方式处理，阻止了提交动作，然后通过 Ajax 方式提交。 jQuery File Upload (AJAX Upload with progress and more) Niceforms 这是一个让表单变得好看的 jQuery 插件 Fancy AJAX Contact Form meioMask (Input field mask plugin) 编辑框的输入模式限制插件 Elastic (expanding textarea) jQuery Elastic 是一个用来根据Textarea文本编辑框输入的数据自动改变输入框大小的jQuery插件。 Live Form Validation Custom Select Box (options with images) 为下拉列表增加图标显示 Pretty Checkbox 美化复选框 jQuery UI Datepicker Complexify (password strength) jQuery Form Field Validation A cool form validation with tooltips. Ketchup (form validation plugin) 带工具提示的表单验证 Valid8 Simple and cool validation plugin. jQuery qTip (tooltip plugin)
View Details这次分享的一些网页特效都是完全基于jQuery的，而且相信大部分插件都可以帮助WEB前端开发者简化很多开发工作，比如菜单、图片播放等实用功能。这里我向大家展示了这些插件的在线演示，同时也提供源代码的下载，方便各位同学研究。 1、jQuery环形动画菜单 这是一款少有的jQuery菜单，很显然，环形动画是它最大的亮点，很有创意哦。 在线演示 / 源码下载 2、jQuery动画下拉菜单 这里有4个不同主题的下拉菜单，十分清爽漂亮。 在线演示 / 源码下载 3、带小图标的jQuery多级菜单导航 这是一款带有功能图标的多级菜单，用jQuery实现。 在线演示 / 源码下载 4、jQuery带缩略图的图片播放插件 这是一款基于jQuery的图片播放插件，带缩略图，而且用起来也方便。 在线演示 / 源码下载 5、古典卡带播放器 这是jQuery结合HTML5实现的古典卡带播放器，很经典。 在线演示 / 源码下载 6、jQuery实现的Lava-Lamp样式的动画菜单 基于jQuery的滑动动画菜单，仿Flash。 在线演示 / 源码下载 7、minimal tab 这是一款基于jQuery的tab菜单插件，google play风格的 在线演示 / 源码下载 以上就是7个令人难忘的jQuery实用教程，希望大家喜欢，收藏起来吧。 转自：http://www.oschina.net/news/35429/7-jquery-tutorials
View Details最近微软已经正式发布了windows 8操作系统，window操作系统的风格已经完全改变成了瓦片状的Metro UI。 对于微软来说这是一个巨大的改变，而且所有微软的平台包括，桌面，平板，移动及其网站都使用这个UI风格。 Metro UI包含了所有的现代web设计的特点，包括了，简化，基于网格的界面，并且富有连续性。 大家如果有兴趣可以看看这个界面设计说明 （http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx）。 如果你也喜欢Metro风格的话，这里我们收集了很多windows 8的Metro UI风格布局资源，希望大家喜欢！ Metro风格的网站框架和模板 Metro UI CSS Metro UI CSS是一个非常完整的创建Metro风格的网站的框架。使用LESS创建，并且拥有网格系统，排版样式，表格，按钮和图片。 同时也拥有内建的javascript组件，帮助你生成片状，菜单，边栏，进度条，提示等等 etro UI CSS BootMetro BootMetro是一个Twitter Bootstrap的Metro风格主题。你可以创建Metro风格的样式。例如，片状UI，工具栏，其它组件。 metro-bootstrap 类似上面的BootMetro，这是另外一个Twitter Bootstrap主题，拥有所有的漂亮组件，并且包含了LESS。 Metro UI Template 这是一个网站的框架和模板，用来创建windows 8 Metro UI风格的界面。拥有平滑的过渡效果和tiles（包括，RSS，Twitter，weather等等） 这个模板支持模板并且拥有jQuery UI主题。 Droptiles – Metro-Style Web Dashboard 一个开源的windows 8开始界面dashboard（类似igoogle)。 使用tiles来展示信息，每一个tiles是独立的应用可以用来获取数据。这个项目基于ASP.NET可以移植到其它语言。 PHP Image Gallery In Metro UI 一个PHP的图片画廊可以自动生成缩略图，并且可以使用lightbox来显示图片。支持HTML5和CSS3。 Motown 一个用来创建Metro风格应用的类库，使用很少代码即可实现。不依赖其它javascript类库。 Metro风格jQuery插件资源 jq-metro 一个jQuery插件用来创建Metro风格的界面。目前，panorama，privot，进度条，列表选择，切换，按钮等。 Metro JS 这个jQuery Metro UI插件可以用来创建tiles，应用条，并且支持主题。功能和设计完全可定制。 jQuery Metro UI Plugin 这个插件可以简单的创建tiles视图并且支持聚焦。 jQuery Mobile Metro Theme 一个免费jQuery移动Metro UI主题，完全支持自定义。使用不同插件来处理应用栏，进度条，按钮和日期选择器。 Metro UI Theme Builder For jQuery UI 拥有themeroller风格的jQuery UI主题创建，帮助你创建Metro UI风格样式 TileJS (non-jQuery) 一个标准的javascript代码来创建tiles并且拥有完整tiles的onclick效果。 免费Metro UI图标 Modern UI Icons 一套简单手绘的Metro […]
View Details|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> function QqClose() { window.opener = null; window.open('', '_top'); window.top.close(); window.close(); } </script> <a href="javascript:window.close();void(0);">正常关闭</a> <a href="javascript:QqClose();void(0);">QQ关闭</a> </body> </html> |
View Details
JS中操作table的方法 var myTable = document.getElementById("myTable "); //添加行 var newTR = myTable.insertRow(index); 该方法创建一个新的 TableRow 对象表示一个新的 <tr> 标记，并把它插入表中的指定位置。 新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。 如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。 //设置行的id和class属性 newTR.id = "myid"; newTR.className="MainContentText"; //添加列:序号 var newTD=newTR.insertCell(0); //添加列内容 newTD.innerHTML = "dfdsf"; //删除表所有行，只留标题行 var rows = myTable.rows.length; for(var i=0;i<rows-1;i++){ myTable.deleteRow();//不给参数，代表删除最后一行 } JS本身不支持方法重载 Js中实现方法重载的方式也知道了呵呵（会默认调用参数最多的那个方法） 转自：http://www.cnblogs.com/judy/archive/2010/06/05/1752230.html
View Details第一步样式表中定义一个@face样式 @font-face {font-family: 'weiruanyahei';src: url('7000.eot');src: local('weiruanyahei Regular'), local('weiruanyahei'), url('7000.ttf') format('truetype'),url('7000.woff') format('woff');} font-family: 'weiruanyahei';这个 “weiruanyahei”是自己起的名字什么都行。。。 第二步 在服务器上安装这个特殊字体 第三步 下载字体的ttf格式转换成需要的woff，eot，svg等格式字体 这个是要做到多个浏览器都支持的效果 转换步骤 我用的一个网站转换的 挺好用的 网址 http://onlinefontconverter.com/ 注册一下 上传ttf字体 然后选择需要的格式就会转换了 下载下来就好了 第四步 把转换好的格式 分别上传到 服务器的网站文件中。。css中7000.woff就是那个字体的路径及名称 我的是在同级目录下所以就直接写7000.woff了。 第五步 #poem{font-size:45px;font-family:weiruanyahei;text-align:center;} 样式中定义font-family:weiruanyahei; 是你起的名字 然后再应用的地方应用就好了。。。。。。 大功告成哦 转自：http://hi.baidu.com/ionly0801/item/6f3aa7ea7c296b3e86d9deae
View DetailsdecodeURI()函数： 定义和用法:decodeURI()函数可对encodeURI()函数编码过的URI进行解码.语法:decodeURI(URIstring)参数描述:URIstring必需,一个字符串,含有要解码的URI组或其他要解码的文本.返回值:URIstring的副本,其中的十六进制转义序列将被它们表示的字符替换. decodeURIComponent()函数： 定义和用法:decodeURIComponent()函数可对encodeURIComponent()函数编码过的URI进行解码.语法:decodeURIComponent(URIstring)参数描述:URIstring必需,一个字符串,含有解码的URI组件或其他要解码的文本.返回值:URIstring的副本,其中的十六进制转义序列将被它们表示的字符替换.
|
1 |
<p> </p><p><span class="tag"><html></span><br /><span class="pln"> </span><span class="tag"><body></span><br /><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test </span><span class="pun">=</span><span class="pln"> </span><span class="str">"</span><a href="http://www.test.com/My" rel="nofollow"><span class="str">http://www.test.com/My</span></a><span class="str"> test/"</span><span class="pun">; </span><span class="pln"> </span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test1 </span><span class="pun">=</span><span class="pln"> encodeURI</span><span class="pun">(</span><span class="pln">test</span><span class="pun">);</span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test2 </span><span class="pun">=</span><span class="pln"> decodeURI</span><span class="pun">(</span><span class="pln">test1</span><span class="pun">);</span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test3 </span><span class="pun">=</span><span class="pln"> encodeURIComponent</span><span class="pun">(</span><span class="pln">test</span><span class="pun">);</span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test4 </span><span class="pun">=</span><span class="pln"> decodeURIComponent</span><span class="pun">(</span><span class="pln">test3</span><span class="pun">);</span></p><br /><p><span class="pln"> document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="pln">test1 </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<br />"</span><span class="pun">);</span><br /><span class="pln"> document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="pln">test2 </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<br />"</span><span class="pun">);</span><br /><span class="pln"> document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="pln">test3 </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<br />"</span><span class="pun">);</span><br /><span class="pln"> document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="pln">test4 </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<br />"</span><span class="pun">);</span><br /><span class="pln"> </span><span class="tag"></script></span><br /><span class="pln"> </span><span class="tag"></body></span><br /><span class="tag"></html></span></p><p> </p> |
运行结果： http://www.test.com/My%20test/ http://www.test.com/My test/ http%3A%2F%2Fwww.test.com%2FMy%20test%2Fhttp://www.test.com/My test/
View Details定义和用法 decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。 语法
|
1 |
decodeURI(URIstring) |
参数 描述 URIstring 必需。一个字符串，含有要解码的 URI 或其他要解码的文本。 返回值 URIstring 的副本，其中的十六进制转义序列将被它们表示的字符替换。 实例 在本例中，我们将使用 decodeURI() 对一个编码后的 URI 进行解码：
|
1 |
<script type="text/javascript">var test1="http://www.w3school.com.cn/My first/"document.write(<code style="font-family: 'Courier New', monospace; color: rgb(0, 0, 255); ">encodeURI(test1)</code>+ "<br />")document.write(<code style="font-family: 'Courier New', monospace; color: rgb(0, 0, 255); ">decodeURI(test1)</code>)</script> |
输出：
|
1 |
http://www.w3school.com.cn/My%20first/http://www.w3school.com.cn/My first/ |
Date (对象) Date 对象能够使你获得相对于国际标准时间（格林威治标准时间，现在被称为 UTC-Universal Coordinated Time）或者是 Flash 播放器正运行的操作系统的时间和日期。要使用Date对象的方法，你就必须先创建一个Date对象的实体（Instance）。 Date 对象必须使用 Flash 5 或以后版本的播放器。 Date 对象的方法并不是静态的，但是在使用时却可以应用于所指定的单独实体。 Date 对象的方法简介： ·getDate ｜ 根据本地时间获取当前日期(本月的几号)·getDay ｜ 根据本地时间获取今天是星期几(0-Sunday,1-Monday…)·getFullYear ｜ 根据本地时间获取当前年份(四位数字) ·getHours ｜ 根据本地时间获取当前小时数(24小时制,0-23)·getMilliseconds ｜ 根据本地时间获取当前毫秒数·getMinutes ｜ 根据本地时间获取当前分钟数·getMonth ｜ 根据本地时间获取当前月份(注意从0开始:0-Jan,1-Feb…)·getSeconds ｜ 根据本地时间获取当前秒数·getTime ｜ 获取UTC格式的从1970.1.1 0:00以来的毫秒数·getTimezoneOffset ｜ 获取当前时间和UTC格式的偏移值(以分钟为单位)·getUTCDate ｜ 获取UTC格式的当前日期(本月的几号)·getUTCDay ｜ 获取UTC格式的今天是星期几(0-Sunday,1-Monday…)·getUTCFullYear ｜ 获取UTC格式的当前年份(四位数字)·getUTCHours ｜ 获取UTC格式的当前小时数(24小时制,0-23)·getUTCMilliseconds ｜ 获取UTC格式的当前毫秒数·getUTCMinutes ｜ 获取UTC格式的当前分钟数·getUTCMonth ｜ 获取UTC格式的当前月份(注意从0开始:0-Jan,1-Feb…)·getUTCSeconds ｜ 获取UTC格式的当前秒数·getYear ｜ 根据本地时间获取当前缩写年份(当前年份减去1900)·setDate ｜ 设置当前日期(本月的几号)·setFullYear ｜ 设置当前年份(四位数字)·setHours ｜ 设置当前小时数(24小时制,0-23)·setMilliseconds ｜ 设置当前毫秒数·setMinutes ｜ 设置当前分钟数·setMonth ｜ 设置当前月份(注意从0开始:0-Jan,1-Feb…)·setSeconds ｜ 设置当前秒数·setTime ｜ 设置UTC格式的从1970.1.1 0:00以来的毫秒数·setUTCDate ｜ 设置UTC格式的当前日期(本月的几号)·setUTCFullYear ｜ 设置UTC格式的当前年份(四位数字)·setUTCHours ｜ 设置UTC格式的当前小时数(24小时制,0-23)·setUTCMilliseconds ｜ 设置UTC格式的当前毫秒数·setUTCMinutes ｜ 设置UTC格式的当前分钟数·setUTCMonth ｜ 设置UTC格式的当前月份(注意从0开始:0-Jan,1-Feb…)·setUTCSeconds ｜ 设置UTC格式的当前秒数·setYear ｜ 设置当前缩写年份(当前年份减去1900)·toString ｜ 将日期时间值转换成"日期/时间"形式的字符串值·Date.UTC ｜ 返回指定的UTC格式日期时间的固定时间值 创建新的 Date 对象 语法：new Date();new Date(year [, month [, date [, hour [, minute [, second [, millisecond ]]]]]] );参数：year 是一个 0 到 99 之间的整数，对应于 1900 到 1999 年，或者为四位数字指定确定的年份；month 是一个 0 (一月) 到 11 (十二月) 之间的整数，这个参数是可选的；date 是一个 1 到 31 之间的整数，这个参数是可选的；hour 是一个 0 (0:00am) 到 23 (11:00pm) 之间的整数，这个参数是可选的； minute 是一个 […]
View DetailsJQuery官方的Datepicker控件，可以很方便的使用，可以让用户很方便的在输入框上选择时间。 废话少说，先上实例 【代码】 <script> $(function() { $( "#datepicker" ).datepicker(); });</script> <p>Date: <input type="text" id="datepicker"></p> 【效果图】 下面介绍一下具体用法： 一、需要加载的js文件 (1)jquery.js (2)jquery.ui.core.js (3)jquery.ui.widget.js (4)jquery.ui.datepicker.js 二、html代码 需要一个用来加载datepicker控件的输入框 <input id = "date" type="text"/> 三、js代码 初始化函数：$(.selecter).datepicker() 【参数】 因为参数较多，把所有参数根据功能分成几组进行阐述 1、动画 duration 'normal' 设置日期控件展开动画的显示时间，可选是 "slow", "normal", "fast"，"代表立刻，数字代表毫秒数。 showAnim 'show' 设置显示、隐藏日期插件的动画的名称。 showOptions {} 如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。 2、图片按钮 buttonImage "" 设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。 buttonImageOnly false 是否把按钮安全显示成图片的样子 buttonText "…" 设置触发按钮的文本内容。 showOn 'focus' 设置什么事件触发显示日期插件的面板，可选值： focus, button, both(当为focus时，不显示图片按钮) 3、选中之后时间格式 dateFormat mm/dd/yy 设置日期字符串的显示格式。 dayNames ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。 dayNamesMin ['Su', 'Mo', 'Tu', […]
View Details