westdc-zf1/application/default/views/scripts/author/metadata-new.phtml

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->author);
$this->headTitle()->setSeparator(' - ');
$this->theme->AppendPlus($this,'jquery');
$this->theme->AppendPlus($this,'jquery_ui');
$this->theme->AppendPlus($this,'google_map_v3');
$this->theme->AppendPlus($this,'google_map_keydragzone');
$this->theme->AppendPlus($this,'colorbox');
$this->headLink()->appendStylesheet('/css/author.css');
$this->headLink()->appendStylesheet('/css/author-metadata.css');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/author">'.$this->config->title->author.'</a>');
$this->breadcrumb('新建数据');
$this->breadcrumb()->setSeparator(' > ');
?>
<!-- 左侧导航 -->
<div id='sidebar'>
    <div id='leftnavi'>
    <?= $this->partial('author/navi.phtml'); ?>
    </div>
</div>
<!-- //左侧导航 -->

<!-- 页面内容 -->
<div id="wapper">
    <div id="tabs-controller">
        <ul>
            <li class="box-shadow"><a class="text-shadow" href="/author/newdata">未提交数据列表</a></li>
            <li class="box-shadow"><a class="text-shadow iframe" href="/service/geonetwork?url=metadata.xmlinsert.form">导入元数据</a></li> 
            <li class="box-shadow"><a class="text-shadow" href="/author/newdata/ac/add-by-template">根据模板新建元数据</a></li>
            <li class="box-shadow"><a class="text-shadow" href="/author/newdata/ac/add-by-data">根据已有数据新建元数据</a></li>
            <li class="box-shadow active"><a class="text-shadow" href="/author/metadata">新建元数据</a></li>
        </ul>
    </div>
    <div class="">
       	<?php if(empty($this->error)) { ?>
        <?php if(!empty($this->uuid)) {
			$F = array();
		}?>
        <form class="form-horizontal well"  id="metadata_temp_value" action="/author/metadata/ac/save" method="post">
        	
        	<input type="hidden" id="temp_uuid" name="uuid" value="<?= empty($this->uuid) ? "":$this->uuid ?>" />
            <fieldset>
                <p class="f_legend">元数据基本信息</p>
                <div class="control-group">
                    <label class="control-label">元数据标题</label>
                    <div class="controls">
                    	<?php $F['title'] = $this->Field['title']['FieldName_temp']; ?>
                        <input type="text" name="<?= $F['title']?>"
                         value="<?= empty($this->data->$F['title']) ? "":$this->data->$F['title'] ?>" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">元数据英文标题</label>
                    <div class="controls">
                    	<?php $F['title_en'] = $this->Field['title_en']['FieldName_temp']; ?>
                        <input type="text" name="<?= $F['title_en']?>" 
                        value="<?= empty($this->data->$F['title_en']) ? "":$this->data->$F['title_en'] ?>" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">元数据简介</label>
                    <div class="controls">
                    	<?php $F['description'] = $this->Field['description']['FieldName_temp']; ?>
                        <textarea name="<?= $F['description']?>"><?= empty($this->data->$F['description']) ? "":$this->data->$F['description'] ?></textarea>
                        <span class="help-block">概括元数据内容</span>
                    </div>
                </div>
                <?php if(empty($this->uuid)) { ?>
                <div class="control-group" id="next_step_button" >
                    <div class="controls">
                        <button type="button" onclick="save()" class="btn btn-green">下一步</button>
                    </div>
                </div>
                <?php } ?>
            </fieldset>
            
            <div id="form_part_b" <?= empty($this->uuid) ?  'style="display:none;"':"" ?>>
            <fieldset>
                <p class="f_legend">时间范围</p>
                <div class="control-group">
                    <label class="control-label">开始时间</label>
                    <div class="controls">
                    	<?php $F['timebegin'] = $this->Field['timebegin']['FieldName_temp']; ?>
                        <input type="text" id="timebegin" name="<?= $F['timebegin']?>" value="<?= empty($this->data->$F['timebegin']) ? "":$this->data->$F['timebegin'] ?>" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">结束时间</label>
                    <div class="controls">
                    	<?php $F['timeend'] = $this->Field['timeend']['FieldName_temp']; ?>
                        <input type="text" id="timeend" name="<?= $F['timeend'] ?>" value="<?= empty($this->data->$F['timeend']) ? "":$this->data->$F['timeend'] ?>" />
                    </div>
                </div>
            </fieldset>
            
            <fieldset>
                <p class="f_legend">空间范围</p>
                <div class="map_input_part">
                    <div class="control-group">
                        <label class="control-label">东</label>
                        <div class="controls">
                        	<?php $F['east'] = $this->Field['east']['FieldName_temp']; ?>
                            <input type="text" id="map_east" name="<?= $F['east'] ?>" class="span2" 
                            value="<?= empty($this->data->$F['east']) ? "":$this->data->$F['east'] ?>" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">南</label>
                        <div class="controls">
                        	<?php $F['south'] = $this->Field['south']['FieldName_temp']; ?>
                            <input type="text" id="map_south" name="<?= $F['south'] ?>" class="span2" 
                            value="<?= empty($this->data->$F['south']) ? "":$this->data->$F['south'] ?>" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">西</label>
                        <div class="controls">
                        	<?php $F['west'] = $this->Field['west']['FieldName_temp']; ?>
                            <input type="text" id="map_west" name="<?= $F['west'] ?>" class="span2" 
                            value="<?= empty($this->data->$F['west']) ? "":$this->data->$F['west'] ?>" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">北</label>
                        <div class="controls">
                        	<?php $F['north'] = $this->Field['north']['FieldName_temp']; ?>
                            <input type="text" id="map_north" name="<?= $F['north'] ?>" class="span2" 
                            value="<?= empty($this->data->$F['north']) ? "":$this->data->$F['north'] ?>" />
                        </div>
                    </div>
                    <div class="control-group">
                        按住键盘上“Shift”键可以直接在地图上用鼠标拖动选取
                    </div>
                </div>
                <div class="map_display_part" id="map_canvas">
                	
                </div>
            </fieldset>
            
            <fieldset>
                <p class="f_legend">数据引用方式</p>
                <div class="control-group">
                    <div class="controls">
                    	<?php $F['citation'] = $this->Field['citation']['FieldName_temp']; ?>
                        <input type="text" name="<?= $F['citation'] ?>" class="span8" 
                        value="<?= empty($this->data->$F['citation']) ? "":$this->data->$F['citation'] ?>" />
                    </div>
                </div>
            </fieldset>
            
            <fieldset>
                <p class="f_legend">参考文献</p>
                <div class="control-group control-group-reference" id="reference_1st">
                    <div class="controls">
                    	<?php $F['reference'] = $this->Field['reference']['FieldName_temp']; ?>
                        <?php if(isset($this->data->$F['reference']) && count($this->data->$F['reference'])>0)
						{
							foreach($this->data->$F['reference'] as $k=>$v)
							{?>
								<input type="text" name="<?= $F['reference'] ?>[]" class="span8"
                         		value="<?= $v ?>" />
							<?php }
						}else{?>
							<input type="text" name="<?= $F['reference'] ?>[]" class="span8"
                         		value="" />
						<?php }
						?>
                    </div>
                </div>
                <div class="control-group">
                    <a href="javascript:void(0);" onclick="AddInput('reference')">+ 再添加一条</a>
                </div>
            </fieldset>
            
            <fieldset>
                <p class="f_legend">联系人</p>
                <?php $F['contact'] = $this->Field['contact']['FieldName_temp']; ?>
                <?php if(isset($this->data->$F['reference']) && count($this->data->$F['reference'])>0)
				{
					$index = 0;
				foreach($this->data->$F['contact'] as $k=>$v)
				{
					$index++ ;?>
                <div class="control-group control-group-contact" id="contact_1st">
                    <div class="controls">
					<input type="text" name="<?= $F['contact'] ?>[<?= $index ?>][name]" class="span3" value="<?= $v->name ?>" />
                    <input type="text" name="<?= $F['contact'] ?>[<?= $index ?>][email]" class="span3" value="<?= $v->email ?>" />
                    <select type="text" name="<?= $F['contact'] ?>[<?= $index ?>][type]" class="span3">
                        <option value="0">请选择联系人职能</option>
                        <?php 
                        foreach($this->Field['contact']['options'] as $va)
                        {
                            if($v->type == $va)
                            {
                                echo '<option value="'.$va.'" selected="selected">'.$va.'</option>'."\r\n";
                            }else{
                                echo '<option value="'.$va.'">'.$va.'</option>'."\r\n";
                            }
                        }
                        ?>
                    </select>
                	</div>
				</div>
				<?php }
				}else{ ?>
				<div class="control-group control-group-contact" id="contact_1st">
                    <div class="controls">
                    	<input type="text" name="<?= $F['contact'] ?>[1][name]" class="span3 contact_name" value=""  />
                        <input type="text" name="<?= $F['contact'] ?>[1][email]" class="span3 contact_email" value="" />
                        <select type="text" name="<?= $F['contact'] ?>[1][type]" class="span3">
                            <option value="0">请选择联系人职能</option>
                            <?php 
                            foreach($this->Field['contact']['options'] as $va)
                            {
                                echo '<option value="'.$va.'">'.$va.'</option>'."\r\n";
                            }
                            ?>
                        </select>
                    </div>
				</div>
				<?php } ?>
                <div class="control-group">
                    <a href="javascript:void(0);" onclick="AddInput('contact')">+ 再添加一条</a>
                </div>
            </fieldset>
            
            <div class="control-group">
            	<div class="controls">
					<button type="button" onclick="save(0)" class="btn btn-green">保存草稿</button> 
                    <button type="button" onclick="save(1)" class="btn btn-green">提交元数据</button> 
				</div>
            </div>
            
            </div>
            
        </form>
        <?php } else { ?>
        <?= $this->error;?>
        <?php } ?>
    </div>
