jquery tools 系列(三)——scrollable（2）

接上一节jquery tools 之 scrollable（一），本文详细介绍scrollable中方法使用及本文完整示例。

scrollable提供的一系列获取scrollable对象的方法具体使用方式如下：

[javascript] view plain copy
  1. var scrollable=$("div.scrollable").scrollable();   
  2.     //alert(scrollable.getConf().prev);//获取配置对象中的prev属性  
  3.     scrollable.getConf().speed=200;//设置配置对象的speed属性  
  4.     //alert(scrollable.getIndex());//获取当前滚动项的索引  
  5.     //alert(scrollable.getItems().length);//获取当前滚动项的数量  
  6.     //alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable)，并将所有滚动项显示出来  
  7.     //alert(scrollable.getPageAmount());//获取当前滚动栏分页数  
  8.     //alert(scrollable.getPageIndex());//获取当前所在分页  
  9.     //alert(scrollable.getRoot().html());//获取滚动项的上一级节点（id=thumbs）  
  10.     //alert(scrollable.getSize());  
  11.     //alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量  
  12.     scrollable.next();//如果有下一个滚动项，则跳转到下一个滚动项  
  13.     scrollable.prev(3000,function(){return true});//跳转到前一滚动项  
  14.     //var seekTo= scrollable.click(0).seekTo(2,1000,function(){  
  15.         //alert(this.getIndex());  
  16.     //});  
  17.       
  18.     //scrollable.move(2);  
  19.     //scrollable.prevPage();//跳转到前一页  
  20.     //scrollable.nextPage();//跳转到下一页  
  21.     //scrollable.setPage(1);//跳转到下一页  
  22.     //scrollable.begin();//跳转到第一个滚动项  
  23.     //scrollable.end();//跳转到最后一个滚动项  
  24.     scrollable.click(3);//使第四个滚动项处于选中状态  
  25.       
  26.     scrollable.onBeforeSeek(function(){  
  27.             alert("you click the "+this.getIndex()+"st scrollable item!");  
  28.     });  
  29.       
  30.     $("#remove").click(function(){  
  31.         scrollable.getItems().filter(":last").remove();//删除最后一个滚动项  
  32.         scrollable.reload().prev();//自动更新相关配置信息，并跳转到被删除滚动项的前一项  
  33.     });  

以下是scrollable对象的方法说明描述：

 

方法名称
返回值 说明
getConf() Object 返回scrollable的配置对象，并且可通过设置该对象的相关属性值来修改该配置对象的属性。
getIndex() number 获取当前滚动项的索引号，0代表第一个元素，1代表第二个元素，以此类推。此外，需注意的是，如果获取到多个滚动项，那么将会只返回第一个滚动项的索引号。
getItems() jQuery 返回所有的滚动项，结果以jquery对象的方式返回。
getItemWrap() jQuery 获取滚动项的父节点，结果以jquery对象的方式返回。
getPageAmount() number 获取当前滚动栏的分页数。
getPageIndex() number 返回当前分页索引号。比如说，如果分页设置为5个滚动项/页，并且当前滚动项位置为7的话，那么将会返回1（第二页）
getRoot() jQuery 获取滚动项的上一级节点。
getSize() number 返回滚动项的数量。该方法等同于getConf().size
getVisibleItems() jQuery 获取一个由当前可见滚动项组成列表，该列表为一个jquery对象，可见滚动项的数量由配置对象的size属性定义。
　 　 　
reload() API scrollable支持动态添加和删除滚动项的功能。在动态添加或删除滚动项以后，调用此方法来自动更新分页导航以及滚动项移动的相关信息。
prev() API 跳转到该滚动项的前一项（如果该滚动项不是第一个滚动项）
next() API 跳转到该滚动项的下一项（如果该滚动项不是最后一个滚动项）
seekTo(index) API 跳转到指定索引处的滚动项。
move(offset) API 将处于当前状态（激活）的滚动项位置由当前滚动项向前/后移动offset。Offset为正，则滚动项向右/下移动，否则，向左/上移动。比如:move(2),则处于当前状态的滚动项的索引由i滚动项转移至i+2滚动项。
prevPage() API 跳转到前一页（如果该页不是第一页）。
nextPage() API 跳转到后一页（如果该页不是最后一页）。
setPage(index) API 跳转到第index页。比如，index=2,那么会从当前页跳转到第3页。
movePage(offset) API 用于将显示页的位置由当前页切换到该页/后offset页，该方法其他解释类似于(offset)。
begin() API 跳转到第一个滚动项，相当于seekTo(0)。
end() API 跳转到最后一个滚动项。
click(index) API 使第index个滚动项处于选中（激活）状态。
　 　 　
onBeforeSeek(fn) API 参见配置对象的onBeforeSeek相关说明
onSeek(fn) API 参见配置对象的onSeek相关说明

