前端组件 · 模板

[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) 后，再刷新当前页。