</div>
<!-- //页面内容 -->
<script>
$('#wapper').width($('body').width()-300);

$(function() {
	//Google map (不启用预先加载)
	google.maps.event.addDomListener(window, 'load', initialize);
	
	//jquery ui datepicker
	$("#timebegin").datepicker({dateFormat:"yy-mm-dd"});
	$("#timeend").datepicker({dateFormat:"yy-mm-dd"});
	
	//jquery colorbox
	$(".inline").colorbox({inline:true, width:"50%"});
	$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); 
	
	//Form
	InputTextSet();
});

// Metadata Commit Part

function getValue(){
	return $('#metadata_temp_value').serialize();
}

function save(s){
	var postdata = "";
	if(s>0)
	{
		postdata = 'ac=save&commit=1&' + getValue();
	}else{
		postdata = 'ac=save&' + getValue();
	}
	$.ajax({
		'type':"POST",
		'url':'/author/metadata/',
		'data': postdata,
		'success':function(data){
			if (typeof(data)=='object')
			{
			 	if(typeof(data.error)!='undefined')
			 	{Alert(data.error);}
			 	if(typeof(data.deleted)!='undefined')
			 	{$('#list_'+data.deleted).fadeOut("slow",function(){$(this).remove();});}
				if(typeof(data.complete) != 'underfined')
				{
					self.location='/author/metadata/';
				}
				if(typeof(data.uuid)!='undefined')
				{
					$('#temp_uuid').val(data.uuid);$('#form_part_b').css('display','block');$('#next_step_button').hide();initialize()
				}
			}
			else{ 
			  $.colorbox({'innerWidth':'50%','html':'<img src="/images/alert_big_warning.png" /><h4>出现错误，请稍候再试</h4>'});
			}
		},
		'timeout': 30000,
		'error': function(){
			$.colorbox({'innerWidth':'50%','html':'<img src="/images/alert_big_error.png" /><h4>处理中出现错误，请刷新页面后重试</h4>'});
		 }
	});
  	postdata = null;
}