注意：上面方法表中prev()方法以下的方法除了表中携带的参数外，还包含两个隐含参数：speed和callback。其中speed参数是用 于控制滚动项的动画效果持续时间的，而callback为其回调方法。具体实现可参见scrollable的prev()方法使用示例。

最后，给出本scrollable系列的完整示例代码：

[xhtml] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.   
  4. <mce:script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js" mce_src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></mce:script>  
  5. <mce:script src="http://static.flowplayer.org/js/jquery.mousewheel.js" mce_src="http://static.flowplayer.org/js/jquery.mousewheel.js"></mce:script>  
  6. <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-navig.css" mce_href="http://static.flowplayer.org/tools/css/scrollable-navig.css" />  
  7.   
  8. <mce:style><!--  
  9. div.scrollable {    
  10.     position:relative;  
  11.     overflow:hidden;  
  12.     width: 646px;      
  13.     height:300px;     
  14. }  
  15.   
  16. #thumbs {     
  17.     position:absolute;  
  18.     width:20000em;    
  19.     clear:both;  
  20.     border:1px solid #222;  
  21. }  
  22.   
  23. a.prev, a.next {  
  24.     margin-top:118px;     
  25. }  
  26.   
  27. #thumbs div {  
  28.     float:left;  
  29.     width:214px;  
  30.     height:300px;  
  31.     background:#333 url(http://static.flowplayer.org/img/global/gradient/h150.png) repeat-x 0 146px;  
  32.     color:#fff;  
  33.     border-left:1px solid #333;  
  34.     cursor:pointer;  
  35. }  
  36.   
  37. #thumbs div.hover {  
  38.     background-color:#444;    
  39. }  
  40.   
  41. #thumbs div.active {  
  42.     background-color:#066;  
  43.     cursor:default;  
  44. }  
  45.   
  46. #thumbs h3, #thumbs p, #thumbs span {  
  47.     margin:13px;          
  48.     font-family:"bitstream vera sans";  
  49.     font-size:13px;  
  50.     color:#fff;   
  51. }  
  52.   
  53. #thumbs h3 em {  
  54.     font-style:normal;  
  55.     color:yellow;  
  56. }  
  57. --></mce:style><style mce_bogus="1">div.scrollable {    
  58.     position:relative;  
  59.     overflow:hidden;  
  60.     width: 646px;      
  61.     height:300px;     
  62. }  
  63.   
  64. #thumbs {     
  65.     position:absolute;  
  66.     width:20000em;    
  67.     clear:both;  
  68.     border:1px solid #222;  
  69. }  
  70.   
  71. a.prev, a.next {  
  72.     margin-top:118px;     
  73. }  
  74.   
  75. #thumbs div {  
  76.     float:left;  
  77.     width:214px;  
  78.     height:300px;  
  79.     background:#333 url(http://static.flowplayer.org/img/global/gradient/h150.png) repeat-x 0 146px;  
  80.     color:#fff;  
  81.     border-left:1px solid #333;  
  82.     cursor:pointer;  
  83. }  
  84.   
  85. #thumbs div.hover {  
  86.     background-color:#444;    
  87. }  
  88.   
  89. #thumbs div.active {  
  90.     background-color:#066;  
  91.     cursor:default;  
  92. }  
  93.   
  94. #thumbs h3, #thumbs p, #thumbs span {  
  95.     margin:13px;          
  96.     font-family:"bitstream vera sans";  
  97.     font-size:13px;  
  98.     color:#fff;   
  99. }  
  100.   
  101. #thumbs h3 em {  
  102.     font-style:normal;  
  103.     color:yellow;  
  104. }</style>  
  105.   
  106.   
  107.   
  108.   
  109. <!-- navigator -->  
  110. <div class="navi"></div>  
  111.   
  112. <!-- prev link -->  
  113. <a class="prev"></a>  
  114.   
  115. <!-- root element for scrollable -->  
  116. <div class="scrollable">  
  117.       
  118.     <div id="thumbs">  
  119.       
  120.           
  121.             <div>  
  122.               
  123.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" />  
  124.                   
  125.                 <h3><em>1. </em>An example title</h3>  
  126.                   
  127.                 <p>  
  128.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  129.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  130.                 </p>  
  131.                   
  132.                 <span class="blue">60 sec</span>  
  133.                   
  134.             </div>  
  135.           
  136.             <div>  
  137.               
  138.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" />  
  139.                   
  140.                 <h3><em>2. </em>An example title</h3>  
  141.                   
  142.                 <p>  
  143.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  144.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  145.                 </p>  
  146.                   
  147.                 <span class="blue">80 sec</span>  
  148.                   
  149.             </div>  
  150.           
  151.             <div>  
  152.               
  153.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" />  
  154.                   
  155.                 <h3><em>3. </em>An example title</h3>  
  156.                   
  157.                 <p>  
  158.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  159.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  160.                 </p>  
  161.                   
  162.                 <span class="blue">100 sec</span>  
  163.                   
  164.             </div>  
  165.           
  166.             <div>  
  167.               
  168.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" />  
  169.                   
  170.                 <h3><em>4. </em>An example title</h3>  
  171.                   
  172.                 <p>  
  173.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  174.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  175.                 </p>  
  176.                   
  177.                 <span class="blue">120 sec</span>  
  178.                   
  179.             </div>  
  180.           
  181.             <div>  
  182.               
  183.                 <img src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" mce_src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" />  
  184.                   
  185.                 <h3><em>5. </em>An example title</h3>  
  186.                   
  187.                 <p>  
  188.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget   
  189.                     tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.  
  190.                 </p>  
  191.                   
  192.                 <span class="blue">140 sec</span>  
  193.                   
  194.             </div>  
  195.           
  196.     </div>  
  197.       
  198. </div>  
  199.   
  200. <!-- next link -->  
  201. <a class="next"></a>  
  202.   
  203. <!-- let rest of the page float normally -->  
  204. <br clear="all" />  
  205. <div>  
  206.     <input type="button" value="remove" id="remove"/>  
  207. </div>  
  208. <mce:script type="text/javascript"><!--  
  209. $(function() {        
  210.       
  211.     $("div.scrollable").scrollable({  
  212.         size: 3,  
  213.         vertical:false,  
  214.         //clickable:false,  
  215.         loop:true,//设置是否自动跳转（根据间隔时间）  
  216.         //interval: 1000,//设置间歇时间间隔   
  217.         //speed:2000,  
  218.         items: '#thumbs',    
  219.         //prev:'.prev',//跳转到上一项  
  220.         //next:'.next'//跳转到下一项  
  221.         prevPage:'.prev',//跳转到上一页  
  222.         nextPage:'.next',//跳转到下一页  
  223.         hoverClass: 'hover',  
  224.         easing:'linear'  
  225.     });   
  226.       
  227.     var scrollable=$("div.scrollable").scrollable();   
  228.     //alert(scrollable.getConf().prev);//获取配置对象中的prev属性  
  229.     scrollable.getConf().speed=200;//设置配置对象的speed属性  
  230.     //alert(scrollable.getIndex());//获取当前滚动项的索引  
  231.     //alert(scrollable.getItems().length);//获取当前滚动项的数量  
  232.     //alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable)，并将所有滚动项显示出来  
  233.     //alert(scrollable.getPageAmount());//获取当前滚动栏分页数  
  234.     //alert(scrollable.getPageIndex());//获取当前所在分页  
  235.     //alert(scrollable.getRoot().html());//获取滚动项的上一级节点（id=thumbs）  
  236.     //alert(scrollable.getSize());  
  237.     //alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量  
  238.     scrollable.next();//如果有下一个滚动项，则跳转到下一个滚动项  
  239.     scrollable.prev(3000,function(){return true});//跳转到前一滚动项  
  240.     //var seekTo= scrollable.click(0).seekTo(2,1000,function(){  
  241.         //alert(this.getIndex());  
  242.     //});  
  243.       
  244.     //scrollable.move(2);  
  245.     //scrollable.prevPage();//跳转到前一页  
  246.     //scrollable.nextPage();//跳转到下一页  
  247.     //scrollable.setPage(1);//跳转到下一页  
  248.     //scrollable.begin();//跳转到第一个滚动项  
  249.     //scrollable.end();//跳转到最后一个滚动项  
  250.     scrollable.click(3);//使第四个滚动项处于选中状态  
  251.       
  252.     scrollable.onBeforeSeek(function(){  
  253.             alert("you click the "+this.getIndex()+"st scrollable item!");  
  254.     });  
  255.       
  256.     $("#remove").click(function(){  
  257.         scrollable.getItems().filter(":last").remove();//删除最后一个滚动项  
  258.         scrollable.reload().prev();//自动更新相关配置信息，并跳转到被删除滚动项的前一项  
  259.     });  
  260.       
  261. });  
  262. // --></mce:script>  

 

