jqgrid通用编辑规则
使用 editoptions ,主要用于定义勾选或者未勾选时的值,例如editoptions: { value:"Yes:No" }
<input type="checkbox" value="Yes" offval="No".../>
当value为yes,checkbox被勾选,否则未勾选。值将会作为参数传递到jqGrid配置的editurl中。
下载文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>要下载的文件</p>
<a href="txt/get.txt" download="get">get.txt</a>
</body>
</html>
测试文件:test3/minmin/download.html
点击图片翻转显示文字
点击图片,则调用changePage方法
<script type="text/javascript">
$(function () {
$('.pagination li').click(changePage);
$('.portfolio-item').magnificPopup({
type: 'image',
gallery:{
enabled:true
}
});
});
</script>
切换图片
移除图片,显示当前的div
function changePage(event) {
var pageNo = $(this).html();
$('.portfolio-page').hide();//实现图片的隐藏
$('#page-' + pageNo).fadeIn();//以渐退的方式隐藏
$('.pagination li').removeClass('active');//removeClass() 方法从被选元素移除一个或多个类。
$(this).addClass('active');
//addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。
}
测试文件:test3/flip项目
统计
data-percent 显示的信息为圆形统计,不需要添加额外图像文件
//canvas将百分比以图形的形式显示出来
var initPieChart = function() {
$('.percentage').easyPieChart({
barColor: '#BF1F42',
trackColor: '#1E4598',
scaleColor:false,
lineCap: 'round',
lineWidth:50,
borderRadius:0,
animate: 1000,
size:395
});
}
//初始化饼图
$(function(){
initPieChart();
});
测试文件:test3/tongji.html
星际评分条
分为十分制和百分制
function rat(star,result,m){
star= '#' + star;
result= '#' + result;
$(result).hide();//将结果DIV隐藏
$(star).raty({
hints: ['10','20', '30', '40', '50','60', '70', '80', '90', '100'],
path: "css/img",
starOff: 'star-off-big.png',
starOn: 'star-on-big.png',
size: 24,
start: 40,
showHalf: true,
target: result,
targetKeep : true,//targetKeep 属性设置为true,用户的选择值才会被保持在目标DIV中,否则只是鼠标悬停时有值,而鼠标离开后这个值就会消失
click: function (score, evt) {
//第一种方式:直接取值
alert('你的评分是'+score*m+'分');
}
});
}
测试文件:test3/rankScore/index.html
树形结构
var dataSource1 = function(options, callback){
var $data = null
if(!("text" in options) && !("type" in options)){
$data = tree_data;//树的根节点
callback({ data: $data });
return;
}
else if("type" in options && options.type == "folder") {
if("additionalParameters" in options && "children" in options.additionalParameters)
$data = options.additionalParameters.children || {};//给父节点绑定子节点
else $data = {}//no data
}
if($data != null)//此setTimeout仅用于模仿一些随机延迟 setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);
}
测试文件:test3/treeview.htm