Friday, July 30, 2010

8种方法提高访问量

8种方法提高访问量

1. 调查

在你网页上搞一些小调查，问一个有趣的问题，让访客投票。投票者也许会在明天或下周再来查看调查结果。

2.有奖活动

持续的搞一些有奖活动，奖品不必太贵重，只要对你的访客来说稍有用即可。他们会常来看结果。

3. 原创材料

在网页上放一些别的地方没有的东西。并不是说你所有内容都必须是原创，但至少要有一部分是。这样别人才会来你那里。

4. 小测验

要有小测验，每周公布答案。参加者会来看正确答案。

5. 新闻

提供与主题相关的新闻。一般人都喜欢最新的新闻。你如能成为他们的第一手来源，他们就会重复访问。

6. 玩笑

不断来点幽默，不要太严肃，讲点小笑话。如果访问者潜意识觉得很开心，他们就会不断访问。

7. 免费清单

人们都喜欢免费的东西。列出一份免费清单，它们可以是软件、服务、小产品、电子图书等，但要与你的主题相关。及时更新，访客就会定期再来。

8. 目录

在网页上列出与你主题相关的其他网站的连接。 这些网站要有趣，有用。你的网站就会起一个“目录”的作用，别人会常来，通过你访问其他的网站。


补充：

要让别人用搜索引擎搜索到你的圈圈，你可以到搜索引擎网站上登记。目前提供这种功能的网站很多，下面提供几个免费登录入口：
Yahoo免费登录入口：http://cn.yahoo.com/docs/info/suggest.html
Google免费登录入口：http://www.google.com/intl/zh-CN/add_url.html
百度免费登录入口：http://www.baidu.com/search/url_submit.htm
搜狐免费登录入口：http://db.sohu.com/regurl/regform.asp?Step=REGFORM&class=
千度免费登录入口：http://www.qiandu.com/search/default.asp
新浪免费登录入口：http://bizsite.sina.com.cn/newbizsite/docc/index-2jifu-09.htm
中华网免费登录入口：http://202.84.11.68.66/web/frontward/free/free_search.asp
焦点网免费登录入口：http://search.focus.com.cn/search/search_newurl_regsiter.asp
网易免费登录入口：hppt://seek.163.com/cgi-bin/search/add_url.cgi
发贴者 YAO Luxin 时间： 20:56 0 评论
标签：

lhgdialog v3.1.3 弹出窗口插件

转自：http://www.cnblogs.com/lhgstudio/archive/2010/01/02/1637856.html





lhgdialog v3.1.3 弹出窗口插件体积更小，调用更简单，功能更强大。

下载地址：lhgdialog 弹出窗口插件v3.1.3

演示地址：lhgdialog 插件使用说明和演示

下载包中有使用说明文档，在使用插件前一定要先看看说明文档

lhgdialog v3.1.3 弹出窗口插件代码全部重构，整个插件只使用了一个lhgdialog.js核心文件，代码更加精减，规范。主库lhgcore.min.js也做了很多优 化，效率更高，插件的代码也做了很多优化，效率也更高，由于代码全部重写，所以也无法写出更新的东西，大家可以自已看_source目录里的源码。



3.1.3 更新内容

1. 修正参数为page时page的值每次打开窗口变化时内容页里取到的值不变的bug 注：如果想要page变化必须用第二种调用方式

2. 修正拖动改变大小时如果只单击不拖动程序出错的bug

3. 更改了所有类的名称，在所有的类名前加前缀lhgdig_，以防止和用户的类名冲突

4. 类库lhgcore.min.js有一点小的修正

----------------------------------------------------------

3.1.2 更新内容

1. 修正参数为html里窗口内容水平过多时撑开窗口的bug

2. 修正参数为page时在ie下有时单击窗口内容页时无权限的bug

3. 新增一款蓝色透明皮肤（此皮肤由网友Mr.Simple友情提供)

----------------------------------------------------------

3.1.1 更新内容

1. 窗口的html结构重新构造

2. 更新内容太多，自已看说明或源码吧（使用前一定要先看下使用说明）

----------------------------------------------------------

3.0.2 更新内容

1. 修正取页面滚动高度计算的BUG

2. 修正在IE下拖动时出现无权限的BUG

----------------------------------------------------------

3.0.1 更新内容

1. 修正IE8下内容页为iframe时高度的问题

2. 修正IE下当顶层页面为怪异模式时，内容页定位不准确的问题

----------------------------------------------------------

3.0.0 更新内容

更新内容太多，自已看说明或源码吧。

----------------------------------------------------------

2.3.7 更新内容

1. 主要是对使用遮罩时的每打开次窗口就创建一个遮罩层改为无论打开多少次都

    只创建一个遮罩层，这样可以提高效率，因为每创建一个遮罩就会增加很多内

    存的使用。

2. 主库文件lhgcore.min.js文件也升级为1.3.8，性能也有不少的提高。

----------------------------------------------------------

2.3.6 更新内容

1. 增加S.auto()函数，此函数是用来自动调整窗口大小。

2. 增加对link参数的控制，如果同域则不能使用link参数。

3. 修正了其它的一些小问题。
发贴者 YAO Luxin 时间： 20:30 0 评论
标签：

GreyBox弹出层框架基本使用

转自：http://www.okajax.com/a/200806/061S422008.html


GreyBox是www.open-open.com开发的一个遮罩层的组件，它运行以后可以产生不错的界面。类似于thinkbox，lightbox等。

下面我们先来看下效果吧



效果看上去还不错吧！这只是其中一个演示，还有很多。

那么现在就分享一下自己的经验：

1.进入GreyBox的网站（英文的）：

http://orangoo.com/labs/GreyBox/

然后下载GreyBox

2.解压

先把这些包下的文件全部拷过来。



3.新建一个html页面，叫index.html

以下为代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ddd</title>
<script type="text/javascript">
 var GB_ROOT_DIR = "./greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<h4>Example rendered:</h4>
<a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">Salt flats</a>
<a href="static_files/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley">Night valley</a>
</body>
</html>
那个var GB_ROOT_DIR="./greybox/";这个是指向你本机的greybox的相对目录。
接下来还有三个JavaScript文件和一个CSS，它是要用的要加进来。
第21行到22行，这两句是用来加入两张图片，以便切换，这样你就可以看到开始的那个Ajax的效果了。
不过使用这个的时候要注意第一行的代码不要忘记写。如果那样你就会发现窗体不会以符合你浏览器的大小来显示了。

<a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">Salt flats</a>href=""里面写的是你图片的路径，当然可以是网上的图片。rel是调用Js里面的方法（这个在它的官网上写的很详细 的）title是显示在框架上的标题，A标签里面的内容就不用说了，它指的是标题。
如果还想用其它的效果，可以点Documentation进去看看，而且还有很详细的例子和语法范例，很简单的，相信一看就会明白。
发贴者 YAO Luxin 时间： 19:18 0 评论
标签：

简述12种关于ajax弹出层

转自：http://www.cnblogs.com/troubleLife/archive/2009/12/18/troublelife.html


12种ajax弹出层,他们功能都很强大,能够给编程人员省下宝贵的时间,得到更多的视觉享受.
闲话不多说,直接进入主题吧.


Thickbox - 基于 jQuery，支持 AJAX，轻量级的而且比较高效。支持图片与HTML内容。大小约为 40k，目前还可作为 WordPress 的插件使用。这个js的优点在于与，父级的原页面滚动条随鼠标滚动的时候，弹出的层并不移动，而始终处于浏览器的固定位置。


