本地HTML採用cdn載入方式引入Luckysheet的案例

阿新 • • 發佈：2020-10-22

需求

Luckysheet支援使用CDN載入，那麼我們如何採用這種方式引入呢？

步驟

基本上根據官方文件就可以寫出來

第一步

引入依賴

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/luckysheet.umd.js"></script>

第二步

初始化表格

<script type="text/javascript">
  $(function () {
      luckysheet.create({
        container: 'luckysheet',
        showinfobar:false,
      });
  });
</script>

這樣就大功告成了！

原始碼

這裡展示一個完整的原始碼，可以全部複製下來，然後直接開啟即可

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/luckysheet.umd.js"></script>

<script type="text/javascript">
  $(function () {
      luckysheet.create({
        container: 'luckysheet',
        showinfobar:false,
      });
  });
</script>

<body>

<div class="w3-container">
  <h2>Tabs</h2>
  <p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p>
</div>

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity('London')">Luckysheet</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>

<div id="London" class="w3-container city" style="position: absolute;width: 100%;top:145px;bottom: 0px;left:0px">
  <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</div>

<div id="Paris" class="w3-container city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="w3-container city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(cityName) {
  var i;
  var x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(cityName).style.display = "block";  
}
</script>

</body>
</html>