你可能感兴趣的:(jquery)

  • C# 开发教程-入门基础 天马3798 教程系列整理c#开发语言
    1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
  • html 删除事件,html 事件的添加和删除 列蒂齐亚 html删除事件
    jQuery在jQuery1.7版本中bind()unbind(),live()die(),on()off(),delegate()下面我们给li元素添加事件bind()旧版写法:事件不能适用脚本创建的新元素live()旧版写法:适用脚本创建的新元素写法，但性能极不好on()新版写法，事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添加事件的元素本身。$("ulli").bi
  • 动态生成的html元素绑定click事件 .NET跨平台 Jquery及其组件htmljquery
    第一篇博客，开启技术博客的生涯，欢迎大家批评指教（坚信妹子也可以做好程序猿）今天想说帮公司做项目的时候遇到的一个小问题，动态添加html元素以后再去事件监听出问题。在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。就是上面的一张表格要动态实现添加行，然后序列号还要随着增加，当删除的时候序列号依旧是按顺序排列。刚开始使用jQuery的on方法来解决，但是发现一个问题会出现事件绑定很多次
  • 前端页面实现table可拖动改变列宽 牧 码 人 jsjQueryjs表格拖动csscolResizable
    此处实现页面的table表格可以自由拖动列宽，拖动时表格内文字不换行，超出部分以...代替，实现步骤如下：1.首先引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery，（1）colResizable可以去：http://www.bacubacu.com/colresizable/#rangeSlider下载（2）引入文件：2.编写j
  • 关于jquery的on(“click”,function(){}),事件绑定无效 微特尔普拉斯 javascriptjquery
    之前在做jquery时,遇到一个问题,就是我在append一个给啊标签绑定click点击事件时不起作用,jquery的版本时3.4.1,也找不到起的错误.就是没触发:$(self).find(".comment-action.cancel").off("click");//console.log("点击了取消回复的按钮!");$(self).find(".comment-action.cancel
  • （hilo）摇钱树项目梳理 大胡子111
    摇钱树项目用到了：1.jquery（js库）2.hilo.js(游戏框架)3.tida.js（淘宝相关api--要在淘宝中实现摇一摇功能）4.原生陀螺仪（因为要在微信中实现摇一摇功能）5.静态文件资源预加载项目组成部分：1.摇钱树2.摇一摇按钮3.树下礼包4.游戏标题5.树上的红包和金币6.音乐7.获奖记录7.活动规则（活动说明/玩法介绍）8.红包雨下落9.地上红包10.获奖/失败层11.玩法介绍
  • jQuery Easyui 源码分析之combo组件 90后北京程序员 前端-easyuieasyui之combobox
    /***jQueryEasyUI1.3.1*该源码完全由压缩码翻译而来，并非网络上放出的源码，请勿索要。*/(function($){functionsetSize(target,width){varopts=$.data(target,"combo").options;varcombo=$.data(target,"combo").combo;varpanel=$.data(target,"co
  • jquery打包到webpack项目 不cong明的亚子 前端webpackjqueryjavascript
    入口文件—index.jswindow.$=require('jquery')webpack.config.jsconstwebpack=require('webpack')module.exports={...plugins:[...newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery'})...]...}
  • 通过前端实现导出生成pdf文件并下载 银河小铁皮 vue原生JS前端javascriptvue.js
    通过前端实现导出生成pdf文件并下载使用jspdf.js+html2canvas插件，实现前端生成pdf并下载的功能步骤如下1、先通过npm安装插件npminstalljspdf.jsnpminstallhtml2canvas2、单独在utils文件夹下，新建文件，存放处理代码/*eslint-disable*///不使用JQuery版的importhtml2canvasfrom'html2can
  • java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署 一梵sheji288 javamybatisvue.js
    java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、
  • TypeScript---类型批注 Anglie
    TS通过类型批注提供静态类型，方便在编译时启动类型检查，这不是必须的，甚至可以被忽略，去使用js常规的动态类型。基本类型的批注是number,bool,string,弱类型或动态类型的结构可以是任意类型。将类型批注导出到一个单独的文件，方便使用类型已经被编译成为js的ts脚本的类型信息可用。批注可以为一个现有的js库声明。就像已经为node.js和jquery.js所做的那样。当没有给出类型时，T
  • 基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件 练练科技 java课程设计mysql
    基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署 鸿源网络 数据库mysqljava
    java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
  • 基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署 源新网络 java开发语言
    基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • jQuery选择器 VaporGas 前端jquery前端javascript学习
    jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");代码分析：获取并设置网页中所有元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大，种类也很多，分类如下：类CSS选择器基本选择器层次
  • Java架构师学习路线 网络全息测量 心得体会
    (1)第一步：研究spring,hibernate。通过研究jeecms开源框架。也同时学习css,html,javascript,jquery.以前都学习过，不过没有系统学习过，现在必须系统学习。同时看cms相关的论文。然后，改造jeecms能够改为自己的一个开源框架，以后开发cms系统都用我自己开发的框架，作为第一阶段的成果。(2)第二步：学习开源工作流引擎Activiti5，jbpm4.4以
  • AJAX实时表单验证系统 三年九班蓝同学
    本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重
  • 利用jQuery框架的ajax请求获取json格式的数据 听海边涛声 jqueryajaxjson
    Document$('#btn').click(()=>{$.get('http://localhost:8080/jsajaxproject/jquery_json','username=tom&age=20',(data)=>{//alert(data)alert(data.name+'\t'+data.age+'\t'+data.gender)},'json')})点击按钮：
  • jquery加载页面的方法(页面加载完成就执行) JaosnY JQueryjquery自动加载
    转自http://www.jb51.net/article/27444.htmjquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别。1、$(function(){$("#a").click(function(){//addingyourcodehere});});2、$(document).ready(functi
  • jquery事件 上心心上
    jquery事件事件函数列表：blur()元素失去焦点focus()元素获得焦点change()表单元素的值发生变化click()鼠标单击dblclick()鼠标双击mouseover()鼠标进入（进入子元素也触发）mouseout()鼠标离开（离开子元素也触发）mouseenter()鼠标进入（进入子元素不触发）mouseleave()鼠标离开（离开子元素不触发）hover()同时为mousee
  • node模块 weiweiweb888 前端javascriptbootstrap
    模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会
  • jQuery中的ajax通信技术的讲解 盛夏绽放 jqueryajaxokhttp
    jQuery提供了多种方法来处理AJAX请求，这些方法简化了异步请求的创建和处理。以下是一些常用的jQueryAJAX方法及其演示：1.$.ajax()（1）解释这个方法是最基础也是最强大的AJAX方法，它可以接受一个配置对象来构建并发送HTTP请求。（2）示例：这是一个GET请求模版$.ajax({url:'https://api.example.com/data',//请求的URL地址type
  • 记录-小程序720°VR（跳转H5页面实现） 久违的小技巧 小程序小程序vrjavascript
    全景浏览提前准备1拍照支架/照片合成软件（KolorAutopanoGiga4.0）或者全景相机2pannellum（pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建，没有插件。）3H5页面引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax
  • HTML表格 一壶浊酒.. 前端开发html前端
    table,tr,td{border:lpxsolidsilver;}表格标题表头单元格HTMLCSSJavaScriptJQuery标准单元格合并行：rowspan在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。rowspan属性table,tr,td{border:1pxsolidsilver;}姓名:小明喜欢水果:苹果香蕉合并列：cols
  • 前端篇—ajax wolf67 Djangodjangojsajax
    文章目录前言一、基于JS的ajax实现1.1基础1.2完整代码示例1.3应用二、JSON和JSONP2.1什么是JSON2.2JSON语法2.3应用2.4json与django交互2.5json与xml比较三、基于jQuery的ajax实现3.1基础方法3.2快捷方法用法示例四、跨域请求4.1同源机制4.2jsonp的js实现（未完成）4.3jsonp的jQuery实现4.4jsonp的ajax实
  • 菜谱推荐系统(前台android原生,后台java,SSH,mysql) weixingliang_123 菜谱食谱android数据库java编程语言mysql
    Android菜谱推荐系统(前台android原生,后台java,SSH,mysql)(程序代码,MySQL数据库)【运行环境】MyEclipse(后台)Eclipse(前台)JDK1.7tomcat7【技术栈】JAVA,JSP,mvc,SSH,MYSQL,HTML,CSS,JAVASCRIPT,JQUERY,android原生【项目包含内容】【下载全套源码】【项目功能介绍】
  • 【jQuery】前端八股文面试题 菜鸟una 前端八股文面试题前端jqueryjavascript
    jQuery这个问的没有那么多，暂时我被问到的就这几个。大家可以直接订阅专栏。文章目录jQuery1.jQuery常见的方法有哪几个？2.在jQuery中，常见使用委托的事件有哪些？1）点击事件（click）2）鼠标悬停事件（mouseenter和mouseleave）3）表单提交事件（submit）4）输入框变化事件（change）3.在jQuery中，常见的鼠标事件方法有哪些？1）click（
  • jQuery第八章 原生ajax 小涛涛啊！ jqueryjquery
    第八章原生ajax1：ajax的概念AJAX=AsynchronousJavaScriptandXML（异步的JavaScript和XML）。AJAX不是新的编程语言，而是一种使用现有标准的新方法。*AJAX异步请求数据。什么是AJAX？AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着
  • java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档 影伴设计 java开发语言前端
    java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://pan.b
  • 第三章：发送AJAX请求的几种方式 Muko_0x7d2 AJAXajax
    1.jquery发送Ajax请求1.1引进jQuery资源进入bootcdn.cn网站搜索jQuery复制script标签放到目标html文件head标签中添加跨源的属性的设置crossorigin="anonymous"1.2jQuery发送请求的四个参数：url参数（可以没有）函数响应体类型（一般为json）1.3GET请求请求类型为get参数在名称里面//1.发送GET请求$('button
  • [黑洞与暗粒子]没有光的世界 comsci
         无论是相对论还是其它现代物理学,都显然有个缺陷,那就是必须有光才能够计算      但是,我相信,在我们的世界和宇宙平面中,肯定存在没有光的世界....      那么,在没有光的世界,光子和其它粒子的规律无法被应用和考察,那么以光速为核心的 &nbs
  • jQuery Lazy Load 图片延迟加载 aijuans jquery
    基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。 对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。 版本： jQuery v1.4.4+ jQuery Lazy Load v1.7.2 注意事项： 需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src
  • 使用Jodd的优点 Kai_Ge jodd
    1.  简化和统一 controller ，抛弃 extends SimpleFormController ，统一使用 implements Controller 的方式。 2.  简化 JSP 页面的 bind, 不需要一个字段一个字段的绑定。 3.  对 bean 没有任何要求，可以使用任意的 bean 做为 formBean。   使用方法简介
  • jpa Query转hibernate Query 120153216 Hibernate
    public List<Map> getMapList(String hql, Map map) { org.hibernate.Query jpaQuery = entityManager.createQuery(hql); if (null != map) { for (String parameter : map.keySet()) { jp
  • Django_Python3添加MySQL/MariaDB支持 2002wmj mariaDB
    现状 首先，[email protected] 中默认的引擎为 django.db.backends.mysql 。但是在Python3中如果这样写的话，会发现 django.db.backends.mysql 依赖 MySQLdb[5] ，而 MySQLdb 又不兼容 Python3 于是要找一种新的方式来继续使用MySQL。 MySQL官方的方案 首先据MySQL文档[3]说，自从MySQL
  • 在SQLSERVER中查找消耗IO最多的SQL 357029540 SQL Server
    返回做IO数目最多的50条语句以及它们的执行计划。 select top 50   (total_logical_reads/execution_count) as avg_logical_reads,  (total_logical_writes/execution_count) as avg_logical_writes,  (tot
  • spring UnChecked 异常 官方定义！ 7454103 spring
      如果你接触过spring的 事物管理！那么你必须明白 spring的 非捕获异常！ 即 unchecked 异常！ 因为 spring 默认这类异常事物自动回滚！！ public static boolean isCheckedException(Throwable ex) { return !(ex instanceof RuntimeExcep
  • mongoDB 入门指南、示例 adminjun javamongodb操作
    一、准备工作 1、 下载mongoDB 下载地址：http://www.mongodb.org/downloads 选择合适你的版本 相关文档：http://www.mongodb.org/display/DOCS/Tutorial 2、 安装mongoDB A、 不解压模式： 将下载下来的mongoDB-xxx.zip打开，找到bin目录，运行mongod.exe就可以启动服务，默
  • CUDA 5 Release Candidate Now Available aijuans CUDA
    The CUDA 5 Release Candidate is now available at http://developer.nvidia.com/<wbr></wbr>cuda/cuda-pre-production. Now applicable to a broader set of algorithms, CUDA 5 has advanced fe
  • Essential Studio for WinRT网格控件测评 Axiba JavaScripthtml5
    Essential Studio for WinRT界面控件包含了商业平板应用程序开发中所需的所有控件，如市场上运行速度最快的grid 和chart、地图、RDL报表查看器、丰富的文本查看器及图表等等。同时，该控件还包含了一组独特的库，用于从WinRT应用程序中生成Excel、Word以及PDF格式的文件。此文将对其另外一个强大的控件——网格控件进行专门的测评详述。 网格控件功能 1、
  • java 获取windows系统安装的证书或证书链 bewithme windows
          有时需要获取windows系统安装的证书或证书链，比如说你要通过证书来创建java的密钥库  。 有关证书链的解释可以查看此处 。   public static void main(String[] args) { SunMSCAPI providerMSCAPI = new SunMSCAPI(); S
  • NoSQL数据库之Redis数据库管理(set类型和zset类型) bijian1013 redis数据库NoSQL
    4.sets类型         Set是集合，它是string类型的无序集合。set是通过hash table实现的，添加、删除和查找的复杂度都是O(1)。对集合我们可以取并集、交集、差集。通过这些操作我们可以实现sns中的好友推荐和blog的tag功能。         sadd：向名称为key的set中添加元
  • 异常捕获何时用Exception，何时用Throwable bingyingao
    用Exception的情况 try {        //可能发生空指针、数组溢出等异常         } catch (Exception e) {          
  • 【Kafka四】Kakfa伪分布式安装 bit1129 kafka
    在http://bit1129.iteye.com/blog/2174791一文中，实现了单Kafka服务器的安装，在Kafka中，每个Kafka服务器称为一个broker。本文简单介绍下，在单机环境下Kafka的伪分布式安装和测试验证   1. 安装步骤   Kafka伪分布式安装的思路跟Zookeeper的伪分布式安装思路完全一样，不过比Zookeeper稍微简单些(不
  • Project Euler bookjovi haskell
    Project Euler是个数学问题求解网站，网站设计的很有意思，有很多problem，在未提交正确答案前不能查看problem的overview，也不能查看关于problem的discussion thread，只能看到现在problem已经被多少人解决了，人数越多往往代表问题越容易。     看看problem 1吧： Add all the natural num
  • Java-Collections Framework学习与总结-ArrayDeque BrokenDreams Collections
            表、栈和队列是三种基本的数据结构，前面总结的ArrayList和LinkedList可以作为任意一种数据结构来使用，当然由于实现方式的不同，操作的效率也会不同。         这篇要看一下java.util.ArrayDeque。从命名上看
  • 读《研磨设计模式》-代码笔记-装饰模式-Decorator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.io.BufferedOutputStream; import java.io.DataOutputStream; import java.io.FileOutputStream; import java.io.Fi
  • Maven学习(一) chenyu19891124 Maven私服
        学习一门技术和工具总得花费一段时间，5月底6月初自己学习了一些工具，maven+Hudson+nexus的搭建，对于maven以前只是听说，顺便再自己的电脑上搭建了一个maven环境，但是完全不了解maven这一强大的构建工具，还有ant也是一个构建工具，但ant就没有maven那么的简单方便，其实简单点说maven是一个运用命令行就能完成构建，测试，打包，发布一系列功
  • [原创]JWFD工作流引擎设计----节点匹配搜索算法(用于初步解决条件异步汇聚问题) 补充 comsci 算法工作PHP搜索引擎嵌入式
    本文主要介绍在JWFD工作流引擎设计中遇到的一个实际问题的解决方案，请参考我的博文"带条件选择的并行汇聚路由问题"中图例A2描述的情况(http://comsci.iteye.com/blog/339756),我现在把我对图例A2的一个解决方案公布出来，请大家多指点 节点匹配搜索算法(用于解决标准对称流程图条件汇聚点运行控制参数的算法) 需要解决的问题：已知分支
  • Linux中用shell获取昨天、明天或多天前的日期 daizj linuxshell上几年昨天获取上几个月
    在Linux中可以通过date命令获取昨天、明天、上个月、下个月、上一年和下一年 # 获取昨天 date -d 'yesterday'  # 或 date -d 'last day' # 获取明天 date -d 'tomorrow'   # 或 date -d 'next day' # 获取上个月 date -d 'last month' #
  • 我所理解的云计算 dongwei_6688 云计算
          在刚开始接触到一个概念时，人们往往都会去探寻这个概念的含义，以达到对其有一个感性的认知，在Wikipedia上关于“云计算”是这么定义的，它说：        Cloud computing is a phrase used to describe a variety of computing co
  • YII CMenu配置 dcj3sjt126com yii
    Adding id and class names to CMenu We use the id and htmlOptions to accomplish this. Watch. //in your view $this->widget('zii.widgets.CMenu', array( 'id'=>'myMenu', 'items'=>$this-&g
  • 设计模式之静态代理与动态代理 come_for_dream 设计模式
    静态代理与动态代理        代理模式是java开发中用到的相对比较多的设计模式，其中的思想就是主业务和相关业务分离。所谓的代理设计就是指由一个代理主题来操作真实主题，真实主题执行具体的业务操作，而代理主题负责其他相关业务的处理。比如我们在进行删除操作的时候需要检验一下用户是否登陆，我们可以删除看成主业务，而把检验用户是否登陆看成其相关业务
  • 【转】理解Javascript 系列 gcc2ge JavaScript
    理解Javascript_13_执行模型详解 摘要: 在《理解Javascript_12_执行模型浅析》一文中,我们初步的了解了执行上下文与作用域的概念，那么这一篇将深入分析执行上下文的构建过程，了解执行上下文、函数对象、作用域三者之间的关系。函数执行环境简单的代码:当调用say方法时，第一步是创建其执行环境，在创建执行环境的过程中，会按照定义的先后顺序完成一系列操作:1.首先会创建一个
  • Subsets II hcx2013 set
    Given a collection of integers that might contain duplicates, nums, return all possible subsets. Note: Elements in a subset must be in non-descending order. The solution set must not conta
  • Spring4.1新特性——Spring缓存框架增强 jinnianshilongnian spring4
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • shell嵌套expect执行命令 liyonghui160com
        一直都想把expect的操作写到bash脚本里,这样就不用我再写两个脚本来执行了,搞了一下午终于有点小成就,给大家看看吧.   系统:centos 5.x   1.先安装expect yum -y install expect   2.脚本内容: cat auto_svn.sh   #!/bin/bash
  • Linux实用命令整理 pda158 linux
    0. 基本命令 　　linux 基本命令整理 　 　1. 压缩 解压 　　tar -zcvf a.tar.gz a   #把a压缩成a.tar.gz 　　tar -zxvf a.tar.gz     #把a.tar.gz解压成a 　 　2. vim小结 　　2.1 vim替换 　　:m,ns/word_1/word_2/gc  
  • 独立开发人员通向成功的29个小贴士 shoothao 独立开发
    概述：本文收集了关于独立开发人员通向成功需要注意的一些东西,对于具体的每个贴士的注解有兴趣的朋友可以查看下面标注的原文地址。 明白你从事独立开发的原因和目的。 保持坚持制定计划的好习惯。 万事开头难，第一份订单是关键。 培养多元化业务技能。 提供卓越的服务和品质。 谨小慎微。 营销是必备技能。 学会组织，有条理的工作才是最有效率的。 “独立
  • JAVA中堆栈和内存分配原理 uule java
    1、栈、堆 1.寄存器：最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制.2. 栈：存放基本类型的变量数据和对象的引用，但对象本身不存放在栈中，而是存放在堆（new 出来的对象）或者常量池中（字符串常量对象存放在常量池中。）3. 堆：存放所有new出来的对象。4. 静态域：存放静态成员（static定义的）5. 常量池：存放字符串常量和基本类型常量（public static f
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他