GreyBox - 创建 iframe 的弹出界面，可使用图片、HTML 及 URL，大小约为 20k。

这个弹出层效果有固定位置与随父级的滚动条滚动两种模式






GreyBox Redux - 基于 jQuery，比 GreyBox 更轻。

这个js的的弹出效果增加了自上而下缓慢滑出的效果。


Lightbox v2.0 - 最初是为了显示图片设计的，使用了 prototype 和 sciptaculous，所以有些沉重，但对于图片来说很好用。

缺点就是弹出层出来后，滚动鼠标滚轮，父级页面与弹出内容同事随着滚动条，只有点击关闭按钮才能关闭弹出层，对于弹出图片较大的时候，用户体验方面相对比较不友好，需要移动页面找到关闭按钮才行。

Lightbox Gone Wild - modal 模式窗口的 lightbox，可使用 html、表单及图片，也是基于 prototype 的。

这个效果的好处在于，弹出内容是图片时，点击图片本身既可以关闭弹出层，非常方便。






Multi-faceted LIghtbox - 又一个基于 prototype 的，不过这个为各种可用于 lightbox 的数据类型提供了选项。

Leightbox - 和 Lightbox Gone Wild 很相似，只是 Leightbox 以 html 方式存放内容，所以可以被搜索引擎索引到。

除了弹出内容符合seo以外，这个效果的一大特点是，弹出后父级页面的滚动被禁用，而以弹出层的滚动为主，这样在弹出的窗口有较多内容时，滚动鼠标滚轮时，就不会同时滚动父级页面，而影响正常浏览。

xilinus - 使用简单，基于 prototype，很容易定制，可使用多种内容选项。

Lightbox Plus - 可以自动根据窗口的大小缩放图片。

Suckerfish Hover Lighbox - 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。

Litebox - 这是 Lightbox 的另一个版本，代码量减少了，使用了 moo.fx 和 prototype-lite，如果页面需要减肥的话，可以选择这个。

LITBox - 使用类写的 lightbox，所以可以创建多个对象实例，并且单独进行控制。基于 Thickbox。



最近的项目中需要做弹出层,是基于iframe的,我做了一个,效果还是可以,样式呢还算美观.可是不怎么好用,接着我研究了下GreyBox,什么叫强大,什么叫Professional,
什么叫Power,什么叫Perfect,就在一瞬间,我都领会到了
发贴者 YAO Luxin 时间： 19:03 0 评论
标签：

法国 - 布列塔尼 - 圣马洛

圣马洛的海滩


圣马洛古城里，远处是城门楼。。




城墙上，下面是挡浪的木柱




圣马洛 里



这个是圣米歇尔山上的某处花园。。

































2010年04月25日

可惜天气不太好。。。

圣马洛（Saint Malo）是法国布列塔尼伊勒-维莱讷省的城市（52 737人），也是布列塔尼半岛最热门的观光旅游目的地。该城市最著名的是古时用于抵御海盗的城墙，还有海浪拍岸的海滩，以及保存完好的中世纪古城。圣马洛如同是一个梦幻中的旅游观光目的地。

布列塔尼半岛集壮观的海岸线、古城风光、迷人岛屿景色和内陆森林风景为一体，风景壮观、景色怡人。圣马洛在一千多年以前曾是凯尔特公国的领地，1532年 被法国所合并，是一块积淀了浓厚的文化、传统和历史的土地。人口52 700 ，圣马洛海港因其美丽的海滩、古老的围墙包围的城市而扬名世界，这里是世界潮水最高的地区之一，也是布列塔尼最为热门的旅游胜地。17和18世纪时，这里 曾是重要的海港，也是商船和官方严打的海盗基地所在。

围墙包围的老城原本是岛屿，13世纪时通过Le Sillon地峡和大陆连在了一起。1944年，将德国入侵者赶出圣马洛的战争使这个地区的80%都成为了废墟。除了重大纪念性建筑是按照原样重建的，其余地方都是根据17和18世纪的建筑风格重建的。 　　12～18世纪修建的城市中心建筑圣—樊尚大教堂（Cathédrale St-Vincent；place J de Ch&acirc;tillon；开放时间：9:30am～6pm）在1944年的炮火中严重受损。如果狭窄的街道遭遇封锁，人们可以通过17世 纪修建的逃生出口成功撤离。你可以绕着城墙漫步，整个一圈城墙大概有2公里路程，包括主要的城门在内，城墙上有好几个免费入口。沿着城墙向北观望，你可以 看到Fort National要塞（免费参观；营业时间：7月到9月）饱经风雨的残骸。 　　你可以穿过Porte des Bés门，漫步到礁石密布的&icirc;le du Grand Bé&icirc;le小岛，这里是18世纪的作家夏多布里昂（Chateaubriand）安葬的地方。一旦涨潮，这里的堤道将因完全被淹没而无法通行，所以请提前向旅游局查询涨潮的时间。 　　Musée International du Long Cours Cap-Hornier（合恩角航线博物馆；电话：02 99 40 71 58；成人/儿童 4.8/2.4欧元；开放时间：4月到9月每天10am～中午 & 2～6pm，10月到次年3月周二到周日10am～中午 & 2～6pm）在14世纪修建的Tour Solidor塔中，展示的是合恩角航线海员们的艰苦生活，从塔上可以俯瞰脚下壮美景色。

见：百度百科。。
发贴者 YAO Luxin 时间： 18:44 0 评论
标签： , ,

PHP中结合ajax实现局部刷新的分页


需要如下方面的知识

!. PHP 中的类的使用（Language Reference http://www.php.net/manual/en/langref.php）， 字符串处

理函数的调用（http://www.php.net/manual/en/book.strings.php），php 中 函数库参考

（http://www.php.net/manual/en/funcref.php）

2.PHP 中连接MySQL数据库的方法（http://us3.php.net/manual/en/ref.mysql.php）

3. jQuery库中的ajax功能支持（http://jquery.com）

4. javascript中的JSON （参考我前几天写的文章）


MySQL中的数据结构如下







------------------------index.php内容 -------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   xml:lang="zh-CN" lang="zh-CN">

<head>
  <script type="text/javascript" src="./jquery-1.2.3.js"></script>

<style type="text/css">
#messagebox {
  width:80% ;

  background:#eeeeee;
}

.item{
  width:100% ;

}

