版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sureSand/article/details/81123710
这一节也比较简单,就是建一个textarea获取用户输入的值,然后调用有道api进行翻译,最后展现在相应位置,需要注意的是,点击头部的翻译按钮自动跳转到翻译页面,并且底部栏点亮样式会随之改变:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<div class="mui-content">
<div style="width:90%; padding-top:38px; margin:0 auto;">
<textarea id="keywords" style="width:100%; height:128px;" placeholder="请输入要翻译的文本"></textarea>
</div>
<div style="width:90%; margin:0 auto;">
<button type="button" id="submitBtn" class="mui-btn" style="width:100%;">开始翻译</button>
</div>
<div style="width:90%; background:#FFFFFF; margin:0 auto; margin-top:18px; display:none;" id="resShow">
<p style="line-height:1.8em; font-size:15px; padding:10px;"></p>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/h.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var _index, _self, _next,_prev;
h('#submitBtn').tap(function(){
var keywords = h('#keywords').val();
if(keywords.length < 1){mui.toast('请输入要翻译的文本'); return false;}
mui.getJSON(
'http://fanyi.youdao.com/openapi.do?keyfrom=testorot&key=1145972070&type=data&doctype=json&version=1.1&q='+keywords,
function(data){
console.log(JSON.stringify(data));
h('#resShow').find('p').html(data.translation);
h('#resShow').show();
}
);
});
mui.plusReady(function(){
_self = plus.webview.currentWebview();
_next = plus.webview.getWebviewById('sub3.html');
_prev = plus.webview.getWebviewById('sub1.html');
_index = plus.webview.getLaunchWebview();
//向右滑动
_self.drag({
direction : "left",
moveMode : "followFinger"
},{
view : _next,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav3").addClass("mui-active")')
}
});
//向左滑动
_self.drag({
direction : "right",
moveMode : "followFinger"
},{
view : _prev,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav1").addClass("mui-active")')
}
});
});
</script>
</body>
</html>
主要代码在这,还需要添加一些css样式,已经加到mui.css尾部了,最后index.html里需要做一个searchBut的触发事件:
h('#searchBut').tap(function(){
changSub(2);
h('#navFooter').find("a").removeClass('mui-active');
h('#nav2').addClass('mui-active');
});