JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<script src="http://demo3.test.stust.edu.tw/jQuery/clickcounter-1.4.0.js"></script>
<h1 class="contentTitle">
  <div class="contentTitle">三用電錶之量測</div>
</h1>
<div class="count"><table border="1" cellspacing="0" bordercolor="#000a00" cellpadding="0" width="590" ><tbody><tr><td width="33%" style="border-style: solid none none; padding: 0cm 5.4pt; width: 183.62px; border-top-color: #c0504d; border-top-width: 1pt; background-color: #ff9900;"><div align="center" style="text-align: center;"><b><span style="font-size: 14pt; font-family: 標楷體; color: #000000;">課程講義</span></b></div></td><td style="border-style: solid none none; padding: 0cm 5.4pt; width: 183.62px; border-top-color: #c0504d; border-top-width: 1pt; background-color: #ff9900;"><span style="color: #000000;">&nbsp;<b style="text-align: center; font-size: 12px;"><span style="font-size: 14pt; font-family: 標楷體;">課程影音</span></b></span></td></tr><tr><td width="33%" style="border-style: solid none; padding: 0cm 5.4pt; width: 183.62px; border-top-color: #c0504d; border-bottom-color: #c0504d; border-top-width: 1pt; border-bottom-width: 1pt;"><span style="text-align: justify; font-family: 標楷體; color: blue;"><img src="http://ocw2.stust.edu.tw/Sysid/ocw/1234.png" style="width: 22px; height: 20px;"></span><b style="text-align: justify;"><span lang="EN-US" style="font-size: 12pt; font-family: 標楷體;"><a href="../../Sysid/ocw/pme/electronics_10002/Ex1.doc" target="_blank" title="三用電錶之量測">三用電錶之量測</a></span></b></td><td style="border-style: solid none; padding: 0cm 5.4pt; width: 183.62px; border-top-color: #c0504d; border-bottom-color: #c0504d; border-top-width: 1pt; border-bottom-width: 1pt;"><img src="http://ocw2.stust.edu.tw/Sysid/ocw/12345.png" width="21" height="20" v:shapes="圖片_x0020_4" style="text-align: justify; width: 22px; height: 22px; line-height: 18px; font-family: 標楷體; font-size: 12px;"><b style="font-size: 12px; text-align: justify;"><span lang="EN-US" style="font-size: 12pt; font-family: 標楷體;"><a...

CSS

table{width: 100%,border-collapse: collapse}

JavaScript

/*使jQuery Dialog UI 可以拖離原範圍的方法 20140422*/
/*於jQuery UI 引用後，.Dialog()使用前宣告以下設定即可脫離限制*/
$.ui.dialog.prototype._makeDraggable = function() { 
    this.uiDialog.draggable({
        containment: false
    });
};

/*countclick為自己編寫的jQuery Plugin裡面包含.Dialog的使用*/
$("div.count").countclick({video_width:450,video_height:300});