php+jquery最新作品（点击首字母刷选）

首先有图有真相：

这是一个用jquery做交互的前端页面，这个页面包含了html元素和css元素。

部分html 代码如下：

[code lang=”html”]
<div class="shanmao bestiary-css">
<div class="kongzhi">
<img src="/cityosweb/gameweb/Tpl/default/shanmaocss/bestiary_abc.jpg" border="0" usemap="#Map" />
<map name="Map" id="gwmap"><area shape="rect" coords="36,28,85,75" alt="a" class="a"><area shape="rect" coords="104,96,153,143" alt="o"><area shape="rect" coords="37,95,86,142" alt="n"><area shape="rect" coords="175,94,224,141" alt="p"><area shape="rect" coords="380,96,429,143" alt="s"><area shape="rect" coords="310,95,359,142" alt="r"><area shape="rect" coords="240,96,289,143" alt="q"><area shape="rect" coords="449,95,498,142" alt="t"><area shape="rect" coords="518,97,567,144" alt="u"><area shape="rect" coords="588,97,637,144" alt="v"><area shape="rect" coords="656,95,705,142" alt="w"><area shape="rect" coords="725,96,774,143" alt="x"><area shape="rect" coords="792,97,841,144" alt="y"><area shape="rect" coords="860,97,909,144" alt="z"><area shape="rect" coords="861,29,910,76" alt="m"><area shape="rect" coords="791,27,840,74" alt="l"><area shape="rect" coords="725,28,774,75" alt="k"><area shape="rect" coords="654,28,703,75" alt="j"><area shape="rect" coords="587,28,636,75" alt="i"><area shape="rect" coords="517,29,566,76" alt="h"><area shape="rect" coords="448,29,497,76" alt="g"><area shape="rect" coords="379,27,428,74" alt="f"><area shape="rect" coords="311,28,360,75" alt="e"><area shape="rect" coords="240,27,289,74" alt="d"><area shape="rect" coords="173,28,222,75" alt="c">
<area shape="rect" coords="105,30,154,77" alt="b">
</map>
</div>

<div class="loading1">
<img src="/img/loading.gif" />
</div>
<div id="gw_content">

<{foreach from="$list" item="val"}>
<div class="bestiary-list">
<div class="bestiary-list-left-pic">
<img src="http://www.cityofsteam.com/cityosweb/upload/wpindexgw/<{$val.gwpic}>" />
</div>
<div class="bestiary-list-right-text">
<div class="bestiary-list-title"><{$val.gwname}></div>
<div class="bestiary-list-content"><{$val.gwdisc}></div>
</div>
</div>
<{/foreach}>

</div>

<div class="clickup">up</div>
<div class="cl"></div>
</div>
[/code]

CSS如下：

[code lang=”css”]
.shanmao.bestiary-css{ padding:393px 0px 0 0px !important; position:relative}
.kongzhi{ position:relative;left:19px; height:178px;}
.bestiary-list{ background:url(__TMPL__shanmaocss/bestiary_list_bg.jpg) no-repeat; width:935px; height:252px; margin-left:26px; position:relative; z-index:99999999}
.bestiary-list.error,.bestiary-list.error:hover{ background:url(__TMPL__shanmaocss/bestiary_list_bg_error.jpg) no-repeat; color:#caa97d;text-shadow:0 1px 1px #000; padding:75px 150px 0 340px; width:450px}
.bestiary-list:hover{ background-position:0 -252px;}
.bestiary-list-left-pic{ width:345px; float:left; text-align:center}
.bestiary-list-left-pic img{ height:196px; margin-top:18px;}
.bestiary-list-right-text{ width:580px; float:left; margin-left:10px}
.bestiary-list-title{ color:#fe7524; font-size:22px; height:65px; line-height:70px;}
.bestiary-list-content{ color:#caa97d; padding:0 20px 0 0; text-shadow:0 1px 1px #000}
#gwmap area { cursor:pointer}
.loading1{ text-align:center; display:none; padding:20px 0}
.clickup{ float:right; margin:0 40px 0 0; position:relative; z-index:8888}
[/code]

js代码如下：
[code lang=”js”]
jQuery(function(){
jQuery(".loading1").ajaxStart(function(){//加载图片显示
jQuery(this).show();
});
jQuery(".loading1").ajaxStop(function(){//加载图片隐藏
jQuery(this).hide();
});
jQuery("#gwmap area").click(function(){
jQuery("#gw_content").html("");
var sdata = jQuery(this).attr("alt");
jQuery.post("/cityosweb/default.php/shanmao/gwquery",{data:sdata},function(data){
if(data.status==1){
jQuery.each(data.data,function(index,val){
//alert(val.gwname);
var str = ""
str = ‘<div class="bestiary-list"><div class="bestiary-list-left-pic"><img src="http://www.cityofsteam.com/cityosweb/upload/wpindexgw/’+val.gwpic+’" /></div><div class="bestiary-list-right-text"><div class="bestiary-list-title">’+val.gwname+'</div><div class="bestiary-list-content">’+val.gwdisc+'</div></div></div>’;
jQuery("#gw_content").append(str);
})
}else{
dtshow = Math.floor(Math.random()*6);
switch(dtshow)
{
case 0:
var str='<div class="bestiary-list error">Currently no entries under this section. Check again in the future!</div>’;
jQuery("#gw_content").append(str);
break;
case 1:
var str='<div class="bestiary-list error">Sorry! There are no entries for this letter yet.</div>’;
jQuery("#gw_content").append(str);
break;
case 2:
var str='<div class="bestiary-list error">The beast you are looking for is in another dungeon. (Or just not written up yet, we\’ll get to it shortly!)</div>’;
jQuery("#gw_content").append(str);
break;
case 3:
var str='<div class="bestiary-list error">Whoops, we don\’t have any entries in this section! Check again later!’;
jQuery("#gw_content").append(str);
break;
case 4:
var str='<div class="bestiary-list error">There is a page missing for this chapter… (We\’ll have it written up soon!)’;
jQuery("#gw_content").append(str);
break;
case 5:
var str='<div class="bestiary-list error">You find… a blank page! No, it\’s not a monster. We just haven\’t written one up for this’;
jQuery("#gw_content").append(str);
break;
}
}
},"json")
})
})
[/code]

php 主要代码：

[code lang=”php”]
public function gwquery(){
if($_POST){
$zm = $_POST[‘data’];
$wzm = $zm."%";
$b = M(‘Wpindexgw’);
$list = $b->where("gwstatus=1 and gwname like ‘$wzm’")->order("time desc")->select();
//dump($list);
if($list){
$this->ajaxReturn($list,’success’,1);
}else{
$this->error("Bestiary not found.");
}
}

}
[/code]

说一些主要代码：

点击的时候发送当前字母到后台php
php执行sql语句匹配查询后返回数据
如果后台没有返回数据的时候前台提示错误：
这里有6个句子提示错误。没点击一次都有可能切换错误提示。
这里就用到了jquery随机数

错误提示效果图：

最后看demo :

http://www.cityofsteam.com/cityosweb/default.php/bestiary