标签：tar 选择 bcb font over nsf document group uda
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ margin: 0 ;padding: 0;}
ul,li{ list-style: none;}
#tables{ width: 100%; height: auto;; overflow: hidden; margin-bottom: 40px;;}
#tables li{list-style: none; width: 100px; height: 150px; overflow: hidden; border: 2px solid red; float: left; display: inline;}
#tables li img{ width: 100px; float: left;}
.fenye {
height: 40px;
line-height: 40px;
position: relative; z-index: 88;;
text-align: center;
}
.fenye input {
outline: 0;;
}
.fenye button {
padding: 0 10px;
margin: 0 10px;
height: 40px;
float: left; outline: 0;;
cursor: pointer;
border: 1px solid #ebebeb;
background-color: #ffffff;
}
.fenye .prePage,.fenye .turnPage,.fenye .last-page,.fenye .jump-button{ background:#157fcc ; color: #fff;}
.fenye button:disabled{
background-color: #eee;
}
.fenye .first-page,
.fenye .last-page {
margin: 0;
}
.fenye .pageWrap {
height: 38px;
float: left;
overflow: hidden;border: 1px solid #ebebeb;
}
.fenye .pageWrap ul {
width: 100000px;
height: 40px;
float: left;list-style: none; overflow: hidden;
}
.fenye .pageWrap ul li:first-of-type(1){
border-left: 1px solod #ebebeb;;
}
.fenye .pageWrap ul li:hover{
background-color: #eee;
}
.fenye .pageWrap ul li {list-style: none;
width: 60px;
height: 40px;
border-right: 1px solid #ebebeb;
line-height: 40px;
box-sizing: border-box;
cursor: pointer;
float: left;
}
.fenye .pageWrap ul .sel-page {
background-color: #157fcc; color: #fff;
}
.fenye .jump-text {
width: 60px;
height: 40px;
box-sizing: border-box;
text-align: center;
margin: 0 5px;
float: left;
}
.fenye .jump-button {
margin: 0;
float: left; position: relative; z-index: 89;;
}
.fenye .total-pages,
.fenye .total-count {
margin-left: 10px;
float: left;
font-size: 14px;
}
.total-count{border: 1px solid #ebebeb;
background-color: #ffffff; padding: 0 10px;}
</style>
</head>
<body>
<div id="tables">
<li>11 动态数据</li>
</div>
<div class=" fenye" id="fenbox"></div>
<div id="saa">重新初始化2</div>
<div style="padding: 10px;;">-----------------------------------</div>
<div id="tables2">
<li>22 动态数据</li>
</div>
<div class=" fenye" id="fenbox2"></div>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script>
<script >
(function($, window, document) {
// 定义构造函数
function Paging(el, options) {
this.el = el;
var defaults = {
pageNo: 1, // 初始页码
totalPages: 1, //总页数
totalCount: 1, // 条目总数
slideSpeed: 0, // 缓动速度
jump: false, // 支持跳转，
first:true,
callback:function() {} // 回调函数，
};
this.options = $.extend({},defaults,options)
//console.log("最喜欢总", this.options );
this.init(this.el);
}
// 给实例对象添加公共属性和方法
Paging.prototype = {
constructor: Paging,
init: function(ele) {
this.createDom();
this.bindEvents(ele);
},
createDom: function() {
var that = this,
ulDom = ‘‘,
jumpDom = ‘‘,
content = ‘‘,
liWidth = 60, // li的宽度
totalPages = that.options.totalPages||1, // 总页数
wrapLength = 0;
if(typeof totalPages!=‘number‘||typeof totalPages<=0){
totalPages=1;
}
totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth;
if(totalPages<=1){
ulDom += ‘<li class="sel-page">‘ + 1 + ‘</li>‘;
}else{
for (var i = 1; i <= that.options.totalPages; i++) {
i != 1 ? ulDom += ‘<li>‘ + i + ‘</li>‘ : ulDom += ‘<li class="sel-page">‘ + i + ‘</li>‘;
}
}
that.options.jump ? jumpDom = ‘<input type="text" placeholder="1" class="jump-text jumpText" ><button type="button" class="jump-button jumpBtn">跳转</button>‘ : jumpDom = ‘‘;
content = ‘<button type="button" class="turnPage firstPage first-page">首页</button>‘ +
‘<button class="turnPage prePage" >上一页</button>‘ +
‘<div class="pageWrap" style="width:‘ + wrapLength + ‘px">‘ +
‘<ul class="pageSelect" style="transition:all ‘ + that.options.slideSpeed + ‘ms">‘ +
ulDom +
‘</ul></div>‘ +
‘<button class="turnPage nextPage" >下一页</button>‘ +
‘<button type="button" class="last-page lastPage">尾页</button>‘ +
jumpDom +
‘<p class="total-pages">共 ‘ +
that.options.totalPages +
‘ 页</p>‘ +
‘<p class="total-count">‘ +
that.options.totalCount +
‘</p>‘;
that.el.html(content);
},
bindEvents: function(ele) {
var ele=ele;
var that = this,
pageSelect =ele.find(‘.pageSelect‘), // ul
lis = pageSelect.children(), // li的集合
liWidth = lis[0]?(lis[0].offsetWidth):0, // li的宽度
totalPages = that.options.totalPages, // 总页数
pageIndex = that.options.pageNo, // 当前选择的页码
distance = 0, // ul移动距离
prePage = ele.find(‘.prePage‘),
nextPage = ele.find(‘.nextPage‘),
firstPage = ele.find(‘.firstPage‘),
lastPage = ele.find(‘.lastPage‘),
jumpBtn = ele.find(‘.jumpBtn‘),
jumpText =ele.find(‘.jumpText‘);
// console.log(firstPage);
prePage.on(‘click‘, function() {
pageIndex--;
that.options.first=true;
if (pageIndex < 1) pageIndex = 1;
handles(pageIndex);
})
nextPage.on(‘click‘, function() {
pageIndex++;
that.options.first=true;
if (pageIndex > lis.length) pageIndex = lis.length;
handles(pageIndex);
})
firstPage.on(‘click‘, function() {
pageIndex = 1;
that.options.first=true;
handles(pageIndex);
})
lastPage.on(‘click‘, function() {
pageIndex = totalPages;
that.options.first=true;
handles(pageIndex);
})
$(document).on("click", jumpBtn, function() {
// jumpBtn.on(‘click‘, function() {
var jumpNum = parseInt(jumpText.val().replace(/\D/g, ‘‘));
if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) {
pageIndex = jumpNum;
that.options.first=true;
handles(pageIndex);
jumpText.val(jumpNum);
}
})
//$(document).on("click", lis, function() {
lis.on(‘click‘, function() {
that.options.first=true;
pageIndex = $(this).index() + 1;
handles(pageIndex);
})
function handles(pageIndex) {
//debugger;
lis.removeClass(‘sel-page‘).eq(pageIndex - 1).addClass(‘sel-page‘);
if(totalPages<=1){
firstPage.attr(‘disabled‘, true);
prePage.attr(‘disabled‘, true);
nextPage.attr(‘disabled‘, true);
lastPage.attr(‘disabled‘, true) ;
jumpBtn.attr(‘disabled‘, true) ;
jumpText.attr(‘disabled‘, true) ;
if(that.options.first){
that.options.callback(pageIndex);
}
return false;
}
if (totalPages <= 5) {
if(that.options.first){
that.options.callback(pageIndex);
}
// console.log("222totalPages",totalPages)
return false;
}
if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth;
if (pageIndex == 2 || pageIndex == 1) distance = 0;
if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth;
pageSelect.css(‘transform‘, ‘translateX(‘ + (-distance) + ‘px)‘);
pageIndex == 1 ? firstPage.attr(‘disabled‘, true) : firstPage.attr(‘disabled‘, false);
pageIndex == 1 ? prePage.attr(‘disabled‘, true) : prePage.attr(‘disabled‘, false);
pageIndex == totalPages ? lastPage.attr(‘disabled‘, true) : lastPage.attr(‘disabled‘, false);
pageIndex == totalPages ? nextPage.attr(‘disabled‘, true) : nextPage.attr(‘disabled‘, false);
if(that.options.first){
that.options.callback(pageIndex);
}
}
//if(that.options.first){
handles(that.options.pageNo); // 初始化页码位置
//}
}
}
$.fn.paging = function(options) {
// console.log($(this));
return new Paging($(this), options);
}
})(jQuery, window, document);
</script>
<script>
//http://layer.layui.com/
$(document).ready(function(){
var tables=$("#tables");
var page=1;
//ajaxDATA(1)
function ajaxDATA(page){
var urls="http://mktm.biqiang8.com/home/goods?firstCid=0&secCid=0&pageNo="+page+"&pageSize=5&exsitIdList="
$.ajax({
type: "GET",
url: urls,
dataType: "json",
success: function(data){
if(data.code==0){
var htmlStr="";
//console.log(data.goods_list);
for(var i=0;i<data.data.goods_list.length;i++){
htmlStr+=‘<li>‘+i+data.data.goods_list[i].title+‘<img src="‘+data.data.goods_list[i].img_url+‘"</li>‘
}
$("#tables").html(htmlStr);
}
}
});
}
var setTotalCount = 301;
var fenyeObj={
initPageNo: 1, // 初始页码
totalPages: 1, //总页数
totalCount: ‘合计‘ + 0 + ‘条数据‘, // 条目总数
slideSpeed: 600, // 缓动速度。单位毫秒
jump: true, //是否支持跳转
first:false, //初始化 是否立即执行回掉
callback: function(page) { // 回调函数
console.log("立11即查询",page);
ajaxDATA(page)
}
}
$(‘#fenbox‘).paging(fenyeObj)
$("#saa").on("click",function(){
setTotalCount = 71;
fenyeObj.totalCount = ‘合计‘ + setTotalCount + ‘条数据‘, // 条目总数;
fenyeObj.totalPages=24;
fenyeObj.first=false;
//console.log("立重置即查询",fenyeObj);
$(‘#fenbox‘).paging(fenyeObj)
})
var setTotalCount2 = 31;
var fenyeObj2={
initPageNo: 1, // 初始页码
totalPages: 20, //总页数
totalCount: ‘合计‘ + setTotalCount2 + ‘条数据‘, // 条目总数
slideSpeed: 600, // 缓动速度。单位毫秒
jump: true, //是否支持跳转
// first:false,
callback: function(page) { // 回调函数
console.log("立即22查询",page);
ajaxDATA(page)
}
}
$(‘#fenbox2‘).paging(fenyeObj2)
});
</script>
</body>
</html>
下拉框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>信息查询</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /> </head> <body> <style> html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,span,img,button ,em,i,b{margin:0;padding:0;} html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;min-width:320px;font-size:62.5%;} body{font-family:"微软雅黑",‘Helvetica Neue‘,Helvetica,tahoma,arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:1;font-size:14px;-webkit-touch-callout:none;} article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block} dl,li,menu,ol,ul{list-style:none} address,em,i,th{font-weight:400;font-style:normal} a{color:#999;display:block;} a:link,a:visited{color:#999;text-decoration:none;cursor:pointer} a:hover{cursor:pointer} a:active,a:focus{outline:0;} img{width:100%;border:0;vertical-align:middle;-webkit-user-select:none;} input,select{outline:0} h1,h2,h3,h4,h5,h6{font-size:100%;font-variant:normal;font-weight:normal;} button,input[type=button],input[type=tel],input[type=reset],input[type=submit]{line-height:normal!important;-webkit-appearance:none} ::-webkit-input-placeholder{color:#777;} ::input-placeholder{color:#777;} input:focus::-webkit-input-placeholder{-webkit-transition:.2s;opacity:0;} input:focus::input-placeholder{transition:.2s;opacity:0;} .clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden} .fl{float:left} .fr{float:right} .fl,.fr{display:inline} .disabled{pointer-events:none;} .hover{ } .hover:hover{ cursor: pointer;} /* 业务css*/ .my_form{ background: #fafafa; border: 1px solid #e0e0e0; margin-top: 20px; padding: 21px; m } .my_form .my_form_content{ width: 100%; } .form_content_submit{ margin: 20px auto; display: block; font-size: 16px; text-align: center; width: 120px;; height: 44px; line-height: 44px;background: #157fcc; color: #fff; border: 0;;} .my_form_table{ border: 1px solid #e0e0e0; } .flexbox{display:-webkit-box; display:-moz-box; display:box; display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex; display:table\9; } .flexbox .flex1{ -webkit-box-flex:1; -moz-box-flex:1; box-flex:1; -webkit-flex:1; -moz-flex:1; -ms-flex:1; flex:1; display:table-cell\9; } .selected_icon{ position: relative; width: 100%; height: 100%;} .selected_icon .check{ position:absolute;background: #157fcc;} .selected_icon .check.plus{ left: 50%; top: 50%; margin-left: -8px; width: 16px; height: 1px; } .selected_icon .check.reduce{left: 50%;top: 50%;; margin-top: -8px;; position:absolute;width: 1px; height: 16px; } .showone.on .check{background: red !important;} .showone.on .check.reduce{ -webkit-transform:translateY(50%);-moz-transform:translateY(50%);transform:translateY(50%); opacity: 0; -webkit-transition: .3s;-moz-transition: .3s;transition: .3s;;} .showone{ position: relative;;border-bottom: 1px solid #e0e0e0 ;} .hideone{ background: #fff; margin:20px 44px;;border: 1px solid #ccc ;} .hideoneinner { position: relative;; height:44px; line-height: 44px; text-align: center; border-bottom: 1px solid #e0e0e0;} .hideoneinner div { height:44px; line-height: 44px;border-right: 1px solid #e0e0e0; } .showone.on:after{position: absolute; content: ""; height: 1px; width: 22px; background:#e0e0e0; left: 22px; top: 65px; z-index: 26;} .showone.on:before{ position: absolute; content: ""; height: 22px; width:1px; background:#e0e0e0; left: 22px; top: 44px; z-index: 26;} .hideoneinner div:last-child{ border-right:0; } .hideoneinner div:first-child{ font-weight: bold; } .hideoneinner:last-of-type{ border-bottom: 0;} .my_form_table .showone:hover{ background:#f5f5f5 ;} .filter-disabled { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .filter-box { position: relative; z-index: 92;; } .filter-box select { display: none; } .filter-text { height: 100%; overflow: hidden; position: relative; cursor: pointer; padding: 0 30px 0 10px; background: #fff; border: 1px solid #e6e6e6; } .filter-text input { font-size: 14px; } .filter-text .filter-title { width: 100%; height: 36px; line-height: 36px; border: 0; background-color: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; cursor: pointer; } .filter-list { display: none; width: 100%; z-index: 99; max-height: 300px; background-color: #fff; font-size: 14px; position: absolute; top: 42px; left: 0; z-index: 99; border: 1px solid #e6e6e6; overflow: auto; } .filter-list li.filter-null a { color: #d2d2d2; } .filter-list li a { display: block; padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .filter-list li:hover { background-color: #f2f2f2; } .filter-list li.filter-selected { background-color: #5FB878; } .filter-list li.filter-selected a{ display: block; color: #fff; } .filter-list li.filter-disabled { background-color: #fff; } .filter-list li.filter-disabled a{ display: block; color: #d2d2d2; } .filter-list li.filter-disabled:hover a { cursor: not-allowed!important; background-color: #fff; } .icon { position: absolute; } .icon-filter-arrow { width:0; height:0; overflow:hidden; font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-width:8px; border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/ border-color:#999 transparent transparent transparent; right: 10px; top: 13px; transition: all .2s; } .icon-filter-arrow.filter-show { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .filter-list::-webkit-scrollbar { width: 4px; height: 4px; } .filter-list::-webkit-scrollbar-track { background: #fff } .filter-list::-webkit-scrollbar-thumb { background: #CBCBCB; } #j_searchtask{ background: #666; padding: 10px 20px;} </style> <div> <!-- 这里开始 --> <div class="filter-box filter-box1 fl"> <div class="filter-text"> <input class="filter-title" id="j_qudao" data-val="" type="text" readonly placeholder="请选择渠道" /> <i class="icon icon-filter-arrow"></i> </div> <select name="filter"> <option value="new" disabled>请选择渠道</option> <option value="11渠道1" >渠道1</option> <option value="22渠道2">渠道2</option> <option value="33渠道3">渠道3</option> </select> </div> <!-- 这里结束 --> <!-- 这里开始 --> <div class="filter-box filter-box2 fl"> <div class="filter-text"> <input class="filter-title" id="j_qudao2" data-val="" type="text" readonly placeholder="请选择支付" /> <i class="icon icon-filter-arrow"></i> </div> <select name="filter"> <option value="new" disabled>请选类型</option> <option value="淘宝1" >淘宝</option> <option value="支付宝2">支付宝</option> </select> </div> <!-- 这里结束 --> <div class="right fr" class="flex1" id="j_searchtask">查询结果</div> </div> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> <script type="text/javascript" src="selectFilter.js"></script> <script type="text/javascript"> //本小插件支持移动端哦 </script> <script> $(document).ready(function(){ //下拉组件 $(‘.filter-box1‘).selectFilter({ callBack : function (val){ //返回选择的值 //document.getElementById("j_qudao").setAttribute("data-val",val) console.log(val+‘-是返回的值‘) } }); //下拉组件 $(‘.filter-box2‘).selectFilter({ callBack : function (val){ //返回选择的值 //document.getElementById("j_qudao").setAttribute("data-val",val) console.log(val+‘-是返回的值‘) } }); //查询点击 $("#j_searchtask").on("click",function(){ var qudao_val=$("#j_qudao").attr("data-val");//渠道 var qudao_val2=$("#j_qudao2").attr("data-val");//渠道 alert("值-----："+qudao_val); alert("值-----："+qudao_val2); }); }); </script> </body> </html>
标签：tar 选择 bcb font over nsf document group uda
原文地址：https://www.cnblogs.com/surfaces/p/9168400.html
