zhichen-edu
/
zc_saas_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>TitleNView Search</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<script>
var ws = null;
// H5 plus事件处理
function plusReady(){
	ws = plus.webview.currentWebview();
	ws.addEventListener('titleNViewSearchInputChanged', function(e){
		console.log('titleNViewSearchInputChanged: '+JSON.stringify(e));
	}, false);
	ws.addEventListener('titleNViewSearchInputConfirmed', function(e){
		console.log('titleNViewSearchInputConfirmed: '+JSON.stringify(e));
	});
	ws.addEventListener('titleNViewSearchInputClicked', function(e){
		clickedSearch();
	}, false);
}
document.addEventListener('plusready', plusReady, false);

// 更新按钮文字
var bSwitch = false;
function changeButton() {
	var t = bSwitch?'呼和浩特市':'北京市';
	bSwitch = !bSwitch;
	ws.setTitleNViewButtonStyle(1, {text:t});
}

// 更新提示文本
var bHolder = false;
function changePlaceholder() {
	var t = bHolder?'点击搜索':'修改后的提示文本';
	bHolder = !bHolder;
	ws.setStyle({titleNView:{searchInput:{
		placeholder: t
	}}});
}
function getPlaceholder() {
	var s = ws.getStyle();
	var p = (s.titleNView&&s.titleNView.searchInput&&s.titleNView.searchInput.placeholder)||'没有设置placeholder';
	plus.nativeUI.toast(p);
}

// 更新搜索文本
var bText = false;
function changeText() {
	var t = bText?'':'输入文本';
	bText = !bText;
	ws.setTitleNViewSearchInputText(t);
}

// 打开搜索界面
var wsearch = null;
function clickedSearch(){
	if(wsearch){	// 避免快速点击打开
		return;
	}
	wsearch = plus.webview.create('webview_searchInput.html', 'searchinput', {
		scrollIndicator: 'none',
		backButtonAutoControl: 'close',
		titleNView: {
			autoBackButton: false,
			'padding': '5px',
			backgroundColor: '#D74B28',
			buttons: [{
				text: '取消',
				color: '#00CCCC',
				fontSize: '16px',
				width: '50px',
				onclick: 'javascript:plus.webview.currentWebview().close("none")'
			}],
			searchInput: {
				align: 'left',
				backgroundColor: '#EEEEEE',
				borderRadius: '15px',
				placeholder: '点击搜索',
				placeholderColor: '#FF0000',
				autoFocus: true
			}
		}
	});
	wsearch.addEventListener('close', function(){
		wsearch = null;
	}, false);
	wsearch.show('fade-in', 300);
}

// 点击按钮
function clickedButton(){
	plus.nativeUI.toast('clicked button!');
	console.log('clicked button!');
}
		</script>
	</head>
	<body>
        <div style="display:flex;">
			<div style="background-color: #CC0000;width:25%;height:200px;"></div>
			<div style="background-color: #00CC00;width:25%;height:200px;"></div>
			<div style="background-color: #0000CC;width:25%;height:200px;"></div>
			<div style="background-color: #ff8800;width:25%;height:200px;"></div>
		</div>
		<br/>
		<br/>
		<p>原生标题栏titleNView搜索框示例</p>
		<br/>
		<div class="button" onclick="changeButton()">修改标题栏按钮文本</div>
		<div class="button" onclick="changePlaceholder()">修改搜索提示placeholder</div>
		<div class="button" onclick="getPlaceholder()">获取搜索提示placeholder</div>
		<div class="button" onclick="changeText()">修改搜索文本</div>
		<br/>
		<div style="width:100%;height:1000px"></div>
	</body>
</html>