ThinkPHP框架、前端使用技巧总结

1、前端三目运算符的使用

应用一

模板中基本的变量判断应用

{: ($vo['isPool'] == 1 ) ? '是' : '否';}

应用二

可以多个条件的进行筛选，例如：变量identity的赋值为：1:采购协议 ；2、供应协议 ；3、协议管理

{: $identity == 2 ? '供应协议' : ($identity == 1 ? '采购协议' : '协议管理')}

2、I方法的模板中的应用

浏览器中的显示：

http://www.dbhs.com/Contractsupplier/index/mid/15

在模板中的应用如下：

或者 {:I('get.mid')}可以直接使用I方法

3、回车直接执行事件的两种方法

应用场景案例：查询搜索时，表单中输入完成后回车执行搜索事件

html代码：

js代码：

/**

* 点击回车触发的事件

*/

$("body").keydown(function() {

      if (event.keyCode == "13") {//keyCode=13是回车键；数字不同代表监听的按键不同

      login();  或者

      $("#searchBtns").click();

      }

});

4、jquery中获取Input中的值

模板中的应用如下：

jquery中获取参数值的方式如下：

var auditState = $('input[name="auditState"]').val();

5、模板中判断字符创长度并截取显示省略号

其中，mb_strlen：获取字符长的长度；mb_substr：截取部分字符创

{: mb_strlen($vo['manufacturer'], 'UTF-8') > 15 ? mb_substr($vo['manufacturer'], 0, 15, 'UTF-8') . '...' : $vo['manufacturer'] }

6、模板中函数的使用

获取变量的绝对值：

{$data.supplier|abs}

保留三位小数：

{$vo.price|default=0|sprintf='%.3f',###}      

具体的应用可参照：Thinkphp模板中函数的使用

7、控制器抛到前台的变量js中也可应用

控制器：

$this->assign('identity', $companyInfo['identity']);

前台：

var identity = {$identity};

console.log(identity);

8、鼠标事件

html代码：

已下架

js代码：

$(function () {

$(document).on('mouseover mouseout', '.product_state img', function (event) {

if (event.type == "mouseover") {

      //鼠标悬浮

      $(this).siblings('font').css('display', 'block');

} else if (event.type == "mouseout") {

      //鼠标离开

      $(this).siblings('font').css('display', 'none'); }

})

});

效果如下：

示例

9、js点击事件，添加form表单并跳转页面

html代码：

 查看历史变更记录 

js代码：

$('#btn_view_history').on('click', function () {

        var contractId = $('#contractId').val();

        var buyerId = $('#buyerId').val(); 

        var supplierId = $('#supplierId').val();

        // 提交历史记录页面，展示相应数据

        var form = $('

');

        form.attr({ method: 'POST', action: "{: U('Contractsupplier/changeHistory', array('mid'=>I('get.mid')))}", target: '_self' });

        $('').attr({type: 'hidden', name: 'contractId', value: contractId}).appendTo(form);

        $('').attr({type: 'hidden', name: 'buyerId', value: buyerId}).appendTo(form);

        $('').attr({type: 'hidden', name: 'supplierId', value: supplierId}).appendTo(form);

        form.appendTo($('body')).submit().remove();

});

10、指定滚动条到一定距离时改变开票按钮的样式随屏滚动

知识点：获取滚动距离；被选元素添加一个类或者移除类

添加的类：

.top_fixed {

    position: fixed;

    width: 1200px;

    background: #fff;

    top: 0;

    border-bottom: 2px solid #ddd;

    z-index: 99999;

}

效果图如下：

滚动固定