1、前端三目运算符的使用
应用一
模板中基本的变量判断应用
{: ($vo['isPool'] == 1 ) ? '是' : '否';}
应用二
可以多个条件的进行筛选，例如：变量identity的赋值为：1:采购协议 ；2、供应协议 ；3、协议管理
{: $identity == 2 ? '供应协议' : ($identity == 1 ? '采购协议' : '协议管理')}
2、I方法的模板中的应用
浏览器中的显示：
http://www.dbhs.com/Contractsupplier/index/mid/15
在模板中的应用如下：
<a href="{:U('add',array('mid'=>I('get.mid')))} ">或者 <font>{:I('get.mid')}</font>可以直接使用I方法
3、回车直接执行事件的两种方法
应用场景案例：查询搜索时，表单中输入完成后回车执行搜索事件
html代码：
<input type="text" value="" name="txt_search" id="txt_search" onkeydown="if(event.keyCode==13){$('.searchBtn a').click();return false;}" placeholder="搜索协议编号、名称"/>
js代码：
/**
* 点击回车触发的事件
*/
$("body").keydown(function() {
if (event.keyCode == "13") {//keyCode=13是回车键；数字不同代表监听的按键不同
login(); 或者
$("#searchBtns").click();
}
});
4、jquery中获取Input中的值
模板中的应用如下：
<input type="hidden" name="auditState" value="{$auditState}"/>
jquery中获取参数值的方式如下：
var auditState = $('input[name="auditState"]').val();
5、模板中判断字符创长度并截取显示省略号
其中，mb_strlen：获取字符长的长度；mb_substr：截取部分字符创
<span>
{: mb_strlen($vo['manufacturer'], 'UTF-8') > 15 ? mb_substr($vo['manufacturer'], 0, 15, 'UTF-8') . '...' : $vo['manufacturer'] }
</span>
6、模板中函数的使用
获取变量的绝对值：
{$data.supplier|abs}
保留三位小数：
{$vo.price|default=0|sprintf='%.3f',###}
具体的应用可参照：Thinkphp模板中函数的使用
7、控制器抛到前台的变量js中也可应用
控制器：
$this->assign('identity', $companyInfo['identity']);
前台：
<script type="text/javascript">
var identity = {$identity};
console.log(identity);
</script>
8、鼠标事件
html代码：
<span class="product_state">
<img class="g_tspic" src="__HOME__/images/yixiajia.png"/>
<font>已下架</font>
</span>
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代码：
<a href="javascript:;" id="btn_view_history" class="ml20"> 查看历史变更记录 </a>
js代码：
$('#btn_view_history').on('click', function () {
var contractId = $('#contractId').val();
var buyerId = $('#buyerId').val();
var supplierId = $('#supplierId').val();
// 提交历史记录页面，展示相应数据
var form = $('<form></form>');
form.attr({ method: 'POST', action: "{: U('Contractsupplier/changeHistory', array('mid'=>I('get.mid')))}", target: '_self' });
$('<input />').attr({type: 'hidden', name: 'contractId', value: contractId}).appendTo(form);
$('<input />').attr({type: 'hidden', name: 'buyerId', value: buyerId}).appendTo(form);
$('<input />').attr({type: 'hidden', name: 'supplierId', value: supplierId}).appendTo(form);
form.appendTo($('body')).submit().remove();
});
10、指定滚动条到一定距离时改变开票按钮的样式随屏滚动
知识点：获取滚动距离；被选元素添加一个类或者移除类
<script type="text/javascript">
$(function() {
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动距离
if( t >= 400 ) { //判断
$('.top_fix').addClass('top_fixed');
} else {
$('.top_fix').removeClass('top_fixed');
}
}
});
</script>
添加的类：
.top_fixed {
position: fixed;
width: 1200px;
background: #fff;
top: 0;
border-bottom: 2px solid #ddd;
z-index: 99999;
}
效果图如下：
