前端組件 · 模板

[TOC] # 前端組件 # js-count-btn 前臺數量操作組件 ```html <a href="這里定義自己的url" class="js-count-btn"> <i class="fa fa-thumbs-up"></i> <span class="count">0</span> </a> ``` 功能：加上 `js-count-btn` 類名的 `a` 標簽為可以實現數量增加的 `ajax` 操作；`ajax` 執行成功返回后對其內類名包含 `count`的標簽進行數量加1操作; `ajax` 請求的 `url` 為 `a` 標簽的 `href` 屬性； ## js-favorite-btn 前臺收藏組件，其它應用可以公用 ```html <a href="{:U('user/favorite/do_favorite')}" class="js-favorite-btn" data-title="收藏的內容標題" data-url="收藏的內容的url" data-key="{:sp_get_favorite_key('收藏內容所在表',收藏內容的id)}"></a>  <a href="{:U('user/favorite/do_favorite',array('id'=>$object_id))}" class="js-favorite-btn" data-title="{$post_title}" data-url="{:U('article/index',array('id'=>$tid))}" data-key="{:sp_get_favorite_key('posts',$object_id)}"> <i class="fa fa-star-o"></i> </a> ``` ```php sp_get_favorite_key($table,$object_id) ``` `$table`：收藏內容所在的表，不帶表前綴的表名稱，如cmf_posts應該改為“posts”; `$object_id`：收藏內容的id: ###a標簽屬性說明 data-title:收藏的內容標題； data-url:收藏內容的url； data-key:安全key，用sp_get_favorite_key方法生成，防止有人提交錯誤數據； ## js-ajax-dialog-btn ajax 對話框組件 ```html <a href="你的url" class="js-ajax-dialog-btn" data-msg="確定還原嗎？">還原</a> ``` 功能：加上 `js-ajax-dialog-btn 類名的a標簽在單擊后，會出現一個對話框，提示用戶一些信息(信息內容為 `data-msg 的屬性值)，用戶確定后會進行一個 `ajax` 請求，請求的 `url` 為 `href` 屬性的值，請求成功返回后，會刷新當前界面。 ## js-ajax-delete ajax 刪除組件 ```html <a href="你的刪除url" class="js-ajax-delete" data-msg="確定刪除它嗎？">刪除</a> ``` 功能：加上 `js-ajax-delete` 類名的`a` 標簽在單擊后，會出現一個對話框，提示用戶一些信息(信息內容為 `data-msg` 的屬性值)，用戶確定后會進行一個 `ajax` 請求，請求的 `url` 為 `href` 屬性的值，請求成功返回后，會刷新當前界面。 ## js-date 日期選擇組件 ```html <input class="js-date" type="text" id="input-birthday" placeholder="2013-01-04" name="birthday"> ``` 功能：加上js-date類名的text input標簽在用戶輸入時間時，會彈出一個日歷讓用戶選擇日期 ## js-datetime 時間選擇組件 ```html <input class="js-datetime" type="text" id="input-datetime" placeholder="2013-01-04 09:20" name="datetime"> ``` 功能：加上js-datetime類名的text input標簽在用戶輸入時間時，會彈出一個日歷讓用戶選擇時間 ## js-ajax-form ajax表單組件 ```html <form class="js-ajax-form" action="{:U('user/login/dologin')}" method="post"> <label for="input_username">賬號</label> <input type="text" id="input_username" name="username" placeholder="請輸入用戶名或者郵箱" class="span3"> <label for="input_password">密碼</label> <input type="password" id="input_password" name="password" placeholder="請輸入密碼" class="span3"> <label for="input_verify">驗證碼</label> <input type="text" id="input_verify" name="verify" placeholder="請輸入驗證碼" class="span3"> {:sp_verifycode_img('length=4&font_size=15&width=100&height=35&charset=1234567890')} <button class="btn btn-primary js-ajax-submit" type="submit" data-wait="1500">確定</button> </form> ``` 功能：加上類名為 js-ajax-form 的 form標簽，配合類名為 js-ajax-submit 的提交按鈕，在用戶單擊提交按鈕時，會以 ajax 的方式提交表單，提交的地址為 form 的 action屬性，提交方法為 form的 method 屬性，凡是在此form 里且有 name 屬性的表單元素都會被提交; 提交成功返回后，如果返回結果中有 referer 字段，頁面會跳轉到 referer 表示的地址。如果沒有referer 或者其為空，則會刷新當前頁，或者等待一定時間(data-wait的值，單位 ms) 后，再刷新當前頁。