// Metadata Commit Part --End

//Form element
function AddInput(name){
	$('.control-group-' + name).last().after(SelectInputTemplate(name));
	InputTextSet();
}

function SelectInputTemplate(name){
	
	if(name == 'reference')
	{
		html = ' <div class="control-group control-group-reference">'
               +'     <div class="controls">'
               +'         <input type="text" name="<?= $this->Field['reference']['FieldName_temp']?>[]" class="span8" />'
               +'     </div>'
               +' </div>';
		return html;
	}
	
	if(name == 'contact')
	{
		var now_index = $('.control-group-contact').length;
		var index = now_index + 1;
		html = '<div class="control-group control-group-contact">'
               +     '<div class="controls">'
               +         '<input type="text" name="contact[' + index + '][name]" class="span3 contact_name" /> '
               +         '<input type="text" name="contact[' + index + '][email]" class="span3 contact_email" /> '
               +         '<select type="text" name="contact[' + index + '][type]" class="span3">'
			   +         '<option value="0">请选择联系人职能</option>'
                        	<?php 
							foreach($this->Field['contact']['options'] as $v)
							{
								echo '+ \'<option value="'.$v.'">'.$v.'</option>\'';
							}
							?>
               +         '</select>'
               +     '</div>'
               + '</div>';
		now_index = null;
		index = null;
		return html;
	}
}

