About
jQuery Response Slider is a respnse design jQuery slider plugin, have some features and extensibilities. view at github
Demo
服务器端
用php获取 http://m.weather.com.cn/data/101010100.html 的json数据并以jsonp格式返回给前端
<?php
$id = $_GET['id'];//前端提交id, 如 101010100，参见城市代码
$cb = $_GET['callback']; //前端提交 callback function name,据此构造返回 function
$jp = 'http://m.weather.com.cn/data/'. $id .'.html'; //url
$contents = file_get_contents($jp); //获取json
echo $cb. '(' .$contents . ')'; //返回
?>
参考 http://sae.sina.com.cn/?m=devcenter&catId=211，部署到SAE
前端
/**
* jweather.js for jweather demo
* by ZHAO Xudong,zxdong@gmail.com
*/
$(function($) {
//temp, create a place array
var x = '北京:101010100朝阳:101010300顺义:101010400怀柔:101010500通州:101010600昌平:101010700延庆:101010800丰台:101010900石景山:101011000大兴:101011100房山:101011200密云:101011300门头沟:101011400平谷:101011500八达岭:101011600佛爷顶:101011700汤河口:101011800密云上甸子:101011900斋堂:101012000霞云岭:101012100北京城区:101012200海淀:101010200天津:101030100宝坻:101030300东丽:101030400西青:101030500北辰:101030600蓟县:101031400汉沽:101030800静海:101030900津南:101031000塘沽:101031100大港:101031200武清:101030200宁河:101030700上海:101020100宝山:101020300嘉定:101020500南汇:101020600浦东:101021300青浦:101020800松江:101020900奉贤:101021000崇明:101021100徐家汇:101021200闵行:101020200金山:101020700石家庄:101090101张家口:101090301承德:101090402唐山:101090501秦皇岛:101091101沧州:101090701衡水:101090801邢台:101090901邯郸:101091001保定:101090201廊坊:101090601郑州:101180101新乡:101180301许昌:101180401平顶山:101180501信阳:101180601南阳:101180701开封:101180801洛阳:101180901商丘:101181001焦作:101181101鹤壁:101181201濮阳:101181301周口:101181401漯河:101181501驻马店:101181601三门峡:101181701济源:101181801安阳:101180201合肥:101220101芜湖:101220301淮南:101220401马鞍山:101220501安庆:101220601宿州:101220701阜阳:101220801亳州:101220901黄山:101221001滁州:101221101淮北:101221201铜陵:101221301宣城:101221401六安:101221501巢湖:101221601池州:101221701蚌埠:101220201杭州:101210101舟山:101211101湖州:101210201嘉兴:101210301金华:101210901绍兴:101210501台州:101210601温州:101210701丽水:101210801衢州:101211001宁波:101210401重庆:101040100合川:101040300南川:101040400江津:101040500万盛:101040600渝北:101040700北碚:101040800巴南:101040900长寿:101041000黔江:101041100万州天城:101041200万州龙宝:101041300涪陵:101041400开县:101041500城口:101041600云阳:101041700巫溪:101041800奉节:101041900巫山:101042000潼南:101042100垫江:101042200梁平:101042300忠县:101042400石柱:101042500大足:101042600荣昌:101042700铜梁:101042800璧山:101042900丰都:101043000武隆:101043100彭水:101043200綦江:101043300酉阳:101043400秀山:101043600沙坪坝:101043700永川:101040200福州:101230101泉州:101230501漳州:101230601龙岩:101230701晋江:101230509南平:101230901厦门:101230201宁德:101230301莆田:101230401三明:101230801兰州:101160101平凉:101160301庆阳:101160401武威:101160501金昌:101160601嘉峪关:101161401酒泉:101160801天水:101160901武都:101161001临夏:101161101合作:101161201白银:101161301定西:101160201张掖:101160701广州:101280101惠州:101280301梅州:101280401汕头:101280501深圳:101280601珠海:101280701佛山:101280800肇庆:101280901湛江:101281001江门:101281101河源:101281201清远:101281301云浮:101281401潮州:101281501东莞:101281601中山:101281701阳江:101281801揭阳:101281901茂名:101282001汕尾:101282101韶关:101280201南宁:101300101柳州:101300301来宾:101300401桂林:101300501梧州:101300601防城港:101301401贵港:101300801玉林:101300901百色:101301001钦州:101301101河池:101301201北海:101301301崇左:101300201贺州:101300701贵阳:101260101安顺:101260301都匀:101260401兴义:101260906铜仁:101260601毕节:101260701六盘水:101260801遵义:101260201凯里:101260501昆明:101290101红河:101290301文山:101290601玉溪:101290701楚雄:101290801普洱:101290901昭通:101291001临沧:101291101怒江:101291201香格里拉:101291301丽江:101291401德宏:101291501景洪:101291601大理:101290201曲靖:101290401保山:101290501呼和浩特:101080101乌海:101080301集宁:101080401通辽:101080501阿拉善左旗:101081201鄂尔多斯:101080701临河:101080801锡林浩特:101080901呼伦贝尔:101081000乌兰浩特:101081101包头:101080201赤峰:101080601南昌:101240101上饶:101240301抚州:101240401宜春:101240501鹰潭:101241101赣州:101240701景德镇:101240801萍乡:101240901新余:101241001九江:101240201吉安:101240601武汉:101200101黄冈:101200501荆州:101200801宜昌:101200901恩施:101201001十堰:101201101神农架:101201201随州:101201301荆门:101201401天门:101201501仙桃:101201601潜江:101201701襄樊:101200201鄂州:101200301孝感:101200401黄石:101200601咸宁:101200701成都:101270101自贡:101270301绵阳:101270401南充:101270501达州:101270601遂宁:101270701广安:101270801巴中:101270901泸州:101271001宜宾:101271101内江:101271201资阳:101271301乐山:101271401眉山:101271501凉山:101271601雅安:101271701甘孜:101271801阿坝:101271901德阳:101272001广元:101272101攀枝花:101270201银川:101170101中卫:101170501固原:101170401石嘴山:101170201吴忠:101170301西宁:101150101黄南:101150301海北:101150801果洛:101150501玉树:101150601海西:101150701海东:101150201海南:101150401济南:101120101潍坊:101120601临沂:101120901菏泽:101121001滨州:101121101东营:101121201威海:101121301枣庄:101121401日照:101121501莱芜:101121601聊城:101121701青岛:101120201淄博:101120301德州:101120401烟台:101120501济宁:101120701泰安:101120801西安:101110101延安:101110300榆林:101110401铜川:101111001商洛:101110601安康:101110701汉中:101110801宝鸡:101110901咸阳:101110200渭南:101110501太原:101100101临汾:101100701运城:101100801朔州:101100901忻州:101101001长治:101100501大同:101100201阳泉:101100301晋中:101100401晋城:101100601吕梁:101101100乌鲁木齐:101130101石河子:101130301昌吉:101130401吐鲁番:101130501库尔勒:101130601阿拉尔:101130701阿克苏:101130801喀什:101130901伊宁:101131001塔城:101131101哈密:101131201和田:101131301阿勒泰:101131401阿图什:101131501博乐:101131601克拉玛依:101130201拉萨:101140101山南:101140301阿里:101140701昌都:101140501那曲:101140601日喀则:101140201林芝:101140401台北县:101340101高雄:101340201台中:101340401海口:101310101三亚:101310201东方:101310202临高:101310203澄迈:101310204儋州:101310205昌江:101310206白沙:101310207琼中:101310208定安:101310209屯昌:101310210琼海:101310211文昌:101310212保亭:101310214万宁:101310215陵水:101310216西沙:101310217南沙岛:101310220乐东:101310221五指山:101310222琼山:101310102长沙:101250101株洲:101250301衡阳:101250401郴州:101250501常德:101250601益阳:101250700娄底:101250801邵阳:101250901岳阳:101251001张家界:101251101怀化:101251201黔阳:101251301永州:101251401吉首:101251501湘潭:101250201南京:101190101镇江:101190301苏州:101190401南通:101190501扬州:101190601宿迁:101191301徐州:101190801淮安:101190901连云港:101191001常州:101191101泰州:101191201无锡:101190201盐城:101190701哈尔滨:101050101牡丹江:101050301佳木斯:101050401绥化:101050501黑河:101050601双鸭山:101051301伊春:101050801大庆:101050901七台河:101051002鸡西:101051101鹤岗:101051201齐齐哈尔:101050201大兴安岭:101050701长春:101060101延吉:101060301四平:101060401白山:101060901白城:101060601辽源:101060701松原:101060801吉林:101060201通化:101060501沈阳:101070101鞍山:101070301抚顺:101070401本溪:101070501丹东:101070601葫芦岛:101071401营口:101070801阜新:101070901辽阳:101071001铁岭:101071101朝阳:101071201盘锦:101071301大连:101070201锦州:101070701'
var p = /[\u4E00-\u9AF5\uf900-\ufa2d]{2,20}\:\d{9}/g
,rg = x.match(p)
,po = {}
,pa = []
$.each(rg, function(i, v) {
a = v.split(':')
po[a[0]] = a[1]
pa.push(a[0])
})
//auto complete
var ip = $('#city-name-input')
,lb = $('#label-result')
,btn = $('#btn-search-city')
ip.autocomplete({
source: pa
})
btn.click(function() {
var v = ip.val()
if(btn.hasClass('on-action')) return false
if(!$.trim(v)) lb.text('请输入地名')
else if(v > 20) lb.text('太长了')
else if($.inArray(v, pa) < 0) lb.text('无此城市数据')
else {
lb.text('')
searchCity()
}
})
//search city
function searchCity() {
var url = 'http://whatever.sinaapp.com/weatherfeed.php'
$.ajax({
url: url,
data:{id:po[ip.val()]},
beforeSend: function() {
btn.addClass('on-action')
lb.text('搜索中...')
},
dataType: 'jsonp',
success: function(data) {
btn.removeClass('on-action')
lb.text('')
renderWeatherData(data)
}
})
}
//render weather json data
function renderWeatherData(data) {
var d = data.weatherinfo
,ws = ''
for(var i = 0;i < 5;i ++) {
var x = i + 2
ws += '<div class="weather-day day' + x +'">' +
'<p class="temp"><span class="temp-txt">' + (d['temp' + x]?d['temp' + x]:'无数据') + '</span> <span class="wea-txt">' + (d['weather' + x]?d['weather' + x]:'无数据') + '</span> </p>' +
''
}
var ht =
'<div class="weather-info">' +
'<p class="city-name">' + d.city + '</p>' +
'<p class="date-today"><span class="date-y">' + d.date_y + '</span> <span class="date-week">' + d.week +'</span></p>' +
'<div class="weather-day day-today">' +
'<p class="temp"><span class="temp-txt">' + d.temp1 + '</span> <span class="wea-txt">' + d.weather1 + '</span> </p>' +
'</div>' +
'<div class="future-days">' +
'<p class="bold">未来五天</p>' +
ws +
'</div>' +
'</div>'
$('#weather-output').html(ht)
}
//end
})
http://m.weather.com.cn/data/101010100.html 提供的json数据格式化以后包含以下信息,可以据此完善渲染function
{
weatherinfo: {
city: "北京",
city_en: "beijing",
date_y: "2013年3月24日",
date: "",
week: "星期日",
fchh: "18",
cityid: "101010100",
temp1: "-2℃~11℃",
temp2: "2℃~15℃",
temp3: "4℃~16℃",
temp4: "5℃~12℃",
temp5: "2℃~12℃",
temp6: "4℃~10℃",
tempF1: "28.4℉~51.8℉",
tempF2: "35.6℉~59℉",
tempF3: "39.2℉~60.8℉",
tempF4: "41℉~53.6℉",
tempF5: "35.6℉~53.6℉",
tempF6: "39.2℉~50℉",
weather1: "晴",
weather2: "多云转阴",
weather3: "阴",
weather4: "晴",
weather5: "多云",
weather6: "阴",
img1: "0",
img2: "99",
img3: "1",
img4: "2",
img5: "2",
img6: "99",
img7: "0",
img8: "99",
img9: "1",
img10: "99",
img11: "2",
img12: "99",
img_single: "0",
img_title1: "晴",
img_title2: "晴",
img_title3: "多云",
img_title4: "阴",
img_title5: "阴",
img_title6: "阴",
img_title7: "晴",
img_title8: "晴",
img_title9: "多云",
img_title10: "多云",
img_title11: "阴",
img_title12: "阴",
img_title_single: "晴",
wind1: "微风",
wind2: "微风",
wind3: "微风",
wind4: "北风3-4级转微风",
wind5: "微风",
wind6: "微风",
fx1: "微风",
fx2: "微风",
fl1: "小于3级",
fl2: "小于3级",
fl3: "小于3级",
fl4: "3-4级转小于3级",
fl5: "小于3级",
fl6: "小于3级",
index: "较冷",
index_d: "建议着厚外套加毛衣等服装。年老体弱者宜着大衣、呢外套加羊毛衫。",
index48: "冷",
index48_d: "天气冷，建议着棉服、羽绒服、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣、冬大衣或厚羽绒服。",
index_uv: "中等",
index48_uv: "最弱",
index_xc: "适宜",
index_tr: "适宜",
index_co: "较舒适",
st1: "10",
st2: "0",
st3: "16",
st4: "3",
st5: "18",
st6: "4",
index_cl: "较适宜",
index_ls: "基本适宜",
index_ag: "易发"
}
}
share to»
FEATURE
popup.js compatible with ie6+,
tested in ie7+.
check the demo for detail.
HOW TO USE
load the popup.js after jQuery
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script src="js/popup.js"></script>
just call the function, such as:
popup(
'<p>the msg you want to popup</p>',
5000 //ms,optional, before how much time the msg will popout,
//if not defined,will be 5500ms
)
DEMO
http://html5beta.com/demo/popup/popup-demo.html
DOWNLOAD
share to»
use jQuery,jquerymobile,auto adjust column ,3/2/1,compatible with ie7+.
check the demo for detail & source code.
vertical layout:
http://html5beta.com/demo/picroll/picroll.html
horizontal:
share to»
阿里云的价格不错，定制使用部署都很方便。
昨天刚部署了一个ubuntu 12.04,nodejs,proftpd 的组合,写个流程记录。
连接服务器
ssh root@server_ip
初始化数据盘
Installing Node.js via package manager
参照
Installing Node.js via package manager
apt-get install python-software-properties python g++ make add-apt-repository ppa:chris-lea/node.js apt-get update apt-get install nodejs npm
z注意：可能提示你未安装python之类，按照提示apt-get相应软件，然后apt-get update
安装express
npm install express -gd
初始化网站目录
cd /mnt/
express nodeserver
cd nodeserver
npm install
然后得编辑下 app.js
vi app.js
进入vi界面，基本操作：
按 i 进入编辑，编辑完毕 按 ESC 键退出编辑，
按 :w 保存，
按 :q 退出vi。
-
先把默认端口号 3000 改为 80
app.set('port', process.env.PORT || 80); -
纯静态服务的话注释掉以下代码
//app.get('/', routes.index); //app.get('/users', user.list);
然后用forever 实现后台启动nodejs,这样就可以安全关掉ssh(-w 参数实现监视文件更改 )
npm install forever
forever start -w app.js
这样服务就启动了，可以用ip访问试试。
安装proftpd，以便ftp上传文件
apt-get install proftpd
可能会提示要安装其他倚赖关系的软件。记不清了，记得用standalone方式。容易一些。
参考:
http://blog.csdn.net/id19870510/article/details/8395339
然后部署用户
//用户组
groupadd ftpusergroup
//添加用户
useradd ftpuser -d /mnt/nodeserver/ -g ftpusergroup
//设置密码
passwd ftpuser
// 修改 proftpd配置文件
vi /etc/proftpd/proftpd.conf
// 去掉如下行前的注释 #
# DefaultRoot ~
//用户权限
chown ftpuser /mnt/nodeserver/*
用客户端登陆试试，大功告成，上传文件即可。
share to»
var a = {
class:'item'
}
a.class
may cause a error in ie8-, error code 1010
a['class'] will be fine.
share to»
there is no ajax example in jqueryui tooltip’s demo,so it took me a little time to figure it out, hope it helps you.
it is quite simple for those who fully understand the callback mechanism of js, I guess.
$(document).tooltip({
items:'#lists .table a.btn-preview',
tooltipClass:'preview-tip',
position: { my: "left+15 top", at: "right center" },
content:function(callback) { //callback
$.get('preview.php',{}, function(data) {
callback(data); //call the callback function to return the value
});
},
});
share to»
DESCRIPTION
basic.css is a css file for fast web development,supposed to work with normalize.css
Now,the source code
@charset "utf-8";
/* basic.css
* by ZHAO Xudong,zxdong@gmail.com
* http://html5beta.com/html5/basic-css/
* supposed to work with normalize.css
* for fast web development
* all lower case
*/
/* float */
.fleft {
float:left;
}
.fright {
float:right;
}
.alignleft {
text-align:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
/* clear */
.clear {
clear:both;
}
.clear-left {
clear:left;
}
.clear-right {
clear:right;
}
/* layout */
.centered {
width:1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
/* Image replacement */
.ir {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}
/* padding */
.sep {
height:10px;
}
.padding {
padding:10px;
}
.paddinglr {
padding-left:10px;
padding-right:10px;
}
.paddingtb {
padding-top:10px;
padding-bottom:10px;
}
.paddingl {
padding-left:10px;
}
.paddingr {
padding-right:10px;
}
.paddingt {
padding-top:10px;
}
.paddingb {
padding-bottom:10px;
}
/* border */
.border {
border:1px solid #666;
}
.bordert {
border-top:1px solid #666;
}
.borderb {
border-bottom:1px solid #666;
}
.borderl {
border-left:1px solid #666;
}
.borderr {
border-right:1px solid #666;
}
/* box shadow */
.box-shadow {
box-shadow:0 3px 3px rgba(0,0,0,.4);
}
/* text color */
.color-red {
color:#c00;
}
.color-green {
color:#060;
}
.color-yellow {
color:#ff0;
}
.color-black {
color:#000;
}
.color-white {
color:#fff;
}
.color-grey {
color:#888;
}
/* text-shadow */
.text-shadow {
text-shadow:0 0 1px rgba(0,0,0,.4);
}
/* font */
.bold {
font-weight:bold;
}
/* btn */
.btn {
display:inline-block;
vertical-align:top;
line-height:2em;
font-size:1em;
padding:0 2em;
cursor:pointer;
border-radius:4px;
text-decoration:none;
text-shadow:0 1px 0 rgba(0,0,0,.3);
}
/*
* btn color
* from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
*/
.btn-green {
color:#eee;
background:#5a8f00;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
background:-moz-linear-gradient(#b8db29, #5a8f00);
background:-o-linear-gradient(#b8db29, #5a8f00);
background:linear-gradient(#b8db29, #5a8f00);
}
.btn-green:hover {
color:#eee;
background:#b8db29;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#5a8f00), to(#b8db29));
background:-moz-linear-gradient(#5a8f00, #b8db29);
background:-o-linear-gradient(#5a8f00, #b8db29);
background:linear-gradient(#5a8f00, #b8db29);
}
.btn-blue {
color:#eee;
background:#075698;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
background:-moz-linear-gradient(#2e88c4, #075698);
background:-o-linear-gradient(#2e88c4, #075698);
background:linear-gradient(#2e88c4, #075698);
}
.btn-blue:hover {
color:#eee;
background:#2e88c4;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
background:-moz-linear-gradient(#075698, #2e88c4);
background:-o-linear-gradient(#075698, #2e88c4);
background:linear-gradient(#075698, #2e88c4);
}
.btn-red {
color:#eee;
background:#c81e2b;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f04349), to(#c81e2b));
background:-moz-linear-gradient(#f04349, #c81e2b);
background:-o-linear-gradient(#f04349, #c81e2b);
background:linear-gradient(#f04349, #c81e2b);
}
.btn-red:hover {
color:#eee;
background:#f04349;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#c81e2b), to(#f04349));
background:-moz-linear-gradient(#c81e2b, #f04349);
background:-o-linear-gradient(#c81e2b, #f04349);
background:linear-gradient(#c81e2b, #f04349);
}
.btn-orange {
color:#fff;
text-shadow:none;
background:#f3961c;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
}
.btn-orange:hover {
color:#222;
background:#f9d835;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
background:-moz-linear-gradient(#f3961c, #f9d835);
background:-o-linear-gradient(#f3961c, #f9d835);
background:linear-gradient(#f3961c, #f9d835);
}
.btn-black {
color:#eee;
background:#555;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#555));
background:-moz-linear-gradient(#333, #555);
background:-o-linear-gradient(#333, #555);
background:linear-gradient(#333, #555);
}
.btn-black:hover {
color:#fff;
background:#333;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#555), to(#333));
background:-moz-linear-gradient(#555, #333);
background:-o-linear-gradient(#555, #333);
background:linear-gradient(#555, #333);
}
.btn-grey {
color:#333;
background:#ccc;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#999), to(#ccc));
background:-moz-linear-gradient(#999, #ccc);
background:-o-linear-gradient(#999, #ccc);
background:linear-gradient(#999, #ccc);
}
.btn-grey:hover {
color:#111;
background:#999;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#999));
background:-moz-linear-gradient(#ccc, #999);
background:-o-linear-gradient(#ccc, #999);
background:linear-gradient(#ccc, #999);
}
/* font size */
.font24 {
font-size:2.4em;
}
.font20 {
font-size:2em;
}
.font18 {
font-size:1.8em;
}
.font16 {
font-size:1.6em;
}
.font12 {
font-size:1.2em;
}
.font9 {
font-size:.9em;
}
.font8 {
font-size:.8em;
}
.font7 {
font-size:.7em;
}
.font6 {
font-size:.6em;
}
/* display */
.iblock {
display:inline-block;
vertical-align:top;
}
.block {
display:block;
}
.hide {
display:none;
}
.hidden {
visibility:hidden;
}
share to»
wordpress-theme-BubbleDream-screenshot
/*
Theme Name: BubbleDream
Author: ZHAO Xudong
Theme URI: http://html5beta.com/wordpress/wordpress-theme-bubbleDream/
Author URI:http://html5beta.com
Description:a pure css theme without images at all and with a canvas bubbles animated background;
in a perfect world,there is no ie5,ie6,ie7, or ie8!!!do not work in ie5.6.7.8.!!!
Version: 1.0
Tags: black,blue,white,two-columns,fixed-width
License: GNU General Public License, v2 (or newer)
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/
DOWNLOAD
share to»