use jquery, remove prototype, later gmaps import

This commit is contained in:
wlx 2011-11-08 06:31:33 +00:00
parent 1c5d3aa343
commit 7fec8c5d1a
1 changed files with 113 additions and 33 deletions

View File

@ -9,13 +9,11 @@
$this->breadcrumb('<a href="/water/">黑河综合遥感联合试验</a>');
$this->breadcrumb('查看试验元数据');
$this->breadcrumb()->setSeparator(' > ');
$this->headScript()->appendFile('http://maps.google.cn/maps?file=api&v=2&key='.$this->config->google->maps->api);
//$this->headScript()->appendFile('http://maps.google.cn/maps?file=api&v=2&key='.$this->config->google->maps->api);
$this->headScript()->appendFile('/js/prototype.js');
$this->headScript()->appendFile('/js/OpenLayers.js');
$this->headScript()->appendFile('/js/window.js');
$this->headScript()->appendFile('/js/pubfunc.js');
$this->headLink()->appendStylesheet('/js/theme/default/style.css');
$this->headScript()->appendFile('/js/jquery-1.7.min.js');
$this->headScript()->appendFile('/js/jquery.colorbox-min.js');
$this->headLink()->appendStylesheet('/css/colorbox.css');
?>
<?php $md=$this->metadata;if ($md):?>
<h1><?php echo $this->escape($md->title);
@ -94,7 +92,7 @@ else
echo $this->doc;
}?>">数据说明文档</a></li>
<?php endif; ?>
<li id="datatype">数据共享方式:<?php if ($md->datatype) print "离线"; else print "在线(可直接下载)";?> <a href="#" id="show-list" rel="<?php echo $md->uuid;?>">文件列表</a></li>
<li id="datatype">数据共享方式:<?php if ($md->datatype) print "离线"; else print "在线(可直接下载)";?> <a href="javascript:void(0);" id="show-list" onclick="getFileList()" title="">文件列表</a></li>
</ul>
<div id="linkurl">
<?php if ($md->status>0 and $md->status<5) : ?>
@ -153,7 +151,7 @@ endforeach;
</div>
<div id="left">
<div id="ImageViewer"><img src="/service/thumb/id/<?php echo $md->id;?>" onclick="fnCreate('<?php echo $this->thumburl; ?>')" /> </div>
<div id="ImageViewer"><a class="colorbox" title="<?php echo $md->title; ?>" href="/service/bigthumb/uuid/<?php echo $md->uuid; ?>"><img src="/service/thumb/uuid/<?php echo $md->uuid;?>" /></a> </div>
<div id="abstract">
<p>
<?php echo str_replace(array("\r\n", "\n", "\r"),'</p><p>',$md->description);?>
@ -220,30 +218,7 @@ endforeach;
<h2>数据评论</h2>
<div id="allcomments">
</div>
<script type="text/javascript">
function loading()
{
$('loading').style.display = 'block';
}
function done()
{
$('loading').style.display = 'none';
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
var request_pars = ''; //请求参数
var myAjax = new Ajax.Updater('allcomments', '/data/comment/uuid/<?= $md->uuid; ?>',{
method : 'get', // http 请求方法,get or post
parameters : request_pars, // 请求参数
onFailure : reportError, // 失败的时候调用 reportError 函数处理
onLoading : loading, // 加载时
onComplete : done // 读取完毕
});
</script>
<?php echo $this->commentForm; ?>
<?php endif; ?>
</div>
@ -251,16 +226,120 @@ function reportError(request)
</div>
<div id="window-outter" style="display:none;">
<div id="window-inner">
<div id="window-closer-container">[<a href="#" id="window-closer">关闭</a>]</div>
<div id="window-closer-container">[<a href="#" id="window-closer" onclick="$('#window-outter').hide()">关闭</a>]</div>
<div id="window-content-container">
<div id="window-loading">加载中...</div>
<div id="window-loading"><img src="/images/loading.gif" />加载中...</div>
<ol id="file-list">
</ol>
</div>
</div>
</div>
<div id="todownload" style="display:none;">
<div class="closeox"><a href="javascript:void(0);" onclick="$('#todownload').hide()">[关闭]</a></div>
<div id="returninfo" style="">
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){$(".colorbox").colorbox({photo:"true"});});
$(window).bind("load", function() { var timeout = setTimeout(function() { initLoader(); }, 100);});
//$(window).bind("load", function() { var timeout = setTimeout(function() { gmaploaded(); }, 1000);});
function loadMaps() {
google.load("maps", "2", {"callback" : gmaploaded,"base_domain": "ditu.google.cn"});
}
function initLoader() {
var script = document.createElement("script");
script.src = "https://www.google.com/jsapi?key=<?php echo $this->config->google->maps->api; ?>&callback=loadMaps";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
//ajax download
function todownload(ft)
{
var url = "/data/todownload/uuid/<?php echo $md->uuid;?>/ft/"+ft;
if($('#todownloadform')) var date = $('#todownloadform').serialize();
$.ajax({
type:"GET",
url:url,
data:date,
success:function(html){
$('#returninfo').html(html);
},
beforeSend:function(){
$('#returninfo').html('<img src="/images/11887177066.gif" />');
}
});
}
//ajax comment
function ajaxpage(page){
var url = "/data/comment/uuid/<?= $md->uuid; ?>";
data='page='+page;
$.ajax({
type:"GET",
url:url,
data:data,
success:function(html){$('#allcomments').html(html);},
beforeSend:function(){$('#allcomments').html('<img src="/images/loading.gif" />评论加载中');}
});
};ajaxpage(0);
function getFileList(){
var tw = ($(window).width() - $('#window-outter').width())/2;
$('#window-outter').css({'right':tw});
$('#window-outter').show();
$.getJSON("/service/filelist/uuid/<?php echo $md->uuid;?>", function(data) {
var items = [];
if(data.length>0)
{
$.each(data, function(key, val) {
if(val['filename'].match(/\/$/))
{
items.push('<li id="li_' + val['id'] + '"><span id="span_'+val['id']+'">+</span> <a href="javascript:;" id="taget_'+val['id']+'" onclick="getSubFileList(\'' +val['uuid']+ '\',\''+val['id']+'\',\''+val['depth']+'\')">' + val['filename'] + '</a></li>');
}else{
items.push('<li id="li_' + val['id'] + '">' + val['filename'] + '</li>');
}
});
}else{
items.push('<li>暂无数据</li>');
}
$('#file-list').html(items.join(''));
})
.complete(function() {$('#window-loading').hide();});
}
function getSubFileList(uuid,id,depth){
if($("#div_"+id).length>0)
{
$('#span_'+id).html('+');
$("#div_"+id).remove();
return false;
}
$('<div/>', {
'style':'max-height:400px; overflow:auto; overflow-x:hidden;',
'id': 'div_'+id,
"html": '<li><img src="/images/loading.gif" />加载中</li>'
}).appendTo('#li_'+id);
url="/service/subfilelist/uuid/"+uuid+"/subpath/"+id+"/depth/"+depth;
$.getJSON(url, function(data) {
var items = [];
$.each(data, function(key, val) {
if(val['filename'].match(/\/$/))
{
items.push('<li id="li_' + val['id'] + '"><span id="span_'+val['id']+'">+</span> <a href="javascript:;" id="taget_'+val['id']+'" onclick="getSubFileList(\'' +val['uuid']+ '\',\''+val['id']+'\',\''+val['depth']+'\')">' + val['filename'] + '</a></li>');
}else{
items.push('<li id="' + key + '">' + val['filename'] + '</li>');
}
});
$("#div_"+id).html(items.join(''));
}).complete(function(){
if($("#div_"+id)){
$('#span_'+id).html('-');
}
});
}
function gmaploaded()
{
var map = new GMap2(document.getElementById("watermap"));
var plotbounds=new GLatLngBounds(new GLatLng(<?= $md->south; ?>,<?= $md->west; ?>),new GLatLng(<?= $md->north; ?>,<?= $md->east; ?>));
var zoomlevel=map.getBoundsZoomLevel(plotbounds);
@ -285,6 +364,7 @@ function reportError(request)
],"#f33f00",5,1,"#ff0000",0.2);
map.addOverlay(polygon);
<?php endif; ?>
}
</script>
<?php else: ?>
<p>Cannot find the metadata.</p>