SmokeScreen 也是一個很簡單且基本的文字輸入框的提示外掛，且也支援使用 HTML5 的 data-attributes 用法。不過若瀏覽器都能支援 HTML5 的話，直接用 placeholder 比較方便吧!!
套件名稱：SmokeScreen
套件版本：1.0
作者網站：http://blog.jbstrickler.com/2010/06/create-informative-textboxes/
套件網址：N/A
發佈日期：2010-06-09
檔案大小：2.07 KB
檔案下載：smokescreen.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | smoke(選填) 描述： 預設要顯示的提示字 預設值： 'Enter text...' smokeclass(選填) 描述： 當顯示提示字時要套用的樣式 預設值： 'smokescreen' |
方法說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 | // 把指定的元素加上提示效果 $(selector).smokescreen(options); // 修改預設設定 $.fn.smokescreen.defaults = { smoke : 'Enter text...', smokeclass : 'smokescreen' } |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="smokescreen.js"></script> <style type="text/css"> .red { color: red; } .green { color: green; } </style> <script type="text/javascript"> $(function(){ // 設定 #example1 的提示字為 'Something...' 並套用 .red 樣式 $('#example1').smokescreen({ smoke: 'Something...', smokeclass: 'red' }); // #example2 的提示字及樣式來自 data-smoke 及 data-smokeclass $('#example2').smokescreen(); }); </script> <body> <p><input type="text" id="example1" /></p> <p><input type="text" id="example2" data-smoke="Metadata..." data-smokeclass="green" /></p> </body> |