[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) 后,再刷新當前頁。
- HBuilder擴展代碼塊
- Sublime擴展代碼塊
- 模板
- 基礎
- 模板標簽
- 前端組件
- 公共模板
- 進階
- 前臺模板
- 房產裝修風格
- 博客類模板
- 企業站-監控模板
- 后臺模板
- 漂亮的后臺模板
- ThinkCMF 1.6 后臺界面升級
- 新的模板
- 后臺UI
- H+后臺主題
- Ace Admin
- 信息系統(橙藍)
- 阿里云UI
- 不錯的網站
- 常見問題
- dedecms 模板修改為 newthink 模板目錄的步驟
- 網站信息 新增條目方法
- 系統切換中英文
- 2.3 門戶模板制作
- 文章列表頁制作
- 文章內容頁制作
- 頁面制作
- 獲取文章的各種方式
- 熱門文章組件制作
- SEO制作
- 文章相冊制作
- 文章列表推薦功能制作
- 文章列表置頂功能制作
- 面包屑制作
- 格式化