.nav { margin: 5px 0}
.nav a  { margin: 0 0px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
.nav a:focus { outline: hand; }

</style>
</head>

<form  name=myform method=post  action=index.php>
<body>
<!--

<input type=text  name=mytextbox>  <input type=submit   name=submit value="测试一下" > 
-->

<div id=messagebox>

</div>
<div  class="nav">
          <a onclick="showpage(0)">1</a>
          <a onclick="showpage(1)">2</a>
          <a onclick="showpage(2)">3</a>
          <a onclick="showpage(3)">4</a>
          <a onclick="showpage(4)">5</a>

<div>
<script>
var  row = [
{ author: "11" , content:"12",time: "2007:20;30" },
{ author: "21" , content:"22" ,time: "2007:20;30"},
];

//alert (row[0].dd);


function  insertMessage( messages)
{
        $("#messagebox").html("");
         for (var  i=0; i<10;i++)
        {
                 if (messages[i]  != null)
                 {   

                        var html = $("#messagebox").html()
                                       + "<div class=item>" 
           + "<table border=2 width=100% height=100%> <tr> <td width=20%>"
           + "<span>作者："
           + messages[i].author
           + "</span><br>"
           + "<span>发贴时间:"
           + messages[i].time
                                       + "</span> "
                                       + "</td>  <td>"
                                       +messages[i].content
                                      + "</td></tr> <table>"
                                      + "</div>" ;
                        $("#messagebox").html ( html);
                    
                 }else{
                            break;
                }
        }

}  

function showpage( number)
{
    $("#messagebox").html(" <div   style='background:#ffff00;width:200px'>正在加载数据请稍候.....<div>");
    var  pagenum = number.toString() ;
    $.get("http://localhost/php/request.php",     //请求的地址
     { page:  pagenum },  //要传给服务器的参数    相当于在浏览器地址栏输入 http://localhost/php/request.php?page=0   这样
    function(data){            //ajax获取成功的函数
//  alert("Data Loaded: " + data);
                // data =  data.replace("\r\n"," ");
  var allMessages = eval_r( "(" + data + ")" );
              //  var allMessages = eval_r( data );
     if  (allMessages[0].content != null)
    {
                       insertMessage(allMessages);
    }
          
    });


}


showpage(0);
//insertMessage(row);

</script>

</body>
</form>
</html>


<?php
    
?>



---------------------request.php内容 ----------------------------------------

<?php
//include  ("pager.php" );
  require_once  ("pager.php" );

$link= mysql_connect ("localhost" ,"root", "");
if (!$link) {
     die('Could not connect: ' . mysql_error());
}
//echo 'Connected successfully';


mysql_query("SET NAMES 'gb2312'",$link);  //gb312为数据库中编码格式

if(!isset($_GET['page'])){$page = 0;}else{$page = $_GET['page'];}
$pagedemo = new pageclass;
$pagedemo->set_sql("SELECT * FROM  widebright.message ORDER BY Time DESC");
$pagedemo->set_params("type=".$type."");
$pagedemo->set_setpage($page);
$pagedemo->set_pagesize(2);
$pagedemo->set_filename("request.php");
$pagedemo->set_pagenumber(1);
$pagedemo->show();
$result=$pagedemo->result;
$n=0;

echo "[";
  while ($row=mysql_fetch_row($result)){
       $n++;     
       $message = array (
      "time"  =>  $row[2],
      "content" => $row[3],
      "author"    =>  $row[4],
          );   
        
       echo "{", "time" , ":\"", str_replace("\r\n","<br>", $row[2] ),
        "\"," ,"content" , ": \"", str_replace("\r\n","<br>", $row[3]) ,
        "\"," , "author" , ": \"",   str_replace("\r\n","<br>",$row[4]) , "\"} , \n"  ;
      
    // echo json_encode( $message);    好像这个不支持中文
      
  }

echo "]";


//$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);

//echo json_encode($arr);
// $pagedemo->showpage();
//echo  "哈哈哈";

mysql_close($link);


?>

------------------------pager.php内容 -----------------------------------------

<?php


class pageclass
{

var $sqlstr,$filename,$params,$initfirstpage;
var $pagestart,$pagenumber,$pagesize,$i;
var $firstpage,$prevpage,$nextpage,$lastpage;
var $totallines,$maxpage,$totalpages,$result;
var $page,$final,$getpage,$param,$paramlist;
function pageclass()
{
  $this->set_initfirstpage("仅此一页"); // 设置只有一页时显示的文字；
  $this->set_setpage(0);                 // 设置默认第一页为0；
  $this->set_pagesize(10);               // 设置默认记录数为10；
  $this->set_params("");                 // 设置默认参数列表为空；
  $this->set_pagestart(0);               // 设置默认分页起始数为0；
  $this->set_pagenumber(5);              // 设置默认每页显示页数为5；
  $this->set_firstpage("|<<");           // 设置默认上N页表示字符为|<<；
  $this->set_prevpage("<<");             // 设置默认上一页表示字符为<<;
  $this->set_nextpage(">>");             // 设置默认下一页表示字符为>>;
  $this->set_lastpage(">>|");            // 设置默认下N页表示字符为>>|;
}
function set_sql($sqlstr)
{
  $this->sqlstr = $sqlstr;
}
function set_pagesize($pagesize)
{
  $this->pagesize = $pagesize;
}
function set_filename($filename)
{
  $this->filename = $filename;
}
function set_params($params)
{
  $this->params = $params;
}
function set_pagestart($pagestart)
{
  $this->pagestart = $pagestart;
}
function set_pagenumber($pagenumber)
{
  $this->pagenumber = $pagenumber;
}
function set_firstpage($firstpage)
{
  $this->firstpage = $firstpage;
}
function set_prevpage($prevpage)
{
  $this->prevpage = $prevpage;
}
function set_nextpage($nextpage)
{
  $this->nextpage = $nextpage;
}
function set_lastpage($lastpage)
{
  $this->lastpage = $lastpage;
}
function set_initfirstpage($initfirstpage)
{
  $this->initfirstpage = $initfirstpage;
}
function set_setpage($getpage)
{
  $this->getpage = $getpage;
}
function show()
{
  $this->final = '';
  $this->param = preg_replace("/&?page=[0-9]*&?/", '', $this->params);
  $this->totallines = mysql_num_rows(mysql_query($this->sqlstr));
  if(isset($this->totallines))
  {
    $this->totalpages = ceil($this->totallines / $this->pagesize);
  }else{
    $this->totalpages = 1;
  }
  $this->result = mysql_query($this->sqlstr." limit ".$this->getpage * $this->pagesize .", ". $this->pagesize);
}
function showpage()
{
  if($this->totalpages > $this->pagenumber && $this->getpage > $this->pagenumber - 1)
  {
    $this->paramlist = '?page='.($this->getpage - $this->pagenumber);
    $this->paramlist .= "&".$this->param;
    $this->final .= "<a href=./".$this->filename.$this->paramlist.">".$this->firstpage."</a> ";
    $this->pagestart = intval($this->getpage / $this->pagenumber) * $this->pagenumber;
  }else $this->final .= $this->firstpage." ";
  if($this->getpage)
  {
    $this->paramlist  = '?page='.($this->getpage - 1);
    $this->paramlist .= "&".$this->param;
    $this->final .= "<a href=./".$this->filename.$this->paramlist.">".$this->prevpage."</a> ";
  } else $this->final .= $this->prevpage." ";
  if($this->totalpages < $this->pagenumber)
  {
    $this->maxpage = $this->totalpages;
  }else{
    $this->maxpage = $this->pagenumber;
  }
  for($this->i = $this->pagestart, $this->paramlist = '', $this->maxpage += $this->pagestart; $this->i < $this->maxpage; $this->i ++) {
    $this->paramlist .= '?page='.$this->i;
    $this->paramlist .= "&".$this->param;
    if($this->i != $this->getpage)
    {
     $this->final .= "<a href=./".$this->filename.$this->paramlist.">".($this->i + 1).'</a> ';
    }else{
     $this->final .= "<a href=./".$this->filename.$this->paramlist."><strong>".($this->i + 1).'</strong></a> ';
    }
    $this->paramlist = '';
  }
  if((++ $this->getpage)< $this->totalpages)
  {
    $this->paramlist  = "?page=".$this->getpage;
    $this->paramlist .= "&".$this->param;
    $this->final .= "<a href=./".$this->filename.$this->paramlist.">".$this->nextpage."</a> ";
  } else $this->final .= " ".$this->nextpage;
  $this->getpage --;
  if(($this->getpage + $this->pagenumber) < $this->totalpages)
  {
    $this->paramlist = '?page='.($this->getpage + $this->pagenumber);
    $this->paramlist .= "&".$this->param;
    $this->final .= " <a href=./".$this->filename.$this->paramlist.">".$this->lastpage."</a>";
  } else $this->final .= " ".$this->lastpage;
  if($this->maxpage == 1) $this->final = $this->initfirstpage;
  print $this->final;
}

}
?>

---------------------------------------------------------------------------

index.php是主要显示页面， request.php是ajax后台数据提供页面，pager.php是网上下载的一个分页类。

最后运行效果如图。








总结：看到有人在网上问PPlive论坛的分页的问题，看到他是采用局部刷新的分页，刚好在看看php所以写了一个简单的例子，熟练一下语法。 不过PPlive那个是还结合jQuery里面的分页插件，做了层隐藏等的，他一次下载很多条记录，然后通过层的显示来控制浏览所有的数据。

这个只是个简单的例子，如果是实际应用，可以把页码导航那个放到php服务端生成的比较好。
发贴者 YAO Luxin 时间： 01:01 0 评论
标签：

自动完成 Auto-Complete Field with jQuery

转：

  1. http://fromvega.com/wordpress/2007/05/05/auto-complete-field-with-jquery-json-php/
  2. http://zendgeek.blogspot.com/2009/07/zend-framework-and-dojo-auto-complete.html
  3. http://www.phpme.info/index.php/view_108_351.html

12.7.5  利用YUI库创建自动完成的文本输入框

http://book.51cto.com/art/201003/187298.htm

(the best one!)

Building AutoComplete Inputs with PHP, PEAR, Dojo and YUI

http://devzone.zend.com/article/4229


Fashion Statements


Coco Chanel, the famous French designer, once commented that fashion "is not something that exists in dresses only". In recent months, I've come to agree: ever since the big search engines added auto-suggest, hardly a week goes by without a client asking me to build similar autocomplete functionality into a Web form.


Fortunately, modern programming toolkits like Dojo provide ready-made widgets that have the necessary client-side functions for autocomplete. Add a little bit of server-side glue, in the form of a PHP script that talks to a database to generate valid suggestions, and enabling this functionality in a Web application now becomes a matter of hours, rather than days. In this article, I'll show you how to do this using three different libraries: PEAR HTML_QuickForm, YUI, and Dojo. Come on in, and find out more!

Back To Basics


Before we get started, it's important to state the assumptions this article makes. While most of the code in this tutorial involves the use of ready-made widgets, you'll still find it easier to navigate if you understand HTML, know the basics of JavaScript and DOM programming, and are familiar with retrieving and processing SQL result sets in PHP.


This article also assumes that you have an Apache/PHP/MySQL development environment already set up, and that you have downloaded and successfully installed the following packages:

  1. The Dojo/Dijit Toolkit, which is available from http://www.dojotoolkit.org/. This article uses Dojo v1.2.3.
  2. The Yahoo! User Interface (YUI) Library, which is available from http://developer.yahoo.com/yui/. This article uses YUI v2.6.0.
  3. The HTML_QuickForm package and all necessary dependencies, which is available from http://pear.php.net/package/HTML_QuickForm, and is currently maintained by Bertrand Mansion and Alexey Borzov. This article uses HTML_QuickForm v3.2.9

A quick word also about the MySQL database used in this article. The various examples that follow demonstrate autocomplete functionality in the context of a Web form that accepts book information, consisting of the book title and up to three author names. Based on the first few characters entered into the form, author names are dynamically suggested from a database table, which looks something like this:


 mysql> SELECT * FROM author LIMIT 0,10;
 +----------+--------------------+
 | AuthorID | AuthorName         |
 +----------+--------------------+
 |        1 | Stephen King       |
 |        2 | Alfred Hitchcock   |
 |        3 | Enid Blyton        |
 |        4 | Ken Follett        |
 |        5 | W. G. Moore        |
 |        6 | Jeffrey Arthur     |
 |        7 | John le Carre      |
 |        8 | Scott Smith        |
 |        9 | Alison Prince      |
 |       10 | Arthur Conan Doyle |
 +----------+--------------------+
 10 rows in set (0.13 sec)

An SQL file containing example data for this table can be downloaded here.

Remote Control


Once all the pieces are in place, let's look at one approach to enabling autocomplete functionality: using YUI's AutoComplete widget. This widget, which is documented in detail at http://developer.yahoo.com/yui/autocomplete/, can be associated with any form input element and is a fully-skinnable, easy-to-configure component that can read suggestion data in a variety of formats.


Here's an example of a form that uses the AutoComplete widget:


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
   <head>
   <link rel="stylesheet" type="text/css" href="/yui/build/fonts/fonts-min.css" />
   <link rel="stylesheet" type="text/css" href="/yui/build/autocomplete/assets/skins/sam/autocomplete.css" />
   <script type="text/javascript" src="/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
   <script type="text/javascript" src="/yui/build/connection/connection-min.js"></script>
   <script type="text/javascript" src="/yui/build/animation/animation-min.js"></script>  
   <script type="text/javascript" src="/yui/build/datasource/datasource-min.js"></script>
   <script type="text/javascript" src="/yui/build/autocomplete/autocomplete-min.js"></script>
   </head>
   <body class="yui-skin-sam">
     
     <h3>Add Title</h3>
     <form action="" method="post">
       Title:<br/>
       <input type="text" name="Title[TitleName]" style="width:200px"/>
       <p/>
       Author:<br/>
       <div style="width:200px">
         <input id="Author[AuthorName][0]" type="text" name="Author[AuthorName][0]"/>
         <div id="ac0"></div>
       </div>
       <p/><br/><p/>
       Author:<br/>
       <div style="width:200px">
         <input id="Author[AuthorName][1]" type="text" name="Author[AuthorName][1]"/>
         <div id="ac1"></div>
       </div>
       <p/><br/><p/>
       Author:<br/>
       <div style="width:200px">
         <input id="Author[AuthorName][2]" type="text" name="Author[AuthorName][2]"/>
         <div id="ac2"></div>
       </div>
       <p/><br/><p/>
       <input type="submit" name="submit" value="Save" />
     </form>    
     
     <script type="text/javascript">                
       YAHOO.example.autocomplete = function() {
         var oConfigs = {
             prehighlightClassName: "yui-ac-prehighlight",
             queryDelay: 0,
             minQueryLength: 0,
             animVert: .01,
         }
         
         // instantiate remote data source
         // code based on example at
         // http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_xhr.html
         var oDS = new YAHOO.util.XHRDataSource("http://localhost/get_authors.php");
         oDS.responseType = YAHOO.util.XHRDataSource.TYPE_XML;
         oDS.responseSchema = {
            resultNode: 'author',
            fields: ['name']            
         };
         oDS.maxCacheEntries = 10;        
     
         // instantiate YUI autocomplete widgets
         var oAC0 = new YAHOO.widget.AutoComplete("Author[AuthorName][0]", "ac0", oDS, oConfigs);          
         var oAC1 = new YAHOO.widget.AutoComplete("Author[AuthorName][1]", "ac1", oDS, oConfigs);          
         var oAC2 = new YAHOO.widget.AutoComplete("Author[AuthorName][2]", "ac2", oDS, oConfigs);
         return {
             oDS: oDS,
             oAC0: oAC0,
             oAC1: oAC1,
             oAC2: oAC2
         };
       }();
      </script>
     
   </body>
 </html>


As the code illustrates, this form contains three input fields, each of which is associated with an AutoComplete widget. As the user begins entering data into each of these fields, the AutoComplete widget will go to work generating suggestions that match the user's input. The source data for these suggestions is YUI's XHRDataSource widget, which is configured as below:


         // instantiate remote data source
         var oDS = new YAHOO.util.XHRDataSource("http://localhost/get_authors.php");
         oDS.responseType = YAHOO.util.XHRDataSource.TYPE_XML;
         oDS.responseSchema = {
            resultNode: 'author',
            fields: ['name']            
         };


This configuration tells the XHRDataSource widget that it should automatically poll the PHP script at 'http://localhost/get_authors.php' for suggestions, and warns it that the PHP script will express these suggestions in XML. The configuration also specifies the XML node and attribute names that contain the suggestion text.


At the other end of the connection, here's what the 'get_authors.php' script looks like:


 <?php
 // begin XML output
 $xmlStr = <<<XML
 <?xml version='1.0' standalone='yes'?>
 <authors>
 XML;

 // open database connection
 $mysqli = new mysqli("localhost", "user", "pass", "library");      
 if (mysqli_connect_errno()) {
     printf("Connect failed: %s
 ", mysqli_connect_error());
     exit();
 }

 // retrieve author list matching input
 // add to XML document
 $q = $mysqli->real_escape_string($_GET['query']);
 $sql = "SELECT AuthorName FROM author WHERE AuthorName LIKE '" . $q . "%' ORDER by AuthorName";
 if ($result = $mysqli->query($sql)) {
   while ($row = $result->fetch_row()) {
     $xmlStr .= '<author name="' . $row[0] . '"></author>';
   }
   $result->close();
 }

 // clean up
 // output XML document
 $mysqli->close();
 $xmlStr .= '</authors>';
 header("Content-Type: text/xml");
 echo $xmlStr;
 ?>


There's nothing particularly complicated about this script. It receives the string fragment entered by the user in $_GET['query'], formulates an SQL query to generate author names matching this fragment, and outputs an XML document containing these author names. Here's an example of the XML it generates in response to a query for 'ste':


 <?xml version='1.0' standalone='yes'?>
 <authors>
   <author name="Stephen Fry"></author>
   <author name="Stephen King"></author>
   <author name="Stephen Mogridge"></author>
 </authors>


At the other end of the connection, this XML is parsed and decoded by YUI's XHRDataSource widget and presented to the user. Here's an example of what the output looks like:

Going Local


One important point to note about the previous example, is that it continually "polls" the server to refine the suggestion list, as the user is typing. This might not be ideal in all situations - for example, when you're on a slow network link, or if your server is already heavily loaded and you don't want to unnecessarily burden it with additional work.


In these situations, you can populate the AutoComplete widget from a local data source - an inline JavaScript array - instead of from a remote URL. In this case, the array is dynamically generated using PHP when the page is rendered and used as the base for all autocomplete suggestions. The PHP code used to generate and populate the JavaScript array is similar to that used in the previous example. Here's the revised form:


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
   <head>
   <link rel="stylesheet" type="text/css" href="/yui/build/fonts/fonts-min.css" />
   <link rel="stylesheet" type="text/css" href="/yui/build/autocomplete/assets/skins/sam/autocomplete.css" />
   <script type="text/javascript" src="/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
   <script type="text/javascript" src="/yui/build/animation/animation-min.js"></script>  
   <script type="text/javascript" src="/yui/build/datasource/datasource-min.js"></script>
   <script type="text/javascript" src="/yui/build/autocomplete/autocomplete-min.js"></script>
   </head>
   <body class="yui-skin-sam">
     
     <h3>Add Title</h3>
     <form action="" method="post">
       Title:<br/>
       <div style="width:200px">
         <input type="text" name="Title[TitleName]"/>
       </div>
       <p/>
       Author:<br/>
       <div style="width:200px">
         <input id="Author[AuthorName][0]" type="text" name="Author[AuthorName][0]"/>
         <div id="ac0"></div>
       </div>
       <p/><br/><p/>
       Author:<br/>
       <div style="width:200px">
         <input id="Author[AuthorName][1]" type="text" name="Author[AuthorName][1]"/>
         <div id="ac1"></div>
       </div>
       <p/><br/><p/>
       Author:<br/>
       <div style="width:200px">
         <input id="Author[AuthorName][2]" type="text" name="Author[AuthorName][2]"/>
         <div id="ac2"></div>
       </div>
       <p/><br/><p/>
       <input type="submit" name="submit" value="Save" />
     </form>    
     
     <?php
     // open database connection
     $mysqli = new mysqli("localhost", "user", "pass", "library");      
     if (mysqli_connect_errno()) {
         printf("Connect failed: %s
 ", mysqli_connect_error());
         exit();
     }
     // retrieve author list
     $query = "SELECT AuthorName FROM author ORDER by AuthorName";
     $authors = array();
     if ($result = $mysqli->query($query)) {
       while ($row = $result->fetch_row()) {
         $authors[] = $row[0];
       }
       $result->close();
     }
     // clean up
     $mysqli->close();
     ?>      
   
     <script type="text/javascript">                
       // set data
       arrayAuthors = [
         "<?php echo implode('","', $authors); ?>"
       ];      
       
       YAHOO.example.autocomplete = function() {
         var oConfigs = {
             prehighlightClassName: "yui-ac-prehighlight",
             queryDelay: 0,
             minQueryLength: 0,
             animVert: .01,
         }
         
         // instantiate local data source
         // code based on example at
         // http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array.html
         var oDS = new YAHOO.util.LocalDataSource(arrayAuthors);
     
         // instantiate YUI autocomplete widgets
         var oAC0 = new YAHOO.widget.AutoComplete("Author[AuthorName][0]", "ac0", oDS, oConfigs);          
         var oAC1 = new YAHOO.widget.AutoComplete("Author[AuthorName][1]", "ac1", oDS, oConfigs);          
         var oAC2 = new YAHOO.widget.AutoComplete("Author[AuthorName][2]", "ac2", oDS, oConfigs);
         
         return {
             oDS: oDS,
             oAC0: oAC0,
             oAC1: oAC1,
             oAC2: oAC2
         };
       }();
      </script>
     
   </body>
 </html>


You'll notice also that in this version, the autocomplete suggestions appear quicker, because the widget is operating off a local array rather than a remote request. However, this method is only advisable when the data set is relatively small, as otherwise the inline JavaScript array might grow too large and consume an uncomfortably high amount of client memory.

Typing Tutor


An alternative to the previous example is to use HTML_QuickForm's 'autocomplete' element, which also uses a local data cache and is fairly straightforward to implement. Here's an example:


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
   <head></head>
   <body>
     <h3>Add Title</h3>

     <?php
     // open database connection
     $mysqli = new mysqli("localhost", "user", "pass", "library");      
     if (mysqli_connect_errno()) {
         printf("Connect failed: %s
 ", mysqli_connect_error());
         exit();
     }
     // retrieve author list
     $query = "SELECT AuthorName FROM author ORDER by AuthorName";
     $authors = array();
     if ($result = $mysqli->query($query)) {
       while ($row = $result->fetch_row()) {
         $authors[] = $row[0];
       }
       $result->close();
     }
     // clean up
     $mysqli->close();
         
     // initialize HTML_QuickForm object
     require_once 'HTML/QuickForm.php';
     $form = new HTML_QuickForm();
     
     // add auto-complete input field
     $title = $form->addElement('text', 'Title[TitleName]', 'Title:');
     $ac0 = $form->addElement('autocomplete', 'Author[AuthorName][0]', 'Author:');
     $ac1 = $form->addElement('autocomplete', 'Author[AuthorName][1]', 'Author:');
     $ac2 = $form->addElement('autocomplete', 'Author[AuthorName][2]', 'Author:');
     
     // add auto-complete options
     $ac0->setOptions($authors);
     $ac1->setOptions($authors);
     $ac2->setOptions($authors);
     
     // add submit button
     $form->addElement('submit', null, 'Submit');
     
     // print submitted values
     // render and display the form
     if ($form->validate()) {
       $form->freeze();
     } else {
       $form->display();
     }
     ?>
   </body>
 </html>


Here, an 'autocomplete' element is first added to the form with addElement(), and then its setOption() method is used to set the array of values that will be used for auto-completion. When the form is rendered, as the user types a name into the autocomplete field, the input entered will be matched against this array of values (on every key press) and matching values, if any, will be used to complete the user's input. Here's an illustration of what this looks like:



In this example, the array is generated by PHP from a MySQL result set, as in the earlier examples. The HTML_QuickForm package will use this array and automatically generate the JavaScript code needed to enable the autocompletion feature (look in the source code of the rendered page to see it).

Dijit-al Download


If you're a Dojo fan, then you'll be thrilled to hear that Dijit, the Dojo widget library, also comes with a ComboBox component that exposes autocomplete functionality. This ComboBox can be linked to an ItemFileReadStore, which provides suggestions using a JSON source (although other formats are also supported). Here's the code:


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
   <head>
     <style type="text/css">
       @import "/dojo-release-1.2.3/dijit/themes/tundra/tundra.css";
       @import "/dojo-release-1.2.3/dojo/resources/dojo.css"
     </style>  
     <script type="text/javascript" src="/dojo-release-1.2.3/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
     <script type="text/javascript">
      dojo.require("dojo.parser");
      dojo.require("dijit.form.ComboBox");
      dojo.require("dojo.data.ItemFileReadStore");
     </script>
   </head>
   <body>
     <!--
     code based on example at
     http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input/auto-completer
     -->
     <h3>Add Title</h3>
     <form action="" method="post">
       <div dojoType="dojo.data.ItemFileReadStore" jsId="aStore" url="http://localhost/get_authors_json.php" />
       Title:<br/>
       <div class="tundra" style="width:200px">    
         <input type="text" dojoType="dijit.form.TextBox" name="Title[TitleName]" />
       </div>
       <p/>
       Author:<br/>
       <div class="tundra" style="width:200px;">
         <input name="Author[AuthorName][0]" dojoType="dijit.form.ComboBox" store="aStore" searchAttr="name" />          
       </div>
       <p/>
       Author:<br/>
       <div class="tundra" style="width:200px">
         <input name="Author[AuthorName][1]" dojoType="dijit.form.ComboBox" store="aStore" searchAttr="name" />          
       </div>
       <p/>
       Author:<br/>
       <div class="tundra" style="width:200px">
         <input name="Author[AuthorName][2]" dojoType="dijit.form.ComboBox" store="aStore" searchAttr="name" />          
       </div>
       <p/>
       <input type="submit" name="submit" value="Save" />
     </form>    
     
   </body>
 </html>


Notice, in the listing above, that each ComboBox element has a 'store' attribute, which points to the Dojo ItemFileReadStore. This ItemFileReadStore looks for JSON data to be in a particular format, which is documented at http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item. It's quite easy to generate this JSON data using a server-side PHP script, which is exactly what the script at 'http://localhost/get_authors_json.php' does:


 <?php
 // open database connection
 $mysqli = new mysqli("localhost", "user", "pass", "library");      
 if (mysqli_connect_errno()) {
     printf("Connect failed: %s
 ", mysqli_connect_error());
     exit();
 }
 // retrieve author list matching input
 // add to XML document
 $sql = "SELECT AuthorName FROM author ORDER by AuthorName";
 if ($result = $mysqli->query($sql)) {
   while ($row = $result->fetch_row()) {
     $authors[] = array('name' => $row[0]);
   }
   $result->close();
 }

 // clean up
 // output JSON
 $mysqli->close();
 echo json_encode(array('identifier' => 'name', 'items' => $authors));
 ?>


Here's an example of the JSON output:


 {"identifier":"name",
  "items":[
           {"name":"A. J. Quinnell"},
           {"name":"Agatha Christie"},
           ...
           {"name":"William McKay"},
           {"name":"William Rotsler"}
          ]
 }


And here's what the final product looks like:



As these examples demonstrate, it's fairly easy to build an autocomplete input that uses a database for suggestions, by mixing a little PHP with ready-made widgets from toolkit such as Dojo or YUI. This article listed four possible ways in which this could be done...but there are many more! Play with it a little, discover your own...and don't forget to post a comment telling everyone about it!

发贴者 YAO Luxin 时间： 00:58 0 评论
标签：

JQuery 浮动导航栏实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQuery 浮动导航栏</title>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script>
<style type="text/css">

#floatMenu
{
padding-top: 5px;
background: url(http://img.jb51.net/images/quickmenu.gif) no-repeat;
border: 1px solid #dcdcdc;
position: absolute;
top: 250px;
left: 5px;
margin-left: 0px;
width: 86px;
}
#floatMenu ul
{
margin-left: 0px;
background-color:White;
list-style-type: none;
padding:10px

}
#floatMenu ul li a
{
display: block;
text-decoration: none;
color: #000;
}
#floatMenu ul li a:hover
{
color: #fff;
background-color: #ff8000;
}
#floatMenu ul.menu1 li a:hover
{
border-color: #09f;
}

</style>
</head>
<body>
<div id="floatMenu">
<ul class="menu1">
<li><a href="#" onclick="return false;">Home</a></li>
<li><a href="#" onclick="return false;">About Us</a></li>
<li><a href="#" onclick="return false;">Product</a></li>
<li><a href="#" onclick="return false;">Contact</a></li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br />
<script type="text/javascript">
//<![CDATA[
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function() {
menuYloc = parseInt($(name).css("top").substring(0, $(name).css("top").indexOf("px")))
$(window).scroll(function() {
offset = menuYloc + $(document).scrollTop() + "px";
$(name).animate({ top: offset }, { duration: 500, queue: false });
});
});
//]]>
</script>
</body>
</html>
发贴者 YAO Luxin 时间： 00:57 0 评论
标签：

JS实例：文本输入框是不可编辑的，我想让它可以点一下

单个文本框


<html>
<head>
<script type="text/JavaScript" language="JavaScript">
function doclick(){
var docs = document.getElementByIdx_x('url');
docs.readOnly = false;
//alert("asdfasd");
}
</script>
</head>
<body>
<input type="text" id="url" name="T_montant" value="com" readOnly />
<input type="button" value="edit" onclick="doclick();">
</body>
</html>





多个文本框：
<html>
<head>
<script language="javascript">
function doclick(){
var docs = document.all("T_montant");
docs[0].readOnly = false;
docs[1].readOnly = false;}
</script>
</head>
<body>
<input type="text" id="url" name="T_montant" value="com" readOnly />
<input type="text" id="url" name="T_montant" value="sdsa" readOnly />
<input type="button" value="edit" onclick="javascript:doclick()">
</body>
</html>
发贴者 YAO Luxin 时间： 00:56 0 评论
标签：

JS实例：一个输入框一个按钮，点按钮时把文本框中的内 

<html>
<head>
<script language="javascript">
function Open(){
  var url = document.getElementByIdx_x("url").value;
  window.open (url);
}
</script>
</head>
<body>
<input type="text" id="url" value=" http://baidu.com"/>
<input type="button" value="submit" onclick="Open()">
</body>
</html>
发贴者 YAO Luxin 时间： 00:55 0 评论
标签：

JS实例：两个input 文本输入框 改变其中一个的值 另一 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript">
function keydown(){
  document.ff.input2.value=document.ff.input1.value;
}
</script>
</HEAD>

<BODY>
<form action="" name="ff" method="post">
  <input type="text" name="input1" onkeyup="keydown()"><br>
  <input type="text" name="input2">
</form>
</BODY>
</HTML>
发贴者 YAO Luxin 时间： 00:51 0 评论
标签：

几种设置表单元素中文本输入框不可编辑的方法


本文转自：http://www.qljyzx.com:88/Article/homepage/asp/200611/713.html


作者：佚名


解决思路：
在文本框的内容只作于演示而不允许用户随意修改时 这样做就非常有必要。


具体步骤：
方法一：设置readonly属性为true。




Html代码
  1. <input type="text" value="readonly" readonly>   

 <input type="text" value="readonly" readonly>

 

方法二：设置disabled属性为true。




Html代码
  1. <input type="text" value="disabled" disabled>   

 <input type="text" value="disabled" disabled>

 

方法三：在对象focus时立刻让它blur，使它无法获得焦点。




Html代码
  1. <input type="text" value="onfocus=this.blur()" onfocus="this.blur()">   

 <input type="text" value="onfocus=this.blur()" onfocus="this.blur()">
 

提示：readonly和disabled的区别在 于后者完全禁止与设置该属性的对象交互(表现为不可改写、不可提交等)。 readonly是可以提交的


特别提示
代码运行效果如图1.4.16所示。
图片
图1.4.16 禁止输入的文本框

特别说明



本例需要了解readonly和disabled属性的用法，两属性的区别见第三部分问题43。需要掌握的一个技巧是如何让对象得不到焦 点，主是要下面的事件或方法的应用：
onfocus当对象获得焦点时触发。
focus使对象得到焦点。
onblur在对象 失去输入焦点时触发。
blur模糊对象的内容以便使其看起来失去焦点。

发贴者 YAO Luxin 时间： 00:49 0 评论
标签：

javascript（表单元素--select下拉列表）制作二级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" ontent="text/html; charset=gb2312" />
<title>表单元素（select下拉列表）制作二级联动菜单和网站导航</title>
<script language="javascript">
//下面函数是联动菜单的处理代码
function makeshi(x){
var form2=document.diqu.one.options.length;//这句解释同上
var diqul=new Array(form2)//新建一个数组，项数为第一个下拉列表的项数
for(i=0;i<form2;i++)//循环第一个下拉列表的项数那么多次
diqul[i]=new Array();//子循环
//下面是给每个循环赋值
diqul[0][0]=new Option("绵阳","绵阳");
diqul[0][1]=new Option("成都","成都");
diqul[0][2]=new Option("广元","广元");
diqul[1][0]=new Option("南京","南京");
diqul[1][1]=new Option("苏州","苏州");
diqul[1][2]=new Option("常州","常州");
diqul[2][0]=new Option("南宁","南宁");
diqul[2][1]=new Option("柳州","柳州");
diqul[2][2]=new Option("北海","北海");
diqul[3][0]=new Option("杭州","杭州");
diqul[3][1]=new Option("温州","温州");
diqul[3][2]=new Option("义乌","义乌");
var shi=document.diqu.shi;//方便引用
for(m=shi.options.length-1;m>0;m--)
//这个要看清楚,因为要重新填充下拉列表的话必须先清除里面原有的项,清除和增加当然是有区别的了,所以用递减
shi.options

­=null;//将该项设置为空,也就等于清除了
for(j=0;j<diqul[x].length;j++){//这个循环是填充下拉列表
shi.options[j]=new Option(diqul[x][j].text,diqul[x][j].value)
//注意上面这据,列表的当前项等于 新项(数组对象的x,j项的文本为文本，)
}
shi.options[0].selected=true;//设置被选中的初始值
}
</script>
</head>
<body>
<p>对于脚本来说，最复杂的表单元素对象就是select了，他是一个复合对象，包含OPTION对象数组的对象</p>
<p><strong>演示：地区二级无刷新联动菜单</strong>（其实这个例题也适用了关联数组，只是说被 关联的数组是在一级数组的内部，如果有不明白，就看下 <a href="http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.html">http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.html</a> 这篇，专门介绍数组的文字）</p>
<form id="form2" name="diqu" method="post" action="">
<select name="one" size="1" onchange="makeshi(options.selectedIndex)">
<option value="0">四川</option>
<option value="1">江苏</option>
<option value="2">广西</option>
<option value="3">浙江</option>
</select>
<select name="shi">
<option value="绵阳">绵阳</option>
<option value="成都">成都</option>
<option value="德阳">德阳</option>
<option value="广元">广元</option>
<option value="南充">南充</option>
</select>
</form>
</body>
</html>



转自： http://hi.baidu.com/oxolin/blog/item/a0c9a94a2057d72808f7ef8f.html
发贴者 YAO Luxin 时间： 00:48 0 评论
标签：

javascript在两个下拉列表框中显示我国的省和市的代码

<html>
<head>
<script language=javascript>
var where=new Array(33);
function pclink(pro,pcity)
{
this.pro=pro;
this.pcity=pcity; 
}
where[0] = new pclink("北京","北京市"); 
where[1] = new pclink("上海","上海市"); 
where[2] = new pclink("天津","天津市"); 
where[3] = new pclink("重庆","重庆市"); 
where[4] = new pclink("河北","石家庄|邯郸|邢台|保定|张家口|承德|廊坊|唐山|秦皇岛|沧州|衡水"); 
where[5] = new pclink("山西","太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城"); 
where[6] = new pclink("内蒙古","呼和浩特|包头|乌海|赤峰|呼伦贝尔盟|阿拉善盟|哲里木盟|兴安盟|乌兰察布盟|锡林郭 勒盟|巴彦淖尔盟|伊克昭盟"); 
where[7] = new pclink("辽宁","沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口|阜新|辽阳|盘锦|铁岭|朝阳|葫芦 岛"); 
where[8] = new pclink("吉林","长春|吉林|四平|辽源|通化|白山|松原|白城|延边"); 
where[9] = new pclink("黑龙江","哈尔滨|齐齐哈尔|牡丹江|佳木斯|大庆|绥化|鹤岗|鸡西|黑河|双鸭山|伊春|七台河| 大兴安岭"); 
where[10] = new pclink("江苏","南京|镇江|苏州|南通|扬州|盐城|徐州|连云港|常州|无锡|宿迁|泰州|淮 安"); 
where[11] = new pclink("浙江","杭州|宁波|温州|嘉兴|湖州|绍兴|金华|衢州|舟山|台州|丽水"); 
where[12] = new pclink("安徽","合肥|芜湖|蚌埠|马鞍山|淮北|铜陵|安庆|黄山|滁州|宿州|池州|淮南|巢湖|阜阳| 六安|宣城|亳州"); 
where[13] = new pclink("福建","福州|厦门|莆田|三明|泉州|漳州|南平|龙岩|宁德"); 
where[14] = new pclink("江西","南昌市|景德镇|九江|鹰潭|萍乡|新馀|赣州|吉安|宜春|抚州|上饶"); 
where[15] = new pclink("山东","济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊 城|滨州|菏泽"); 
where[16] = new pclink("河南","郑州|开封|洛阳|平顶山|安阳|鹤壁|新乡|焦作|濮阳|许昌|漯河|三门峡|南阳|商 丘|信阳|周口|驻马店|济源"); 
where[17] = new pclink("湖北","武汉|宜昌|荆州|襄樊|黄石|荆门|黄冈|十堰|恩施|潜江|天门|仙桃|随州|咸宁|孝 感|鄂州");
where[18] = new pclink("湖南","长沙|常德|株洲|湘潭|衡阳|岳阳|邵阳|益阳|娄底|怀化|郴州|永州|湘西|张家 界"); 
where[19] = new pclink("广东","广州|深圳|珠海|汕头|东莞|中山|佛山|韶关|江门|湛江|茂名|肇庆|惠州|梅州|汕 尾|河源|阳江|清远|潮州|揭阳|云浮"); 
where[20] = new pclink("广西","南宁|柳州|桂林|梧州|北海|防城港|钦州|贵港|玉林|南宁地区|柳州地区|贺州|百 色|河池"); 
where[21] = new pclink("海南","海口|三亚"); 
where[22] = new pclink("四川","成都|绵阳|德阳|自贡|攀枝花|广元|内江|乐山|南充|宜宾|广安|达川|雅安|眉山| 甘孜|凉山|泸州"); 
where[23] = new pclink("贵州","贵阳|六盘水|遵义|安顺|铜仁|黔西南|毕节|黔东南|黔南"); 
where[24] = new pclink("云南","昆明|大理|曲靖|玉溪|昭通|楚雄|红河|文山|思茅|西双版纳|保山|德宏|丽江|怒 江|迪庆|临沧");
where[25] = new pclink("西藏","拉萨|日喀则|山南|林芝|昌都|阿里|那曲"); 
where[26] = new pclink("陕西","西安|宝鸡|咸阳|铜川|渭南|延安|榆林|汉中|安康|商洛"); 
where[27] = new pclink("甘肃","兰州|嘉峪关|金昌|白银|天水|酒泉|张掖|武威|定西|陇南|平凉|庆阳|临夏|甘 南"); 
where[28] = new pclink("宁夏","银川|石嘴山|吴忠|固原"); 
where[29] = new pclink("青海","西宁|海东|海南|海北|黄南|玉树|果洛|海西"); 
where[30] = new pclink("新疆","乌鲁木齐|石河子|克拉玛依|伊犁|巴音郭勒|昌吉|克孜勒苏柯尔克孜|博尔塔拉|吐鲁番| 哈密|喀什|和田|阿克苏"); 
where[31] = new pclink("香港","香港"); 
where[32] = new pclink("澳门","澳门"); 
where[33] = new pclink("台湾","台北|高雄|台中|台南|屏东|南投|云林|新竹|彰化|苗栗|嘉义|花莲|桃园|宜兰|基 隆|台东|金门|马祖|澎湖"); 
function select()
{
with(document.pcform.province)
{
var selectedprovince=options[selectedIndex].value;
}
for(i=0;i<where.length;i++)
{
if(where[i].pro==selectedprovince)
{
thiscity=(where[i].pcity).split("|");
for(j=0;j<thiscity.length;j++)
{
with(document.pcform.city)
{
length=thiscity.length;
options[j].text=thiscity[j];
options[j].value=thiscity[j];
var selectedcity=options[selectedIndex].value;
}
}
break;
}
}
document.pcform.procity.value=selectedprovince+selectedcity;
}
function init()
{
with(document.pcform.province)
{
length=where.length;
for(k=0;k<where.length;k++)
{
options[k].text=where[k].pro;
options[k].value=where[k].pro;
}
options[selectedIndex].text=where[0].pro;
options[selectedIndex].value=where[0].pro;
}
with(document.pcform.city)
{
initcity=(where[0].pcity).split("|");
length=initcity.length;
for(n=0;n<length;n++)
{
options[n].text=initcity[n];
options[n].value=initcity[n];
}
options[selectedIndex].text=initcity[0];
options[selectedIndex].value=initcity[0];
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>个人信息</title>
</head>
<body onLoad="init();">
<form name="pcform" action="memberinfo.jsp" method="post">
省份
<select name="province" onChange="select()">
</select>
城市
<select name="city" onChange="select()">
</select>
</form>
</body>
</html>
发贴者 YAO Luxin 时间： 00:48 0 评论
标签：

点击下拉菜单选项,添加选中值到输入框

这是一个下拉选择框与输入框联动的网页特效，点击下拉菜单的选项，直接添加选中值到输入框中，这种效果相信不少朋友见到过吧，省去用户输入的麻烦， 这里使用JS直接将值赋予输入框，了解原理之后，可灵活运用，扩展出更多的特效来。

　　看一下实例代码，当然也可以修改后再运行：




<html>
<head>
<title>下拉选择框与输入框联动，直接添加选中值到输入框 - Liehuo.Net</title>
</head>
<body>
<select id="uiSel">
<option value="-1">请任意选择</option>
<option value="Liehuo.Net_1">Liehuo.Net_1</option>
<option value="Liehuo.Net_2">Liehuo.Net_2</option>
<option value="Liehuo.Net_3">Liehuo.Net_3</option>
<option value="Liehuo.Net_4">Liehuo.Net_4</option>
<option value="Liehuo.Net_5">Liehuo.Net_5</option>
</select>
<input type="text" name="" id="show" />
</body>
<script type="text/javascript">
document.getElementByIdx_x('uiSel').onchange=function (){
if(this.options[0].value==-1)this.options[0]=null;
document.getElementByIdx_x('show').value=this.value
};
</script>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.liehuo.net/' target='_blank'>http://www.liehuo.net/</a></center>



转自： http://www.liehuo.net/a/201004/2515793.html
发贴者 YAO Luxin 时间： 00:46 0 评论
标签：

比较酷的js下拉菜单效果


预览地址：

http://preview.zcool.com.cn/code/js/03/a/
http://preview.zcool.com.cn/code/js/03/b/
http://preview.zcool.com.cn/code/js/03/c/
http://preview.zcool.com.cn/code/js/03/d/
http://preview.zcool.com.cn/code/js/03/e/
http://preview.zcool.com.cn/code/js/03/f/
http://preview.zcool.com.cn/code/js/03/g/
http://preview.zcool.com.cn/code/js/03/h/
http://preview.zcool.com.cn/code/js/03/i/
http://preview.zcool.com.cn/code/js/03/j/
http://preview.zcool.com.cn/code/js/03/k/
http://preview.zcool.com.cn/code/js/03/l/
http://preview.zcool.com.cn/code/js/03/m/
http://preview.zcool.com.cn/code/js/03/n/
http://preview.zcool.com.cn/code/js/03/o/
http://preview.zcool.com.cn/code/js/03/p/
http://preview.zcool.com.cn/code/js/03/q/
http://preview.zcool.com.cn/code/js/03/r/
http://preview.zcool.com.cn/code/js/03/s/

http://tool.alixixi.com/demo/156/156/index.html
http://tool.alixixi.com/demo/126/126/index.html
http://tool.alixixi.com/demo/125/125/index.html
发贴者 YAO Luxin 时间： 00:37 0 评论
标签：