* @param s 值
* @param n 精度
* @return
*/
function fmoney(s, n) {
n = n >0 &&n <= 20 ? n : 2
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""
var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1]
t = ""
for (i = 0i <l.lengthi++) {
t += l[i] + ((i + 1) % 3 == 0 &&(i + 1) != l.length ? "," : "")
}
return t.split("").reverse().join("") + "." + r
}
创建按钮 data-role=button
给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery
Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery
Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。
样式链接按钮
在一个网页的主要内容块,你可以样式的任何锚链接为按钮添加 data-role="button"
属性。该框架将加强与标记和类的链接方式链接按钮。例如,这个标记:
图标样式列表
jQuery Mobile 自带很多按钮小图标,如下图所示:
左箭头:data-icon="arrow-l"
右箭头:data-icon="arrow-r"
上箭头:data-icon="arrow-u"
下箭头:data-icon="arrow-d"
删除:data-icon="delete"
添加:data-icon="Plus"
减少:data-icon="minus"
检查:data-icon="Check"
齿轮:data-icon="gear"
前进:data-icon="Forward"
后退:data-icon="Back"
网格:data-icon="Grid"
五角:data-icon="Star"
警告:data-icon="Alert"
信息:data-icon="info"
首页:data-icon="home"
默认情况下,所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos
属性来设置图标的右上方(top)、底部(bottom)、右侧(right)、左侧(left)的文本。例如,标记:
隐藏图片上的文字 data-iconpos="notext"
你也可以创建一个图标按钮,设置
data-iconpos="notext"。按钮插件将隐藏的文字在屏幕上,但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如,data-iconpos="right",data-iconpos="notext":
使用自定义图标,需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类,它的前缀是ui-icon-
,后面的是data-icon值。假如:有一个按钮 data-icon 属性的值为 myapp-email,即 data-icon=“
myapp-email”。那么生产的CSS类是:ui-icon-myapp-email。
然后你可以在你的样式表写一个CSS规则来定义
ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性,请创建一个白色18x18像素的PNG-8图标,并且保存为Alpha透明度。
这将创建标准分辨率的图标,但许多设备都有非常高的分辨率的显示器,就像iPhone
4的视网膜显示器。添加一个高清图标,创建一个图标,36X36像素(18像素大小完全相同的两倍),并添加第二个规则使用WebKit分钟装置像素比例:2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18x18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则:
这个可以参考如下内容:JQuery.dataTables表格插件添加跳转到指定页
一、解决方案
1.添加自定义工具栏,嵌入文本框
[javascript] view plain copy
"dom": 'l<"toolbar">frtip', //自定义工具栏
[javascript] view plain copy
//设置工具栏内容
//l - length changing input control
//f - filtering input
//t - The table!
//i - Table information summary
//p - pagination control
//r - processing display element
[javascript] view plain copy
$("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red">页</b>')
2.监听文本框的change事件,执行插件的调转页面方法
[javascript] view plain copy
//调转到指定页面索引 ,注意大小写
var oTable = $('#example1').dataTable()
oTable.fnPageChange(page)
3.插件绘制成功后,绑定文本框的值
[javascript] view plain copy
//绘制的时候触发,绑定文本框的值
table.on('draw.dt', function (e, settings, data) {
var info = table.page.info()
//此处的page为0开始计算
console.info('Showing page: ' + info.page + ' of ' + info.pages)
$('#searchNumber').val(info.page + 1)
})
二、完整示例代码
[html] view plain copy
<table id="example1" class="table table-hover table-striped">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>班级</th>
</tr>
</thead>
</table>
[javascript] view plain copy
$(function () {
//注意方法名为DataTable
var table = $('#example1').DataTable({
"dom": 'l<"toolbar">frtip', //自定义工具栏
"pagingType": "full_numbers",
lengthMenu: [3, 5, 10],
processing: true,//是否使用进度条
serverSide: true,//是否启用数据库加载
ajax: {
url: '/tableone/getlist',
type: 'post',
data: function (d) {
d.name = '张三'
/*
* 自定义aja参数
* 特别说明,此处可以重写控件的默认参数,比如分页参数
*/
// d.start = 0
//console.info(d)
//var page = $('#searchNumber').val()
//page = parseInt(page) || 1
//d.start = (page - 1) * d.length
}
},
//指定列绑定的字段
columns: [
{ data: 'sno' },
{ data: 'sname' },
{ data: 'ssex' },
{ data: 'sbirthday' },
{ data: 'class' }
],
order: [
[3, 'desc']
]
})
$("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red">页</b>')
//绑定分页事件----在切换分页的时候触发
//table.on('page.dt', function () {
//var info = table.page.info()
//console.info('Showing page: ' + info.page + ' of ' + info.pages)
//})
//绘制的时候触发,绑定文本框的值
table.on('draw.dt', function (e, settings, data) {
var info = table.page.info()
//此处的page为0开始计算
console.info('Showing page: ' + info.page + ' of ' + info.pages)
$('#searchNumber').val(info.page + 1)
})
//监听文本框更改
$('#searchNumber').change(function () {
var page = $(this).val()
page = parseInt(page) || 1
page = page - 1
//调转到指定页面索引 ,注意大小写
var oTable = $('#example1').dataTable()
oTable.fnPageChange(page)
})
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)