jquery天气插件

所属分类:其他-独立的部件

 41498  67  查看评论 (11)
jquery天气插件 ie兼容10

一个简单的jQuery插件可以显示当前的天气信息,使用雅虎天气的任何位置。开发者James Fleeting。下载最新的版本,阅读文档或浏览常见问题解答simpleweather.js。下面你会发现使用simpleWeather.js的一个例子。

用法

只需在您的网站jquery.simpleWeather.js。然后初始化simpleWeather,设置您的WOEID,美国邮递区号或位置,添加一个div与``天气的ID(或任何你想要的,只是改变它在init)。

html

<div id="weather"></div>


css

body {
  font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background: #0091c2;
}
#weather {
  width: 425px;
  margin: 0px auto;
  text-align: center;
  text-transform: uppercase;
}
#weather h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 150px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}
#weather ul {
  margin: 0;
  padding: 0;
}
#weather li {
  background: #fff;
  background: rgba(255,255,255,0.90);
  padding: 20px;
  display: inline-block;
  border-radius: 5px;
}
#weather .currently {
  margin: 0 20px;
}


js

$(document).ready(function() {
  $.simpleWeather({
    zipcode: '',
    woeid: '2357536',
    location: '',
    unit: 'f',
    success: function(weather) {
      html = '<h2>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.tempAlt+'&deg;C</li></ul>';
  
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});


相关插件-独立的部件

  独立的部件
 3825  18

jquery下载所有版本(实时更新)

jquery下载,实时更新jquery1.2到最新3.1.1所有版本下载
  独立的部件
 1266402  370

操作浏览器标题栏插件Title.js

Title.js是一个javascript库用来操作浏览器标题栏,没有依赖性。 这里有用法示例:添加前缀,加后缀,改变预定义的标题,招牌效果、打字机效果。
  独立的部件
 10009  44

js格式化货币插件currencyFmatter.js

currencyFmatter.js是一款简单实用的纯js格式化货币插件。该插件包含155种不同国家的货币,以及715种不同语言的本地化设置。它还能处理某些不采用的货币,功能非常强大。
  独立的部件
 2114  18

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币

    Alexre_Dumas0
    2016/11/21 21:11:01
    做到一半发现只能美国用 回复
    多柠檬*0
    2016/8/5 14:08:51
    怎么初始化simpleWeather 回复
    emillet0
    2016/3/29 10:03:29
    为什么我的出来的效果没有图片。。。只有文字 回复
    Beyonce Int0
    2016/3/15 16:03:36
    ~L+Z~0
    2016/2/16 16:02:18
    只能美国用  有毛用啊? 回复
    枫真的疯啦 0
    2016/1/28 10:01:30

    如何找到对应城市的WOEID

        多柠檬*0
        2016/8/5 14:08:32
        这个网站可以查http://zourbuth.com/tools/woeid/
        baidilejishi0
        2016/8/8 17:08:20
        不过貌似只能用美国的区号
    回复
    他色┝┿?想0
    2015/8/25 9:08:58

    不错哦

        Alisa0
        2016/1/13 13:01:49

        恩,我也觉的不错

        Alexre_Dumas0
        2016/11/21 21:11:14
        只能看看
    回复
取消回复
    PROMULGATOR

    插件王子

    火星