finished basic
This commit is contained in:
parent
7f4533aa7f
commit
9f3eed6829
|
@ -3,4 +3,8 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
min-width: 180px;
|
min-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
}
|
}
|
|
@ -1,6 +1,7 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
<title>demo</title>
|
<title>demo</title>
|
||||||
<link rel="stylesheet" href="./semantic/semantic.min.css">
|
<link rel="stylesheet" href="./semantic/semantic.min.css">
|
||||||
<link rel="stylesheet" href="./dist/base.css">
|
<link rel="stylesheet" href="./dist/base.css">
|
||||||
|
@ -10,10 +11,15 @@
|
||||||
<div class="ui vertical menu" style="border:none">
|
<div class="ui vertical menu" style="border:none">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="ui transparent icon input">
|
<div class="ui transparent icon input">
|
||||||
<input type="text" placeholder="Search...">
|
<input type="text" placeholder="Search..." id="querykey">
|
||||||
<i class="search icon"></i>
|
<i class="search icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<a class="item" id="queryresultitem" style="display: none">
|
||||||
|
<p id="queryresult"></p>
|
||||||
|
</a>
|
||||||
|
|
||||||
<div class="item">
|
<div class="item">
|
||||||
Home
|
Home
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
|
@ -22,14 +28,17 @@
|
||||||
<a class="item">Remove</a>
|
<a class="item">Remove</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="item" id="Browse">
|
|
||||||
<i class="grid layout icon"></i>Browse
|
<a class="item" id="Browse" href="http://rangejs.doukit.org/" target="_blank">
|
||||||
|
<i class="grid layout icon"></i>range.js
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="item">
|
<a class="item">
|
||||||
Messages
|
Messages
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="ui dropdown item">
|
<div class="ui dropdown item">
|
||||||
More
|
<a href="index.html" target="_blank">More..</a>
|
||||||
<i class="dropdown icon"></i>
|
<i class="dropdown icon"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,28 @@
|
||||||
|
function query(key) {
|
||||||
|
if (key == 'abc') {
|
||||||
|
return null;
|
||||||
|
} else {
|
||||||
|
return 'result:' + key;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
$('#querykey').on('input', function(){
|
||||||
|
var searchKey = this.value;
|
||||||
|
var searchResult = query(searchKey);
|
||||||
|
if (searchKey != null && searchKey != '') {
|
||||||
|
$('#queryresult').parent().css({'display' : 'block'});
|
||||||
|
if (searchResult != undefined && searchResult != '') {
|
||||||
|
$('#queryresult').html(searchResult);
|
||||||
|
} else {
|
||||||
|
$('#queryresult').html('未找到相关结果!');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$('#queryresult').parent().css({'display' : 'none'});
|
||||||
|
$('#queryresult').html('');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
var checkPageButton = document.getElementById('Browse');
|
var checkPageButton = document.getElementById('Browse');
|
||||||
checkPageButton.addEventListener('click', function() {
|
checkPageButton.addEventListener('click', function() {
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue