<![CDATA[Designnull - JS Lab]]> http://www.designnull.com/ zh-cn PBlog2 v2.4 Designnull http://www.designnull.com/images/logos.gif http://www.designnull.com/ Designnull http://www.designnull.com/article.asp?id=18 <![CDATA[超漂亮,提取自ZCMS的弹出层]]> ihongcn@gmail.com(admin) Thu,22 Oct 2009 10:34:26 +0800 http://www.designnull.com/default.asp?id=18
复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>【强烈推荐】 超漂亮的仿腾讯弹出层效果（兼容主流浏览器）</title>
<style>
body {background: #ffffff;    color: #444;}
a{    color: #09d;    text-decoration: none;    border: 0;    background-color: transparent;}
body,div,q,iframe,form,h5{    margin: 0;    padding: 0;}
img,fieldset { border: none 0; }
body,td,textarea {    word-break: break-all;    word-wrap: break-word;    line-height:1.5;}
body,input,textarea,select,button {    margin: 0;    font-size: 12px;    font-family: Tahoma, SimSun, sans-serif;}
div,p,table,th,td {    font-size:1em;    font-family:inherit;    line-height:inherit;}
h5{ font-size:12px;}
</style>
<script type="text/javascript" src="http://www.5-studio.com/wp-content/uploads/2009/06/Dialog.js"></script>
<script type="text/javascript">
function $(ele) {
  if (typeof(ele) == 'string'){
    ele = document.getElementById(ele)
    if(!ele){
          return null;
    }
  }
  if(ele){
      Core.attachMethod(ele);
    }
  return ele;
}
var Core = {};
Core.attachMethod = function(ele){
    if(!ele||ele["$A"]){
        return;
    }
    if(ele.nodeType==9){
        return;
    }
    var win;
    try{
        if(isGecko){        
            win = ele.ownerDocument.defaultView;
        }else{
            win = ele.ownerDocument.parentWindow;
        }
        for(var prop in $E){
            ele[prop] = win.$E[prop];
        }
    }catch(ex){
        //alert("Core.attachMethod:"+ele)//有些对象不能附加属性，如flash
    }
}
function zOpenD(){
    var diag = new Dialog("Diag1");
    diag.Width = 900;
    diag.Height = 400;
    diag.Title = "弹出窗口示例";
    diag.URL = "http://demo.zving.com/";
    diag.ShowMessageRow = true;
    diag.MessageTitle = "弹出窗口示例";
    diag.Message = "在这儿你可以对这个窗口的内容或功能作一些说明";
    diag.OKEvent = zAlert;//点击确定后调用的方法
    diag.show();
}
function zOpen(){
    var diag = new Dialog("Diag2");
    diag.Width = 900;
    diag.Height = 400;
    diag.Title = "弹出窗口示例";
    diag.URL = "http://demo.zving.com/";
    diag.OKEvent = zAlert;//点击确定后调用的方法
    diag.show();
}
function zAlert(){
        Dialog.alert("滤爸要来了，河谐你，河谐我，河谐二十一世纪的新一代");
}
function zConfirm(){
    Dialog.confirm('警告：您确认要XXOO吗？',function(){Dialog.alert("yeah，周末到了，正是好时候");});
}
function sometext(ele,n){
    var strArr=["可","以","清","心","也"];
    var writeStr=""
    for(i=0;i<n;i++){
        index=parseInt(Math.random()*5);
        for(j=0;j<5;j++){
            str=index+j>4?index+j-5:index+j;
            writeStr+=strArr[str];
        }
    }
    $(ele).innerHTML=writeStr;
}
</script>
</head>
<body>
<div id="div1"></div>
<p>      <input type="button" value="弹出新窗口" onclick="zOpen()" /> <input type="button" value="弹出带说明的新窗口" onclick="zOpenD()" /> <input type="button" value="弹出信息提示对话框" onclick="zAlert()" /> <input type="button" value="弹出选择对话框" onclick="zConfirm()" /></p>
<div id="div2"></div>
<script>sometext("div1",100);sometext("div2",300);</script>
</body>
</html>


]]> http://www.designnull.com/article.asp?id=15 <![CDATA[Jquery Tools]]> ihongcn@gmail.com(admin) Tue,29 Sep 2009 10:05:39 +0800 http://www.designnull.com/default.asp?id=15
Jquery Tools　一套Web UI 库，包括 Tab 容器，可折叠容器，工具提示，浮动层以及可滚动容器等
http://flowplayer.org/tools/demos/index.html
]]> http://www.designnull.com/article.asp?id=8 <![CDATA[用 Javascript 实现锚点(Anchor)间平滑跳转]]> ihongcn@gmail.com(admin) Thu,09 Jul 2009 09:51:56 +0800 http://www.designnull.com/default.asp?id=8 效果不错，不过IE6不支持fixed,解决方法在这里
复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转
// 来源 ：ThickBox 2.1
// 整理 ：Yanfu Xie [xieyanfu@yahoo.com.cn]
// 网址 ：http://www.codebit.cn
// 日期 ：07.01.17
// 转换为数字
function intval(v) {     v = parseInt(v);     return isNaN(v) ? 0 : v; }  
// 获取元素信息
function getPos(e) {
    var l = 0;
    var t  = -111;
    var w = intval(e.style.width);
    var h = intval(e.style.height);
    var wb = e.offsetWidth;
    var hb = e.offsetHeight;
    while (e.offsetParent){
        l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
        t += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
        e = e.offsetParent;
    }
        l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
        t  += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
    return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
}  
// 获取滚动条信息
function getScroll(){
    var t, l, w, h;
    if (document.documentElement && document.documentElement.scrollTop) {
        t = document.documentElement.scrollTop;
        l = document.documentElement.scrollLeft;
        w = document.documentElement.scrollWidth;
        h = document.documentElement.scrollHeight;
        } else if (document.body) {
            t = document.body.scrollTop;
            l = document.body.scrollLeft;
            w = document.body.scrollWidth;
            h = document.body.scrollHeight;
    }
return { t: t, l: l, w: w, h: h }; }  
// 锚点(Anchor)间平滑跳转
function scroller(el, duration) {
    if(typeof el != 'object') {
        el = document.getElementById(el); }
        if(!el) return;
        var z = this;
        z.el = el;
        z.p = getPos(el);
        z.s = getScroll();
        z.clear = function(){window.clearInterval(z.timer);z.timer=null};
        z.t=(new Date).getTime();
        z.step = function(){
            var t = (new Date).getTime();
            var p = (t - z.t) / duration;
            if (t >= duration + z.t) {
                z.clear();
                window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
                } else {
                    st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
                    sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
                    z.scroll(st, sl);
                }
};
z.scroll = function (t, l){window.scrollTo(l, t)};
z.timer = window.setInterval(function(){z.step();},13); }
</script>
]]> http://www.designnull.com/article.asp?id=5 <![CDATA[使用jQuery及Bing API实现简易搜索引擎]]> ihongcn@gmail.com(admin) Fri,03 Jul 2009 16:07:44 +0800 http://www.designnull.com/default.asp?id=5
首先我们来感性感受一下：在线示例

