随笔分类 - Web UI
摘要:以前写过一篇文章以jquery为基础的星星评分 ,今天有时间把这个功能重写,并以jQuery插件的形式出现以便以后使用。 首先看一下运行效果如下图所示。 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮。 一、原理本程序的原理是这样的:一个“ul”标签,该标签的背景为灰色的星星,控制“ul”标签的宽度显示星星的数量。例如:一个星星图片的宽度为23px,那么要显示10个星星,则“ul”的宽度为230px就可以显示10个星星。 n个“li”标签,n表示您要显示星星的个数,例如你要显示10个星星那么将有10个“li”标签。那么这10个标签的宽度分别为1个星
阅读全文
摘要:首先,感谢 miqi2214 ,在他的一篇博文中,我发现了《JQuery 制作的选项卡改进版》介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离。在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用。现在,我把代码贴上,与众博友共享这是js脚本Code highlighting produce
阅读全文
摘要:前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且非常友好。我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比:上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~漂亮的消息弹出,支持遮罩效果。这个效果也很酷~ 更多的酷炫功能请看下方功能列表。。。Easy UI的使用也非常地简单:Code highlighting produced by Actipro CodeHighlighter (freewar
阅读全文
摘要:這幾天在用公司網站的版型,多半都是拿Google來作參考,看到Google很多圓邊方塊的效果,都是用CSS做出來的,比我以前還用Table+Image,這一招實在是太好用了,分享給大家。效果如下:CSS:HTML:class說明roundBorder 的作用為群組下面的三個LayerroundBorderLayer1 的作用為左右margin 1px與左右border 1px roundBorde...
阅读全文
摘要:protected void Page_Load(object sender, EventArgs e) { BindImgData(); } //绑定图片新闻 public void BindImgData() { DataTable dt = new DataTable(); dt = BLL.sen.GetImg(10, 6);//注意纳税服务图片ID string img = ""; string text = ""; string link = ""; if (dt == null) { this.imgurl = &quo
阅读全文
摘要:$(document).ready(function() { $('tr').addClass('tra'); $('tr:even').addClass('trb'); $(".del").click(function() { return confirm("是否确定删除?"); });});
阅读全文
摘要:树的一个必不可少的功能就是要支持异步取数据,因为就算构造树的算法再精妙,当数据量大的时候(如人员结构),也会出现性能瓶颈。当然,这也是我这次改动的主旨。演示计算机编程语言C语言C语言程序设计C#语言设计模式数学社会学 前台调用代码如下:Tree.Settings.OnNodeClick=function(node){alert(node[Tree.NodeProperties.Name]);}Tree.Settings.AsyncLoadUrl="GetNodes.ashx";Tree.Settings.Async=true;varoDiv=document.getElem
阅读全文
摘要:在第一篇完成了树的基本展示后,终于有时间接着来完善用户交互部分了。这个版本的代码添加了 1.展开/折叠功能, 2.点击节点时触发相应事件 如下:计算机编程语言C语言C语言程序设计C#语言设计模式数学社会学
阅读全文
摘要:记得才开始接触计算机的时候觉得网络很神奇,输入一个地址就会出来很多很多的东西,后来上大学了,又渐渐的迷上了各种网页特效,觉得这些东西很酷很炫。不过遗憾的是并未认真的研究这些东西,一方面是学校没这方面的课程,更关键的是自己不努力。不过正是由于对这些前台东西的兴趣慢慢的、偶然的带我走进了asp.net的世界。虽然工作和学习中仍旧会和js打交道,但是总是停留在一个很尴尬的阶段,也就只能望复杂js应用而兴叹了。 就拿树来说吧,这应该是一个比较有用的东西了。平时也遇到过一些,但是都交给别人做了,自己一直想仔细研究下也不了了之。这次项目又遇到这样一个应用,这次说什么也要仔细研究下了,经过一天的多的努力(汗
阅读全文
摘要:网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼前一亮。网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的。如下面的例子:Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->注意看上面代码中以“jv“开头的各种属性名,这些都是表单验证插件需要用的属性值
阅读全文
摘要:JMagazine是一个做什么的东西? 现在网络运用越来也丰富,电子杂志是一个很有趣的东西,不过大家看的大部分。基本都是flash的,有不易修改和加载过慢的缺点,JMagazine是一个在JQ下能帮你完成一个图片电子杂志的插件。Current version: beta 0.1.3Compressed filesize: 12,288 bytesAuthor: Ariesjia这是我做的一个小小的试例,用了 jquery ui,以及前面制作的JTooltips ,在博客园上我只是把杂志的大小改的小了一点,demo随后附上操作:1.左键翻页2.右键放大,放大的图片可以用鼠标拖动和滑轮滚动, 在.
阅读全文
摘要:先完成结构层与表现层部分,做一个纯CSS相册,好让JS不能动弹时,相册还能运作。过程见《纯CSS相册》,只不过是在它的基础再做了一些优化,更符合人的思路走向,好让下面JS顺产而已。 123456 javascript图片轮换 by 司徒正美javascript图片轮换 by 司徒正美 123456 运行代码接着下来我们用javascript来修正原来的缺陷和增加一些CSS做不到的能力。主要思路如下:用一个定时不断修改第一个img元素的src属性,实现图片自动播放的功能。取消翻页栏的链接点击时的默认行为,取...
阅读全文
摘要:1. 将彻底屏蔽鼠标右键2. 取消选取、防止复制3. 不准粘贴4. 防止复制5. IE地址栏前换成自己的图标6. 可以在收藏夹中显示出你的图标7. 关闭输入法8. 永远都会带着框架9. 防止被人frame10. 网页将不能被另存为11. 查看网页源代码12.删除时确认13. 取得控件的绝对位置14. 光标是停在文本框文字的最后15. 判断上一页的来源16. 最小化、最大化、关闭窗口17.屏蔽功能键Shift,Alt,Ctrl18. 网页不会被缓存19.怎样让表单没有凹凸感?20.&的区别? 21.让弹出窗口总是在最上面:22.不要滚动条? 23.怎样去掉图片链接点击后,图片周围的虚线?
阅读全文
摘要:Google Map应用在网站之上已经从单一的浏览性慢慢转化为服务概念(同时也大大增强用户体验度)如下利用 Google Map Api ------ 简单实现地图网站应用。(仅参考)实现目标:1.在地图中进行地点标注2.选择标注时,出现相关信息3.点击页面上的测试按钮,显示相关的地点标注信息Html Code: Google Map 前期准备:注册Google Api Key引用Google Api 脚本 在地图中进行地点标注 如果要实现地点标注,首先要准备数据 数据如下: var message = [ ...
阅读全文
摘要:原文地址:http://net.tutsplus.com/articles/web-roundups/10-rare-html-tags-you-really-should-know/ 如今,Web开发工程师在学习和工作中通常都使用了不止一门语言。因此,对一门语言的方方面面我们很难说得上都去了解,要精通一门语言也是相当有难度,比如语言中一些生僻但可能很有用处的关键字用法。 虽然我们以前可能对这些非常少见的HTML标签并不了解或没能完全用好他们,不过亡羊补牢,为时未晚,现在开始了解并能在以后的开发中正确的用上这些以前没用过的标签也不算太晚。 这里我给出了10个最不常见并且常被人误用的HTML标签
阅读全文
摘要:祝愿园子里的朋友圣诞节快乐。本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器简介Javascript富文本编辑器使我们添加、编辑网站中的文章更加方便和容易。这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以像编辑word文档一样,方便地编辑网站中文章,常用于内容管理系统和博客系统等。下面列出了常用的10个富文本编辑器,有最基础的格式富文本编辑器,也有复杂的具有文件上传能、创建表格功能、Ajax支持的富文本编辑器。希望大家喜
阅读全文
摘要:【总结】IE和Firefox的Javascript兼容性总结 长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一、函数和方法差异; 二、样式访问和设置; 三、DOM方法及对象引用; 四、事件处理; 五、其他差异的兼容处理。一、函数和方法差异1. getYear()方法【分析说明】先看一下以下代码:var year= new Date().getYear();document.write(year); 在IE中得...
阅读全文
摘要:gchart是基于google图表API的jquery组件。使用gchart可以方便地生成强大的各种图表和报表。基于google图表接口的gchart,有着简单、方便、强大、够用、好用的特点。《gchart:基于jquery的google图表接口组件全攻略》系列文章将带你走入gchart的报表世界。先解释一下这个拗口的标题google图表APIgoogle图表API是google提供的一个可以生成各种图表的api接口。根据各种您的需求,Google 图表 API 会返回一幅 PNG 格式的图片来响应一个网址。Google 图表 API 可以生成多种类型的图片,包括折线图、条形图和饼图。您可以为
阅读全文
摘要:原文地址:http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-knowjQuery 1.4 最近刚刚发布. 这个版本可不是一个简单的改进,它不仅包含了很多新的特性,还改进了很多功能, 更在性能优化方面下了很大功夫, 本文将对这些新的特性和增强的部分进行讨论,希望能对你有所帮助.首先现在你可以从这里下载最新的1.4的版本了: http://code.jquery.com/jquery-1.4.js1. 传递属性给jQuery1.4之前的版本中jQuer
阅读全文
摘要:选项卡(IE,FF,Opera,Safari,Chrome) 选项卡1 选项卡2 选项卡1 选项卡2 选项卡1 百度 js 选项卡1 选项卡2 http://www.dovapour.com.cn/ 选项卡1 选项卡2 选项卡3 选项卡4 选项卡1 选项卡2 选项卡3 选项卡4http://www.dovapour.com.cn/ 选项卡1 选项卡2 选项卡3 选项卡4 选项卡5 选项卡1 选项卡2 选项卡3 选项卡4 选项卡5 http://www.dovapour.com.cn/%3C/div> 选项卡1 选项卡2 选项卡3 选项卡4 选项卡5 选项卡6 选项卡1 选项...
阅读全文