Cordova Android 构建上的可过滤表的 Javascript?
当我陷入困境时,非常感谢任何帮助!
简而言之,我在 Android 的 Cordova 构建上有一个可过滤表。在 PC 上测试时工作正常,但是当 Cordova 构建到 Android 应用程序中时,可过滤表不起作用。
当输入搜索输入时,什么也没有发生。
代码如下,正如你所看到的,我认为我已经设置了正确的 META 标签...真的不确定为什么当其他 Javascript 工作没有问题时这在构建中不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" name="viewport">
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
<title>Officerr</title>
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css">
<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
<link href="fonts/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<link data-pwa-version="set_in_manifest_and_pwa_js" href="_manifest.json" rel="manifest">
<link href="app/icons/icon-192x192.png" rel="apple-touch-icon" sizes="180x180">
</head>
<body class="theme-light" data-gradient="body-default" data-highlight="highlight-red">
<div id="preloader">
<div class="spinner-border color-highlight" role="status">
</div>
</div>
<div id="page">
<div class="header header-fixed header-logo-center">
<a class="header-title" href="#">Categories</a> <a class="header-icon header-icon-1" data-back-button="" href="#"><i class="fas fa-arrow-left"></i></a>
</div>
<div id="footer-bar" class="footer-bar-1">
<a href="index.html"><i class="fa fa-search"></i><span>Search</span></a>
<a href="categories.html" class="active-nav"><i class="fa fa-gavel"></i><span>Categories</span></a>
<a href="a-z.html"><i class="fa fa-briefcase"></i><span>A-Z</span></a>
<a href="directory.html"><i class="fa fa-user"></i><span>Directory</span></a>
<a href="info.html"><i class="fa fa-info"></i><span>Info</span></a>
</div>
<div class="page-content header-clear-medium">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
<table id="myTable">
<tr class="header1"><td>A</td></tr>
<tr>
<td><a href="category-aide-memoires.html" id="table-link"><b>Aide Memoires</b></a>
</td>
</tr>
<tr>
<td><a href="category-animals.html" id="table-link"><b>Animals</b></a>
</td>
</tr>
<tr>
<td><a href="category-armed-forces.html" id="table-link"><b>Armed Forces</b></a>
</td>
</tr>
<tr>
<td><a href="category-assault.html" id="table-link"><b>Assault</b></a>
</td>
</tr>
<tr class="header1"><td>B</td></tr>
<tr class="header1"><td>C</td></tr>
<tr>
<td><a href="category-children.html" id="table-link"><b>Children</b></a>
</td>
</tr>
<tr>
<td><a href="category-criminal-damage.html" id="table-link"><b>Criminal Damage</b></a>
</td>
</tr>
<tr class="header1"><td>D</td></tr>
<tr>
<td><a href="category-drugs.html" id="table-link"><b>Drugs</b></a>
</td>
</tr>
<tr class="header1"><td>E</td></tr>
<tr>
<td><a href="category-environment.html" id="table-link"><b>Environment</b></a>
</td>
</tr>
<tr class="header1"><td>F</td></tr>
<tr>
<td><a href="category-firearms.html" id="table-link"><b>Firearms</b></a>
</td>
</tr>
<tr>
<td><a href="category-fireworks.html" id="table-link"><b>Fireworks</b></a>
</td>
</tr>
<tr>
<td><a href="category-fraud.html" id="table-link"><b>Fraud</b></a>
</td>
</tr>
<tr class="header1"><td>G</td></tr>
<tr class="header1"><td>H</td></tr>
<tr>
<td><a href="category-harassment.html" id="table-link"><b>Harassment</b></a>
</td>
</tr>
<tr>
<td><a href="category-human-rights.html" id="table-link"><b>Human Rights</b></a>
</td>
<tr class="header1"><td>I</td></tr>
<tr>
<td><a href="category-immigration.html" id="table-link"><b>Immigration</b></a>
</td>
</tr>
<tr class="header1"><td>J</td></tr>
<tr class="header1"><td>K</td></tr>
<tr class="header1"><td>L</td></tr>
<tr class="header1"><td>M</td></tr>
<tr>
<td><a href="category-mental-health.html" id="table-link"><b>Mental Health</b></a>
</td>
</tr>
<tr class="header1"><td>N</td></tr>
<tr class="header1"><td>O</td></tr>
<tr class="header1"><td>P</td></tr>
<tr>
<td><a href="category-pace.html" id="table-link"><b>PACE</b></a>
</td>
</tr>
<tr>
<td><a href="category-police-and-courts.html" id="table-link"><b>Police & Courts</b></a>
</td>
</tr>
<tr>
<td><a href="category-public-order.html" id="table-link"><b>Public Order</b></a>
</td>
</tr>
<tr class="header1"><td>Q</td></tr>
<tr class="header1"><td>R</td></tr>
<tr>
<td><a href="category-railway-offences.html" id="table-link"><b>Railway Offences</b></a>
</td>
</tr>
<tr class="header1"><td>S</td></tr>
<tr>
<td><a href="category-sexual-offences.html" id="table-link"><b>Sexual Offences</b></a>
</td>
</tr>
<tr>
<td><a href="category-sporting-offences.html" id="table-link"><b>Sporting Offences</b></a>
</td>
</tr>
<tr>
<td><a href="category-stop-and-search.html" id="table-link"><b>Stop & Search</b></a>
</td>
</tr>
<tr class="header1"><td>T</td></tr>
<tr>
<td><a href="category-terrorism.html" id="table-link"><b>Terrorism</b></a>
</td>
</tr>
<tr>
<td><a href="category-theft.html" id="table-link"><b>Theft</b></a>
</td>
</tr>
<tr>
<td><a href="category-traffic.html" id="table-link"><b>Traffic</b></a>
</td>
</tr>
<tr class="header1"><td>U</td></tr>
<tr>
<td><a href="category-use-of-force.html" id="table-link"><b>Use of Force</b></a>
</td>
</tr>
<tr class="header1"><td>V</td></tr>
<tr class="header1"><td>W</td></tr>
<tr>
<td><a href="category-weapons-and-bladed-articles.html" id="table-link"><b>Weapons & Bladed Articles</b></a>
</td>
</tr>
<tr class="header1"><td>X</td></tr>
<tr class="header1"><td>Y</td></tr>
<tr class="header1"><td>Z</td></tr>
</table>
</div>
<!-- End of Page Content-->
<!-- All Menus, Action Sheets, Modals, Notifications, Toasts, Snackbars get Placed outside the <div class="page-content"> -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-settings">
<div class="menu-title mt-0 pt-0">
<h1>Settings</h1>
<p class="color-highlight">Flexible and Easy to Use</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="list-group list-custom-small">
<a class="pb-2 ms-n1" data-toggle-theme="" data-trigger-switch="switch-dark-mode" href="#"><i class="fa font-12 fa-moon rounded-s bg-highlight color-white me-3"></i> <span>Dark Mode</span></a>
<div class="custom-control scale-switch ios-switch">
<input class="ios-input" data-toggle-theme="" id="switch-dark-mode" type="checkbox"> <label class="custom-control-label" for="switch-dark-mode"></label>
</div>
<i class="fa fa-angle-right"></i>
</div>
<div class="list-group list-custom-large">
<a data-menu="menu-highlights" href="#"><i class="fa font-14 fa-tint bg-green-dark rounded-s"></i> <span>Page Highlight</span> <strong>16 Colors Highlights Included</strong> <span class="badge bg-highlight color-white">HOT</span> <i class="fa fa-angle-right"></i></a> <a class="border-0" data-menu="menu-backgrounds" href="#"><i class="fa font-14 fa-cog bg-blue-dark rounded-s"></i> <span>Background Color</span> <strong>10 Page Gradients Included</strong> <span class="badge bg-highlight color-white">NEW</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Menu Settings Highlights-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-highlights">
<div class="menu-title">
<h1>Highlights</h1>
<p class="color-highlight">Any Element can have a Highlight Color</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="highlight-changer">
<a data-change-highlight="blue" href="#"><i class="fa fa-circle color-blue-dark"></i><span class="color-blue-light">Default</span></a> <a data-change-highlight="red" href="#"><i class="fa fa-circle color-red-dark"></i><span class="color-red-light">Red</span></a> <a data-change-highlight="orange" href="#"><i class="fa fa-circle color-orange-dark"></i><span class="color-orange-light">Orange</span></a> <a data-change-highlight="pink2" href="#"><i class="fa fa-circle color-pink2-dark"></i><span class="color-pink-dark">Pink</span></a> <a data-change-highlight="magenta" href="#"><i class="fa fa-circle color-magenta-dark"></i><span class="color-magenta-light">Purple</span></a> <a data-change-highlight="aqua" href="#"><i class="fa fa-circle color-aqua-dark"></i><span class="color-aqua-light">Aqua</span></a> <a data-change-highlight="teal" href="#"><i class="fa fa-circle color-teal-dark"></i><span class="color-teal-light">Teal</span></a> <a data-change-highlight="mint" href="#"><i class="fa fa-circle color-mint-dark"></i><span class="color-mint-light">Mint</span></a> <a data-change-highlight="green" href="#"><i class="fa fa-circle color-green-light"></i><span class="color-green-light">Green</span></a> <a data-change-highlight="grass" href="#"><i class="fa fa-circle color-green-dark"></i><span class="color-green-dark">Grass</span></a> <a data-change-highlight="sunny" href="#"><i class="fa fa-circle color-yellow-light"></i><span class="color-yellow-light">Sunny</span></a> <a data-change-highlight="yellow" href="#"><i class="fa fa-circle color-yellow-dark"></i><span class="color-yellow-light">Goldish</span></a> <a data-change-highlight="brown" href="#"><i class="fa fa-circle color-brown-dark"></i><span class="color-brown-light">Wood</span></a> <a data-change-highlight="night" href="#"><i class="fa fa-circle color-dark-dark"></i><span class="color-dark-light">Night</span></a> <a data-change-highlight="dark" href="#"><i class="fa fa-circle color-dark-light"></i><span class="color-dark-light">Dark</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Settings Backgrounds-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-backgrounds">
<div class="menu-title">
<h1>Backgrounds</h1>
<p class="color-highlight">Change Page Color Behind Content Boxes</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="background-changer">
<a data-change-background="default" href="#"><i class="bg-theme"></i><span class="color-dark-dark">Default</span></a> <a data-change-background="plum" href="#"><i class="body-plum"></i><span class="color-plum-dark">Plum</span></a> <a data-change-background="magenta" href="#"><i class="body-magenta"></i><span class="color-dark-dark">Magenta</span></a> <a data-change-background="dark" href="#"><i class="body-dark"></i><span class="color-dark-dark">Dark</span></a> <a data-change-background="violet" href="#"><i class="body-violet"></i><span class="color-violet-dark">Violet</span></a> <a data-change-background="red" href="#"><i class="body-red"></i><span class="color-red-dark">Red</span></a> <a data-change-background="green" href="#"><i class="body-green"></i><span class="color-green-dark">Green</span></a> <a data-change-background="sky" href="#"><i class="body-sky"></i><span class="color-sky-dark">Sky</span></a> <a data-change-background="orange" href="#"><i class="body-orange"></i><span class="color-orange-dark">Orange</span></a> <a data-change-background="yellow" href="#"><i class="body-yellow"></i><span class="color-yellow-dark">Yellow</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Share -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-share">
<div class="menu-title mt-n1">
<h1>Share the Love</h1>
<p class="color-highlight">Just Tap the Social Icon. We'll add the Link</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="content mb-0">
<div class="divider mb-0">
</div>
<div class="list-group list-custom-small list-icon-0">
<a class="shareToFacebook external-link" href="auto_generated"><i class="font-18 fab fa-facebook-square color-facebook"></i> <span class="font-13">Facebook</span> <i class="fa fa-angle-right"></i></a> <a class="shareToTwitter external-link" href="auto_generated"><i class="font-18 fab fa-twitter-square color-twitter"></i> <span class="font-13">Twitter</span> <i class="fa fa-angle-right"></i></a> <a class="shareToLinkedIn external-link" href="auto_generated"><i class="font-18 fab fa-linkedin color-linkedin"></i> <span class="font-13">LinkedIn</span> <i class="fa fa-angle-right"></i></a> <a class="shareToWhatsApp external-link" href="auto_generated"><i class="font-18 fab fa-whatsapp-square color-whatsapp"></i> <span class="font-13">WhatsApp</span> <i class="fa fa-angle-right"></i></a> <a class="shareToMail external-link border-0" href="auto_generated"><i class="font-18 fa fa-envelope-square color-mail"></i> <span class="font-13">Email</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Be sure this is on your main visiting page, for example, the index.html page-->
<!-- Install Prompt for Android -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-android">
<div class="boxed-text-l mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p>Install Sticky on your home screen, and access it just like a regular app. It really is that simple!</p>
<a class="pwa-install btn btn-s rounded-s shadow-l text-uppercase font-900 bg-highlight mb-2" href="#">Add to Home Screen</a><br>
<a class="pwa-dismiss close-menu color-gray-dark text-uppercase font-900 opacity-60 font-10 pt-2" href="#">Maybe later</a>
<div class="clear">
</div>
</div>
</div>
<!-- Install instructions for iOS -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-ios">
<div class="boxed-text-xl mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p class="mb-0 pb-0">Install Sticky, and access it like a regular app. Open your Safari menu and tap "Add to Home Screen".</p>
<div class="clearfix pt-3">
</div>
<a class="pwa-dismiss close-menu color-highlight text-uppercase font-700" href="#">Maybe later</a>
</div>
</div>
</div>
<script src="cordova.js" type="text/javascript">
</script>
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script type="text/javascript">
var deviceReady = function(){
if(window.MobileAccessibility){
window.MobileAccessibility.usePreferredTextZoom(false);
}
}
document.addEventListener('deviceready', deviceReady, false);
</script>
<script src="scripts/bootstrap.min.js">
</script>
<script src="scripts/custom.js">
</script>
</body>
</html>
Any help massively appreciated as I am stuck!
In short, I have a filterable table on a Cordova build for Android. Works fine when testing on PC, but when build by Cordova into Android app, the filterable table does not work.
When a search input is entered, nothing happens.
The code is below, as you can see I think I have the correct META tags in place... really unsure why this isnt working within the build when other Javascript works no problme.
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" name="viewport">
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
<title>Officerr</title>
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css">
<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
<link href="fonts/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<link data-pwa-version="set_in_manifest_and_pwa_js" href="_manifest.json" rel="manifest">
<link href="app/icons/icon-192x192.png" rel="apple-touch-icon" sizes="180x180">
</head>
<body class="theme-light" data-gradient="body-default" data-highlight="highlight-red">
<div id="preloader">
<div class="spinner-border color-highlight" role="status">
</div>
</div>
<div id="page">
<div class="header header-fixed header-logo-center">
<a class="header-title" href="#">Categories</a> <a class="header-icon header-icon-1" data-back-button="" href="#"><i class="fas fa-arrow-left"></i></a>
</div>
<div id="footer-bar" class="footer-bar-1">
<a href="index.html"><i class="fa fa-search"></i><span>Search</span></a>
<a href="categories.html" class="active-nav"><i class="fa fa-gavel"></i><span>Categories</span></a>
<a href="a-z.html"><i class="fa fa-briefcase"></i><span>A-Z</span></a>
<a href="directory.html"><i class="fa fa-user"></i><span>Directory</span></a>
<a href="info.html"><i class="fa fa-info"></i><span>Info</span></a>
</div>
<div class="page-content header-clear-medium">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
<table id="myTable">
<tr class="header1"><td>A</td></tr>
<tr>
<td><a href="category-aide-memoires.html" id="table-link"><b>Aide Memoires</b></a>
</td>
</tr>
<tr>
<td><a href="category-animals.html" id="table-link"><b>Animals</b></a>
</td>
</tr>
<tr>
<td><a href="category-armed-forces.html" id="table-link"><b>Armed Forces</b></a>
</td>
</tr>
<tr>
<td><a href="category-assault.html" id="table-link"><b>Assault</b></a>
</td>
</tr>
<tr class="header1"><td>B</td></tr>
<tr class="header1"><td>C</td></tr>
<tr>
<td><a href="category-children.html" id="table-link"><b>Children</b></a>
</td>
</tr>
<tr>
<td><a href="category-criminal-damage.html" id="table-link"><b>Criminal Damage</b></a>
</td>
</tr>
<tr class="header1"><td>D</td></tr>
<tr>
<td><a href="category-drugs.html" id="table-link"><b>Drugs</b></a>
</td>
</tr>
<tr class="header1"><td>E</td></tr>
<tr>
<td><a href="category-environment.html" id="table-link"><b>Environment</b></a>
</td>
</tr>
<tr class="header1"><td>F</td></tr>
<tr>
<td><a href="category-firearms.html" id="table-link"><b>Firearms</b></a>
</td>
</tr>
<tr>
<td><a href="category-fireworks.html" id="table-link"><b>Fireworks</b></a>
</td>
</tr>
<tr>
<td><a href="category-fraud.html" id="table-link"><b>Fraud</b></a>
</td>
</tr>
<tr class="header1"><td>G</td></tr>
<tr class="header1"><td>H</td></tr>
<tr>
<td><a href="category-harassment.html" id="table-link"><b>Harassment</b></a>
</td>
</tr>
<tr>
<td><a href="category-human-rights.html" id="table-link"><b>Human Rights</b></a>
</td>
<tr class="header1"><td>I</td></tr>
<tr>
<td><a href="category-immigration.html" id="table-link"><b>Immigration</b></a>
</td>
</tr>
<tr class="header1"><td>J</td></tr>
<tr class="header1"><td>K</td></tr>
<tr class="header1"><td>L</td></tr>
<tr class="header1"><td>M</td></tr>
<tr>
<td><a href="category-mental-health.html" id="table-link"><b>Mental Health</b></a>
</td>
</tr>
<tr class="header1"><td>N</td></tr>
<tr class="header1"><td>O</td></tr>
<tr class="header1"><td>P</td></tr>
<tr>
<td><a href="category-pace.html" id="table-link"><b>PACE</b></a>
</td>
</tr>
<tr>
<td><a href="category-police-and-courts.html" id="table-link"><b>Police & Courts</b></a>
</td>
</tr>
<tr>
<td><a href="category-public-order.html" id="table-link"><b>Public Order</b></a>
</td>
</tr>
<tr class="header1"><td>Q</td></tr>
<tr class="header1"><td>R</td></tr>
<tr>
<td><a href="category-railway-offences.html" id="table-link"><b>Railway Offences</b></a>
</td>
</tr>
<tr class="header1"><td>S</td></tr>
<tr>
<td><a href="category-sexual-offences.html" id="table-link"><b>Sexual Offences</b></a>
</td>
</tr>
<tr>
<td><a href="category-sporting-offences.html" id="table-link"><b>Sporting Offences</b></a>
</td>
</tr>
<tr>
<td><a href="category-stop-and-search.html" id="table-link"><b>Stop & Search</b></a>
</td>
</tr>
<tr class="header1"><td>T</td></tr>
<tr>
<td><a href="category-terrorism.html" id="table-link"><b>Terrorism</b></a>
</td>
</tr>
<tr>
<td><a href="category-theft.html" id="table-link"><b>Theft</b></a>
</td>
</tr>
<tr>
<td><a href="category-traffic.html" id="table-link"><b>Traffic</b></a>
</td>
</tr>
<tr class="header1"><td>U</td></tr>
<tr>
<td><a href="category-use-of-force.html" id="table-link"><b>Use of Force</b></a>
</td>
</tr>
<tr class="header1"><td>V</td></tr>
<tr class="header1"><td>W</td></tr>
<tr>
<td><a href="category-weapons-and-bladed-articles.html" id="table-link"><b>Weapons & Bladed Articles</b></a>
</td>
</tr>
<tr class="header1"><td>X</td></tr>
<tr class="header1"><td>Y</td></tr>
<tr class="header1"><td>Z</td></tr>
</table>
</div>
<!-- End of Page Content-->
<!-- All Menus, Action Sheets, Modals, Notifications, Toasts, Snackbars get Placed outside the <div class="page-content"> -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-settings">
<div class="menu-title mt-0 pt-0">
<h1>Settings</h1>
<p class="color-highlight">Flexible and Easy to Use</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="list-group list-custom-small">
<a class="pb-2 ms-n1" data-toggle-theme="" data-trigger-switch="switch-dark-mode" href="#"><i class="fa font-12 fa-moon rounded-s bg-highlight color-white me-3"></i> <span>Dark Mode</span></a>
<div class="custom-control scale-switch ios-switch">
<input class="ios-input" data-toggle-theme="" id="switch-dark-mode" type="checkbox"> <label class="custom-control-label" for="switch-dark-mode"></label>
</div>
<i class="fa fa-angle-right"></i>
</div>
<div class="list-group list-custom-large">
<a data-menu="menu-highlights" href="#"><i class="fa font-14 fa-tint bg-green-dark rounded-s"></i> <span>Page Highlight</span> <strong>16 Colors Highlights Included</strong> <span class="badge bg-highlight color-white">HOT</span> <i class="fa fa-angle-right"></i></a> <a class="border-0" data-menu="menu-backgrounds" href="#"><i class="fa font-14 fa-cog bg-blue-dark rounded-s"></i> <span>Background Color</span> <strong>10 Page Gradients Included</strong> <span class="badge bg-highlight color-white">NEW</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Menu Settings Highlights-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-highlights">
<div class="menu-title">
<h1>Highlights</h1>
<p class="color-highlight">Any Element can have a Highlight Color</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="highlight-changer">
<a data-change-highlight="blue" href="#"><i class="fa fa-circle color-blue-dark"></i><span class="color-blue-light">Default</span></a> <a data-change-highlight="red" href="#"><i class="fa fa-circle color-red-dark"></i><span class="color-red-light">Red</span></a> <a data-change-highlight="orange" href="#"><i class="fa fa-circle color-orange-dark"></i><span class="color-orange-light">Orange</span></a> <a data-change-highlight="pink2" href="#"><i class="fa fa-circle color-pink2-dark"></i><span class="color-pink-dark">Pink</span></a> <a data-change-highlight="magenta" href="#"><i class="fa fa-circle color-magenta-dark"></i><span class="color-magenta-light">Purple</span></a> <a data-change-highlight="aqua" href="#"><i class="fa fa-circle color-aqua-dark"></i><span class="color-aqua-light">Aqua</span></a> <a data-change-highlight="teal" href="#"><i class="fa fa-circle color-teal-dark"></i><span class="color-teal-light">Teal</span></a> <a data-change-highlight="mint" href="#"><i class="fa fa-circle color-mint-dark"></i><span class="color-mint-light">Mint</span></a> <a data-change-highlight="green" href="#"><i class="fa fa-circle color-green-light"></i><span class="color-green-light">Green</span></a> <a data-change-highlight="grass" href="#"><i class="fa fa-circle color-green-dark"></i><span class="color-green-dark">Grass</span></a> <a data-change-highlight="sunny" href="#"><i class="fa fa-circle color-yellow-light"></i><span class="color-yellow-light">Sunny</span></a> <a data-change-highlight="yellow" href="#"><i class="fa fa-circle color-yellow-dark"></i><span class="color-yellow-light">Goldish</span></a> <a data-change-highlight="brown" href="#"><i class="fa fa-circle color-brown-dark"></i><span class="color-brown-light">Wood</span></a> <a data-change-highlight="night" href="#"><i class="fa fa-circle color-dark-dark"></i><span class="color-dark-light">Night</span></a> <a data-change-highlight="dark" href="#"><i class="fa fa-circle color-dark-light"></i><span class="color-dark-light">Dark</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Settings Backgrounds-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-backgrounds">
<div class="menu-title">
<h1>Backgrounds</h1>
<p class="color-highlight">Change Page Color Behind Content Boxes</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="background-changer">
<a data-change-background="default" href="#"><i class="bg-theme"></i><span class="color-dark-dark">Default</span></a> <a data-change-background="plum" href="#"><i class="body-plum"></i><span class="color-plum-dark">Plum</span></a> <a data-change-background="magenta" href="#"><i class="body-magenta"></i><span class="color-dark-dark">Magenta</span></a> <a data-change-background="dark" href="#"><i class="body-dark"></i><span class="color-dark-dark">Dark</span></a> <a data-change-background="violet" href="#"><i class="body-violet"></i><span class="color-violet-dark">Violet</span></a> <a data-change-background="red" href="#"><i class="body-red"></i><span class="color-red-dark">Red</span></a> <a data-change-background="green" href="#"><i class="body-green"></i><span class="color-green-dark">Green</span></a> <a data-change-background="sky" href="#"><i class="body-sky"></i><span class="color-sky-dark">Sky</span></a> <a data-change-background="orange" href="#"><i class="body-orange"></i><span class="color-orange-dark">Orange</span></a> <a data-change-background="yellow" href="#"><i class="body-yellow"></i><span class="color-yellow-dark">Yellow</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Share -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-share">
<div class="menu-title mt-n1">
<h1>Share the Love</h1>
<p class="color-highlight">Just Tap the Social Icon. We'll add the Link</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="content mb-0">
<div class="divider mb-0">
</div>
<div class="list-group list-custom-small list-icon-0">
<a class="shareToFacebook external-link" href="auto_generated"><i class="font-18 fab fa-facebook-square color-facebook"></i> <span class="font-13">Facebook</span> <i class="fa fa-angle-right"></i></a> <a class="shareToTwitter external-link" href="auto_generated"><i class="font-18 fab fa-twitter-square color-twitter"></i> <span class="font-13">Twitter</span> <i class="fa fa-angle-right"></i></a> <a class="shareToLinkedIn external-link" href="auto_generated"><i class="font-18 fab fa-linkedin color-linkedin"></i> <span class="font-13">LinkedIn</span> <i class="fa fa-angle-right"></i></a> <a class="shareToWhatsApp external-link" href="auto_generated"><i class="font-18 fab fa-whatsapp-square color-whatsapp"></i> <span class="font-13">WhatsApp</span> <i class="fa fa-angle-right"></i></a> <a class="shareToMail external-link border-0" href="auto_generated"><i class="font-18 fa fa-envelope-square color-mail"></i> <span class="font-13">Email</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Be sure this is on your main visiting page, for example, the index.html page-->
<!-- Install Prompt for Android -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-android">
<div class="boxed-text-l mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p>Install Sticky on your home screen, and access it just like a regular app. It really is that simple!</p>
<a class="pwa-install btn btn-s rounded-s shadow-l text-uppercase font-900 bg-highlight mb-2" href="#">Add to Home Screen</a><br>
<a class="pwa-dismiss close-menu color-gray-dark text-uppercase font-900 opacity-60 font-10 pt-2" href="#">Maybe later</a>
<div class="clear">
</div>
</div>
</div>
<!-- Install instructions for iOS -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-ios">
<div class="boxed-text-xl mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p class="mb-0 pb-0">Install Sticky, and access it like a regular app. Open your Safari menu and tap "Add to Home Screen".</p>
<div class="clearfix pt-3">
</div>
<a class="pwa-dismiss close-menu color-highlight text-uppercase font-700" href="#">Maybe later</a>
</div>
</div>
</div>
<script src="cordova.js" type="text/javascript">
</script>
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script type="text/javascript">
var deviceReady = function(){
if(window.MobileAccessibility){
window.MobileAccessibility.usePreferredTextZoom(false);
}
}
document.addEventListener('deviceready', deviceReady, false);
</script>
<script src="scripts/bootstrap.min.js">
</script>
<script src="scripts/custom.js">
</script>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论