Bing API提供了三种检索结果数据类型：SOAP、XML、JSON，在示例中是通过jQuery ajax调用json数据类型接口展示数据的。下面我们来看它的实现：

准备工作：

微软通过Bing API站点向我们展示了详细的开发文档：

1.访问bing开发者站点：http://bing.com/developers，在这里也可以找到Bing API在MSDN上的入口
2.使用微软的账户登录（没有只能先注册一个啦）
3.填写表格，获取“APP ID”（用来调用API时用的，微软要确定你是微软的开发者）
HTML部分

页面元素很简单，主要包括检索入口、结果显示区域、结果描述、错误信息显示及翻页导航五部分，下面看HTML：
复制内容到剪贴板程序代码 程序代码

        <div class="line search-content">
            <div class="column col-threefifths">
                <h3 id="results-header"></h3>
                <p id="results-summary"></p>
<!--结果显示区域-->
                <div id="search-result">
                    <h3>搜索结果</h3>
<!-- 结果描述，例如总共多少条，但前是哪些条 -->
                    <div id="result-aggregates" class="results"></div>
                    <ul id="result-list" class="results">
                    </ul>
<!--翻页导航-->
                    <ul id="result-navigation" class="result-navigation">
                        <li id="prev">«</li>
                        <li id="next">»</li>
                    </ul>
                </div>
<!--错误信息显示-->
                <p id="error-list">
                </p>
            </div>
<!-- 搜索入口 -->
            <div class="column last-col">
                <h3>输入搜索词:</h3>
                <p>
                    <input id="txtQuery" type="text" title="Search Terms" />
                    <button id="btnSearch" type="button" title="搜索">搜索</button>
                </p>
            </div>
        </div>通过jQuery调用Bing API部分