(function( $ ){

  $.fn.inputbg = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
		val  : '姓名'
    }, options);

    this.each(function() {        
		if($(this).val() == '')
		{
			$(this).val(options.val);
		}
    });
	
	this.bind('focus',function(){
		if($(this).val() == options.val)
		{
			$(this).val('');
		}
	});
	this.bind('blur',function(){
		if($(this).val() == '')
		{
			$(this).val(options.val);
		}
	});

  };
})( jQuery );

function InputTextSet(){
	$('.contact_name').inputbg({'val':'姓名'});
	$('.contact_email').inputbg({'val':'Email'});
}

// Google Map Part
var map = null;
var mapElementID = "map_canvas";
var bounds = null;
var rectangle = null;
var input = {east:'#map_east',west:'#map_west',north:'#map_north',south:'#map_south'};

function initialize() {
	//加载地图
	var myLatlng = new google.maps.LatLng(35.656456,105.819946);
	var myOptions = {
		zoom: 3,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById(mapElementID), myOptions);
	
	//Keydragzone
	map.enableKeyDragZoom({
	  key: "shift", 
	  boxStyle: {
		border: "1px dashed black",
		backgroundColor: "transparent",
		opacity: 1.0
	  },
	  veilStyle: {
		backgroundColor: "white",
		opacity: 0.35,
		cursor: "crosshair"
	  }
	});
	
	var dz = map.getDragZoomObject();
	google.maps.event.addListener(dz, 'dragstart', function (latlng) {
		RemoveRectangle();
		//console.dir(latlng);
	});
	google.maps.event.addListener(dz, 'dragend', function (latlng) {
		MapValueChange(latlng.ca.d,latlng.Z.d,latlng.ca.b,latlng.Z.b);
		setRectangle(latlng.ca.d,latlng.ca.b,latlng.Z.b,latlng.Z.d);
		//console.dir(latlng);
	});

}

function setRectangle(east,west,south,north){
	
	bounds = new google.maps.LatLngBounds(
	  new google.maps.LatLng(south,west),
	  new google.maps.LatLng(north,east)
	);

	rectangle = new google.maps.Rectangle({
	  bounds: bounds,
	  editable: true
	});
	
	rectangle.setMap(map);
	
	google.maps.event.addListener(rectangle, 'bounds_changed', function () {
		var latlng = rectangle.getBounds();
		MapValueChange(latlng.ca.d,latlng.Z.d,latlng.ca.b,latlng.Z.b);
		//console.dir(latlng);
	});
	
}

function RemoveRectangle(){
	if(rectangle != null)
	{
		rectangle.setMap(null);
		rectangle = null;
	}
}

function MapValueChange(east,north,west,south){
	$(input.east).val(east);
	$(input.north).val(north);
	$(input.west).val(west);
	$(input.south).val(south);
}

function InputValueChange(){
	if($(input.east).val() != "" && $(input.west).val() != "" && $(input.north).val() != "" && $(input.south).val() != "")
	{
		if(rectangle == null)
		{
			setRectangle($(input.east).val(),$(input.west).val(),$(input.south).val(),$(input.north).val());
		}else{
			var reSetBounds = new google.maps.LatLngBounds(
				new google.maps.LatLng($(input.south).val(),$(input.west).val()),
				new google.maps.LatLng($(input.north).val(),$(input.east).val())
			);
			rectangle.setBounds(reSetBounds);
		}
	}
}

$(input.east).bind('blur',InputValueChange);
$(input.west).bind('blur',InputValueChange);
$(input.north).bind('blur',InputValueChange);
$(input.south).bind('blur',InputValueChange);

// Google map Part --End


function Alert(content){
	$.colorbox({innerWidth:'40%',html:'<div style="line-height:30px;font-size:16px;">'+ content +'</div>'});
}
</script>