CSS3 tooltips 浮动显示提示说明

[ 作者:笑傲江湖 发布于:2012年-5月-12日 15:24 星期六  分类:百 宝 箱 ]

  这个tooltips,一般是用在按钮、图标或者其他网页元素上,用来详细说明按钮或者图标用途什么的,或者其他什么附加内容需要给用户提示的。有了它,对浏览网页的用户来说无疑是更方便了,不过这个tips的样式是纯粹由CSS3打造,所以,IE6这样的老古董估计看起来会有所不同,同时,因为IE6不支持hover这个属性,所以还要借助jQuery来搞定。
  具体的HTML和CSS代码,请查看下面帧页面的源代码。鼠标移动到带下划线的文字上就能看见Tips了^_^


CSS3 ordered list styles 有序列表样式

[ 作者:笑傲江湖 发布于:2012年-5月-10日 13:27 星期四  分类:百 宝 箱 ]

  平常无序列表用的机会多点,也就是ul,偶然瞅见这个有序列表ol的样式,挺不错,不过是用CSS3定义的样式,IE6-8浏览的话就没那么好看了,不过也还好,就是圆角圆环什么的看不到,清一色的方块。这玩意用在排行榜还是相当不错的^_^
  具体的HTML和CSS代码我就不贴了,自己查看一下下面帧页面的源代码就一清二楚了。


jQuery plugin : jNiceIt 自定义样式 Form 及相关元素

[ 作者:笑傲江湖 发布于:2012年-5月-2日 18:19 星期三  分类:百 宝 箱 ]

  Form 相关元素有Button、Input、Checkbox、Radiobutton、FileUploadInput、Select、List、TextArea。这个jQuery的插件jNiceIt可以让你完全控制你的Form及其相关元素的样式,具体样式就看你能设计成什么样子了。所有样式都通过CSS样式表来定义和控制,同时,本插件支持Fixed和Fluid两种页面流。jNiceIt 自定义样式 Form 及相关元素

jQuery_Plugin_jNiceIt.rar
62.81KB


jQuery plugin : Selectyze 自定义样式的 Select 下拉选择框

[ 作者:笑傲江湖 发布于:2012年-4月-30日 13:23 星期一  分类:百 宝 箱 ]

Selectyze : SKIN YOUR OWN SELECT LISTS WITH JQUERY & CSS
  折腾网页的筒子们,基本都知道表单里有几个顽固分子,Select下拉选择框、Radio单选按钮、Checkbox复选框,这三个东东无法用样式表来直接定义它们的样式,比如下拉框弹出列表的高度,下拉框的皮肤,单选按钮和复选框的皮肤。现在可以通过jQuery再加上CSS来美化他们了。本文仅仅介绍的是美化Select下拉选择框,Radio和Checkbox也有相关的jQuery插件可以搞定,且听下回分解。 jQuery plugin : Selectyze 自定义样式的 Select 下拉选择框

jQuery_Selectyze_v1.1.rar
47.25KB


jQuery : Write less , Do more 初步学习

[ 作者:笑傲江湖 发布于:2012年-4月-15日 15:08 星期日  分类:百 宝 箱 ]

  jQuery 早就用到了,基本折腾网站的人应该都有所了解,很多网页上的特效都和它有关。只是之前都是用别人现成的东西,拿来自己配置换换样式而已,没有认真的去研究学习一下。前阵子做项目,个别搞不定的地方,可用jQuery搞定,于是乎又勾起了俺的好奇心,研究一下jQuery到底是个啥,能干什么。于是乎官网去瞅瞅,然后Google一些中文的资料和教程,花了几天时间从头到尾彻底的了解了个大概。本身俺是对编程写代码有恐惧的,什么变量,运算,条件,循环,事件,方法,属性,不出半小时俺就被它们弄奔溃了。所以这次是硬着头皮啃完,也仅仅是想在自己需要的时候,能知道怎么用jQuery来解决一些小问题。想一下子吃成胖子那是不现实的,只能慢慢积累了,下面就是俺啃完之后的一点小小的总结。 jQuery : Write less , Do more 初步学习


免费的WEB Mp3 player:jPlayer

[ 作者:笑傲江湖 发布于:2011年-1月-31日 6:41 星期一  分类:百 宝 箱 ]

  俺的博客左侧的在线Mp3播放器已经用了有段日子了,好像是从2005年的时候就开始用了,Flash的,通过XML文件加载歌曲列表,但是不支持中文歌曲名称,一直想换掉,没抽出空,这几天Google了一阵子,之前这个版本的播放器官网有新版本,下了一个演示版,功能多了不少,歌曲列表也支持中文了,可是变成收费的了。穷人啊,只能继续Google了,找了几款,基本都是收费的,免费版本有功能限制,有的甚至加了商业链接,当然,这也无可厚非。没办法,继续寻找,没想到还找到了,即免费,又开源的一个jPlayer,基于jQuery,加之HTML+CSS控制其样式,总体感觉非常棒,因为可以自己定制样式,我不会编程,所以功能方面的定制就算鸟。于是花了点时间,把播放器的宽度和按钮什么的,能调整的我都调整了,调整到我看着比较舒服,和博客比较搭调的外观,基本没啥问题了,再就是把以前的歌曲里表还得从新弄好,就彻底完工了。
  不过,这个jPlayer不是单纯的Mp3播放器哦,在线视频也是可以播放的,暂时不需要视频播放功能,所以就没仔细研究,有需要的同学可以去官方网站详细了解一下。
官方网站:http://www.jplayer.org/
What is jPlayer?
jPlayer is a jQuery plugin that allows you to:
·play and control media files in your webpage
·create and style a media player using just HTML and CSS
·add audio and video to your jQuery projects
·support more devices using HTML5
·support older browsers using a Flash Fallback
·control media on your website using a JavaScript API
jPlayer supports:
·HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm*
·Flash: mp3, m4a (AAC), m4v (H.264)
 * Optional counterpart formats to increase HTML5 x-browser support.
jPlayer works on the latest browsers and the Internet Explorer legacy:
·Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9 beta
·OSX: Firefox, Chrome, Opera, Safari
·iOS: Mobile Safari: iPad, iPhone, iPod Touch
·Android: We require a device for testing
jPlayer works with jQuery 1.3.2+

About jPlayer
Developed by Happyworm, jPlayer is Free, Open Source and dual licensed under the MIT and GPL licenses.
One of Mark Boas's many ideas, it has been made real by Mark Panaghiston.
Silvia Benvenuti helped with the HTML, CSS and all the pretty graphics.
Happyworm is a small web agency that focuses on innovation.
[Edit on 2011-1-30 22:54:58 By 笑傲江湖]