1.定义Bing API需要传入的一些参数：
    //申请的APP ID，这里换成你自己的。
    var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
    //通过用户输入搜索词获得检索串
    var Query = "Query="
    //指定检索来源类型，Bing提供了网页、视频、图片等所有类型，参考API
    //这里指定的是网页类型
    var Sources = "Sources=Web";
    //指定API版本
    var Version = "Version=2.0";
    //指定所在地区，如google，每个地区搜索结果是不一样的，这里指定中国
    var Market = "Market=zh-cn";
    //一些选项设置，这里开启搜索结果中的搜索词高亮
    var Options = "Options=EnableHighlighting";
    //每页返回条数
    var WebCount = 10;
    //当前为第几页，从0开始的
    var WebOffset = 0;2.为搜索按钮绑定处理方法：

$(function() {
    $('#btnSearch').click(function() {
//这里调用最关键的Search方法，取数据
        Search();
    });
});3.下面来看最关键的Search部分，调用API获取结果数据：

$(function() {
function Search() {

//获取用户输入的搜索词，并替换空格为“+”
        var searchTerms = $('#txtQuery').val().replace(" ", "+");

//防止传输中文时产生乱码
        searchTerms = encodeURI(searchTerms);  

//将接口需要的所有参数封装为数组
        var arr = [AppId, Query + searchTerms, Sources, Version, Market, Options, "Web.Count=" + WebCount, "Web.Offset=" + WebOffset, "JsonType=callback", "JsonCallback=?"];

//将参数数组拼装成url串，最终得到bing的URL Service的请求URL
        var requestStr = "http://api.search.live.net/json.aspx?" + arr.join("&");

//通过jquery ajax调用bing json数据接口
        $.ajax({
            type: "GET",
            url: requestStr,
//指定数据类型为jsonp
            dataType: "jsonp",  

//调用成功后返回数据对象，并调用处理方法
            success: function(msg) {
                SearchCompleted(msg);
            },
            error: function(msg) {
                alert("Something hasn't worked\n" + msg.d);
            }
        });
    }
});

我们看到在使用jquery ajax时，指定数据类型为jsonp，jsonp是一种可跨域访问的协议，我对其也不是非常清楚，可以在这里了解一下。另外 CSS9.NET 也计划在后面的文章中讲解json的相关知识，敬请关注。

4.再来看获取到数据后的UI处理，主要包括显示结果和显示错误信息两部分：

复制内容到剪贴板程序代码 程序代码

    function SearchCompleted(response) {
//检查结果数据对象中的Errors对象，判断是否发生错误
        var errors = response.SearchResponse.Errors;
        if (errors != null) {
            // 发生错误的话调用错误信息显示方法
            DisplayErrors(errors);
        }
        else {
            // 没有错误的话调用结果信息显示方法
            DisplayResults(response);
        }
    }下面是显示结果方法，因为要改变UI，所以代码多一点，不过这里可以感受一下jquery中dom操作的灵活。

    function DisplayResults(response) {
//清空结果列表
        $("#result-list").html("");  
//清空翻页导航
        $("#result-navigation li").filter(".nav-page").remove();  
// 清空结果描述信息
        $("#result-aggregates").children().remove();

//获取结果数据对象
        var results = response.SearchResponse.Web.Results;  

//描述信息部分，即总过多少条，当前是哪些条
        $('#result-aggregates').prepend("<p>检索词： " + response.SearchResponse.Query.SearchTerms + "</p>");
        $('#result-aggregates').prepend("<p id=\"result-count\">当前显示 " + StartOffset(results)
            + " 至 " + EndOffset(results)
            + "  总共:" + parseInt(response.SearchResponse.Web.Total) + "</p>");

//创建结果列表，把每一项要显示的内容放在一个数组中
        var link = [];  
//因为开启了搜索词高亮选项，这里进行高亮匹配
        var regexBegin = new RegExp("\uE000", "g");    
        var regexEnd = new RegExp("\uE001", "g");    
        for (var i = 0; i < results.length; ++i) {
//创建每一结果项的信息
            link[i] = "<li><a href=\"" + results[i].Url + "\" title=\"" + results[i].Title + "\">"
                + results[i].Title + "</a>"
                + "<p>" + results[i].Description + "<p>"
                + "<p class=\"result-url\">" + results[i].Url + "</p></li>";

//搜索词加粗显示
            link[i] = link[i].replace(regexBegin, "<strong>").replace(regexEnd, "</strong>");
        }
//在页面结果区域显示结果列表    
       $("#result-list").html(link.join(''));

//处理导航区域
        CreateNavigation(response.SearchResponse.Web.Total, results.length);
    }


导航部分代码比较简单，就不在这里大块的贴了，直接下载代码看吧。

下载：示例源码

另外，在MSDN的bing api部分为开发者提供了非常多的代码实例，感兴趣的可以去看。
]]>