jquery 自带的提示样式


 
 <script type="text/javascript">
//====================================以下为测试函数=======================================//
function test1(){
 scscms_alert("默认提示信息");
}
function test2(){
 scscms_alert("成功提示信息","ok");
}
function test3(){
 scscms_alert("成功提示后回调函数","ok",function(){alert("回调成功!")});
}
function test4(){
 scscms_alert("失败提示信息","error");
}
function test5(){
 scscms_alert("失败提示信息","error",function(){alert("哦!no!")});
}
function test6(){
 scscms_alert("警告提示信息","warn");
}
function test7(){
 scscms_alert("警告提示信息","warn",function(){alert("哦!警告!")});
}
function test8(){
 scscms_alert("您喜欢此信息提示吗?","confirm",function(){
  scscms_alert("您选择了喜欢,谢谢!","ok");
 },function(){
  scscms_alert("您选择了不喜欢,汗!","error");
 });
}
function test9(){
 scscms_alert("本信息3秒后自动关闭","ok","",3);
}
function test10(){
 scscms_alert("询问信息定时关闭提示信息,3秒后自动关闭,无取消时回调函数.不推荐使用。","confirm",function(){alert("确定回调用!")},3);
}
</script>
<div class="test">

 <button type="button" οnclick="test1()">默认提示信息</button>
 <br/>
 <button type="button" οnclick="test2()">成功提示信息</button>
 <br/>
 <button type="button" οnclick="test3()">成功提示后回调函数</button>
 <br/>
 <button type="button" οnclick="test4()">失败提示信息</button>
 <br/>
 <button type="button" οnclick="test5()">失败提示后回调函数</button>
 <br/>
 <button type="button" οnclick="test6()">警告提示信息</button>
 <br/>
 <button type="button" οnclick="test7()">警告提示后回调函数</button>
 <br/>
 <button type="button" οnclick="test8()">询问信息</button>
 <br/>
 <button type="button" οnclick="test9()">定时关闭提示信息</button>
 <br/>
 <button type="button" οnclick="test10()">询问信息定时关闭提示信息</button>
 
</div>
 

 

 

 

function scscms_alert(msg,sign,ok,can){
 var c_=false;//是否已经关闭窗口,解决自动关闭与手动关闭冲突
 sign=sign||"";
 var s="<div id='mask_layer'></div><div id='scs_alert'><div id='alert_top'></div><div id='alert_bg'><table width='260' align='center' border='0' cellspacing='0' cellpadding='1'><tr>";
 if (sign!="")s+="<td width='45'><div id='inco_"+sign+"'></div></td>";
 s+="<td id='alert_txt'>"+msg+"</td></tr></table>";
 if (sign=="confirm"){
  s+="<a href='javascript:void(0)' id='confirm_ok'>确 定</a><a href='javascript:void(0)' id='confirm_cancel'>取 消</a>";
 }else{
  s+="<a href='javascript:void(0)' id='alert_ok'>确 定</a>"
 }
 s+="</div><div id='alert_foot'></div></div>";
 $("body").append(s);
 $("#scs_alert").css("margin-top",-($("#scs_alert").height()/2)+"px"); //使其垂直居中
 $("#scs_alert").focus(); //获取焦点,以防回车后无法触发函数

 if (typeof can == "number"){
 //定时关闭提示
  setTimeout(function(){
   close_info();
  },can*1000);
 }
 function close_info(){
 //关闭提示窗口
  if(!c_){
  $("#mask_layer").fadeOut("fast",function(){
   $("#scs_alert").remove();
   $(this).remove();
  });
  c_=true;
  }
 }
 $("#alert_ok").click(function(){
  close_info();
  if(typeof(ok)=="function")ok();
 });
 $("#confirm_ok").click(function(){
  close_info();
  if(typeof(ok)=="function")ok();
 });
 $("#confirm_cancel").click(function(){
  close_info();
  if(typeof(can)=="function")can();
 });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery是一种流行的JavaScript库,它提供了许多实用的功能,包括分页功能。使用JQuery的分页插件可以很方便地实现分页效果。 首先,需要在HTML文档中引入JQuery库和分页插件的文件。可以使用CDN链接或者下载文件到本地进行引入。例如: ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-simplePagination.js/1.6/jquery.simplePagination.min.js"></script> ``` 然后,需要在合适的位置添加一个包含分页内容的元素,例如一个`<ul>`列表: ``` <ul id="pagination"></ul> ``` 接下来,需要编写JavaScript代码来初始化并配置分页插件: ``` $(document).ready(function(){ var itemsPerPage = 10; // 每页显示的项目数 var totalPages = 20; // 总页数 $('#pagination').pagination({ items: totalPages, itemsOnPage: itemsPerPage, currentPage: 1, cssStyle: 'light-theme', onPageClick: function(pageNumber){ // 分页点击时的回调函数 // 可以在这里处理翻页后的逻辑,例如加载对应页的数据等操作 } }); }); ``` 在上述代码中,`itemsPerPage`表示每页显示的项目数,`totalPages`表示总页数。然后调用`pagination()`方法初始化分页插件。其中的`cssStyle`可以指定样式,`onPageClick`是一个回调函数,在分页点击时触发,可在该函数中处理翻页后的逻辑。 最后,可以根据需要在`onPageClick`回调函数中添加逻辑,例如使用Ajax加载对应页的数据,并将数据渲染到页面上。 以上就是使用JQuery自带的分页插件的基本步骤,根据具体需求还可以进行更多的配置和定制化操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值