关键词采集 关键词采集工具

Tag: jquery预览模式: 普通 | 列表

jQuery日历插件FullCalendar使用方法

作者:admin  日期:2021-04-23

 html代码片段

XML/HTML代码
  1. <head>  
  2. <meta charset='utf-8' />  
  3. <link href='../fullcalendar.css' rel='stylesheet' />  
  4. <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />  
  5. <script src='../lib/moment.min.js'></script>  
  6. <script src='../lib/jquery.min.js'></script>  
  7. <script src='../fullcalendar.min.js'></script>  
  8. </head>  
  9. <div id="calendar"></div>

js代码片段

JavaScript代码
  1. function initdata(){  
  2.     var calendar = $('#calendar').fullCalendar({  
  3.          /**   
  4.              *  默认显示的视图   
  5.              *  month       一页显示一月, 日历样式   
  6.                 basicWeek   一页显示一周, 无特殊样式   
  7.                 basicDay    一页显示一天, 无特殊样式   
  8.                 agendaWeek  一页显示一周, 显示详细的24小时表格   
  9.                 agendaDay   一页显示一天, 显示详细的24小时表格   
  10.                 listYear    年列表（V3.*支持）   
  11.                 listMonth   月列表（V3.*支持）   
  12.                 listWeek    周列表（V3.*支持）   
  13.                 listDay     日列表（V3.*支持）   
  14.              */    
  15.             defaultView:"agendaWeek",   //进入组件默认渲染的视图，默认为month    
  16.             customButtons: {//自定义header属性中按钮[customButtons与header并用]    
  17.                 myCustomButton: {    
  18.                 text: 'custom!',    
  19.                     click: function() {    
  20.   
  21.                     }    
  22.                 }    
  23.             },    
  24.             header: {    
  25.                 left: 'prev,next today',            //上一页、下一页、今天    
  26.                 center: 'title myCustomButton',     //居中：时间范围区间标题    
  27.                 right: 'month,agendaWeek,agendaDay,listWeek'//右边：显示哪些视图    
  28.             },    
  29.             height : 600,//组件高度，默认aspectRatio即纵横比；parent父容器大小；auto自动不带滚动条；  
  30.             contentHeight : 200,//组件中的内容高度，默认aspectRatio即纵横比；auto自动不带滚动条；支持数字和函数返回像素；  
  31. //          aspectRatio : 2,        //宽度:高度 比例，默认1.35，可自定义    
  32.             handleWindowResize : false, //组件随浏览器高宽变化自适应，默认true支持自适应    
  33. //          windowResizeDelay : 200,//窗体自适应延迟多少毫秒    
  34.             firstDay : 1, //视图从每周几开始，默认0为周日，1为周1，  
  35.             isRTL : false,//从右到左显示模式，默认false    
  36. //          weekends : false,//是否在视图中显示周六、周日，默认true    
  37. //          hiddenDays: [ 1,5 ],//隐藏星期1、星期5    
  38.             fixedWeekCount : false, //月视图下，显示6周（不够的显示下个月的）true；默认true    
  39.             weekNumbers : true, //是否在视图左边显示这是第多少周，默认false    
  40. //          businessHours : {}//设置哪些时间段重点标记颜色    
  41.             eventLimit: true,//数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数    
  42. //          eventLimitClick : "day",//接eventLimit属性，多余的内容点击事件，默认有一套弹窗格式，支持跳转到不同视图、也支持自定义function，详情见官方文档    
  43.             viewRender : function(view,element){//在视图被渲染时触发（切换视图也触发） 参数view为视图对象，参数element为Jquery的视图Dom     
  44.             },    
  45. //          viewDestroy : function(view, element){}, //类似viewRender，在视图被销毁时触发    
  46.             windowResize : function(){//浏览器窗体变化时触发    
  47.             },    
  48. //          allDaySlot : false,   //视图在周视图、日视图顶部显示“全天”信息，默认true显示全天    
  49.             allDayText : "全天", //自定义全天视图的名称    
  50.             slotDuration : "01:00:00", //一格时间槽代表多长时间，默认00:30:00（30分钟）    
  51.             slotLabelFormat : "H(:mm)a",//日期视图左边那一列显示的每一格日期时间格式    
  52.             slotLabelInterval : "02:00:00", //日期视图左边那一列多长间隔显示一条日期文字(默认跟着slotDuration走的，可自定义)    
  53.             snapDuration : "05:00:00",//其实就是动态创建一个日程时，默认创建多长的时间块    
  54. //          scrollTime : "06:00:00",//多远开始往下滚动，默认6小时  
  55. //          minTime : "02:00:00",//周/日视图左边时间线显示的最小日期，默认00:00:00    
  56. //          maxTime : "08:00:00",//周/日视图左边时间线显示的最大日期，默认24:00:00    
  57.             slotEventOverlap : false,//相同时间段的多个日程视觉上是否允许重叠，默认true允许    
  58. //          listDayFormat : false,//listview视图下，每天的分割区，[左边]的标题自定义，false表示无标题    
  59. //          listDayAltFormat : false,//listview视图下，每天的分割区，[右边]的标题自定义，false表示无标题    
  60.             noEventsMessage : "L没数据啊", //listview视图下，无数据时显示提示    
  61.             defaultDate  : '2016-10-13',//默认显示那一天的日期视图    
  62.             nowIndicator : true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示    
  63. //          locale :  "zh-cn", //国际化，前提引用fileinput_locale_zh.js  
  64. //          timeFormat :  "h:mm", //全局的日期显示格式(自定义成如12:00或12am等)    
  65. //          columnFormat : "", //顶部日期显示格式  
  66. //          titleFormat : "",//顶部title区域格式化    
  67.             buttonText : {today:'今天',month:'月',week:'周',day:'日',listWeek:'列表'},  //对应顶部操作按钮的名称自定义    
  68.             monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份自定义命名    
  69.             monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份缩略命名（英语比较实用：全称January可设置缩略为Jan）    
  70.             dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],         
  71.             dayNamesShort: ["周日", "周一", "周二", "周三", "周四", 周五, "六"],    
  72.             weekNumberTitle : "周",//周的国际化,默认为"W"    
  73. //          displayEventTime : false,//每一个日程块中是否显示时间，默认true显示    
  74. //          displayEventEnd : true,//是否显示日程块中的“结束时间”，默认true，如果false则只显示开始时间    
  75.             eventLimitText  : "更多", //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义（应该与eventLimit: true一并用）    
  76.             dayPopoverFormat : "YYYY年M月D日", //点开"+2 more"弹出的小窗口标题，与eventLimitClick可以结合用    
  77.             navLinks : true,// “xx周”是否可以被点击，默认false，如果为true则周视图“周几”被点击之后进入日视图。本地测试：没什么效果    
  78. //          navLinkDayClick: function(date, jsEvent) { //依赖navLinks : true ， 点击顶部“日”时触发    
  79. //              return true;    
  80. //          },    
  81. //          navLinkWeekClick: function(weekStart, jsEvent) { //依赖navLinks : true ， 点击顶部“周”时触发     
  82.            },    
  83.             dayClick: function(date, jsEvent, view) {//空白的日期区，单击时触发     
  84.             },    
  85.             eventClick: function(calEvent, jsEvent, view) {//日程区块，单击时触  
  86.                 return false;  //return false可以阻止点击后续事件发生（比如event中的url跳转事件）    
  87.             },    
  88.             eventMouseover: function(calEvent, jsEvent, view){//鼠标在日程区块上时触发    
  89.                 $(this).css('background-color', 'gray');    
  90.             },    
  91.             eventMouseout: function(calEvent, jsEvent, view){//鼠标从日程区块离开时触发    
  92.                 $(this).css('background-color', 'yellow');    
  93.             },    
  94.             selectable: true,//允许用户可以长按鼠标选择多个区域(比如月视图，可以选中多天；日视图可以选中多个小时)，默认false不能选择多区域的    
  95.             selectHelper: true,//接selectable，周/日视图在选择时是否预先画出“日程区块”的样式出来    
  96.             unselectAuto : true,//是否点击页面上的其他地方会导致当前的选择被清除，默认true    
  97.             unselectCancel : "",//一种方法来指定元素，会忽略unselectauto选项，默认''    
  98.             selectOverlap : true,//确定用户是否被允许选择被事件占用的时间段，默认true可占用时间段    
  99. //          selectConstraint : ,//限制用户选择指定时间段的日程数据：an event ID, "businessHours", object    
  100.             selectAllow : function(selectInfo){ //精确的编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择     
  101.                 return true;    
  102.             },    
  103.             select: function(start, end,jsEvent,view) { //点击空白区域/选择区域内容触发    
  104.             },    
  105.             unselect : function(view, jsEvent){//选择操作取消时触发    
  106.             },    
  107. /**Event Object配置start */    
  108. //          allDayDefault : null,//是否默认将日程全部显示在“全天”里面(boolean or null)，默认为undefined，即根据event时间值智能判断，这个属性太强悍，不敢用    
  109. //          startParam:"start",//Event Object中定义[开始时间]的变量，默认是start，可自定义变量名以防冲突    
  110. //          endParam:"end", //Event Object中定义[结束时间]的变量，默认是end，可自定义变量名以防冲突    
  111. //          timezoneParam : "timezone", //Event Object中定义[时区]的变量，默认是本地时区，可自定义变量名以防冲突，可更改时区如（ "America/Chicago" or "UTC"）    
  112.             lazyFetching : true,        //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的    
  113.             defaultTimedEventDuration : "02:00:00",     //在Event Object中如果没有end参数时使用，如start=7:00pm，则该日程对象时间范围就是7:00~9:00    
  114.             defaultAllDayEventDuration : { days: 1 },  //默认1天是多长，（有的是采用工作时间模式，所以支持自定义）    
  115. //          forceEventDuration : false,     //诉老夫无能为力，愣是没搞懂什么意思，默认false    
  116. //          eventDataTransform : function(eventData){return [events...]}, //当从第三方取数不规则时（如下面的JSON或google），可通过此钩子函数进行数据整理，转换为fullcalendar识别的event object    
  117.             loading : function(isLoading, view){ //视图数据加载中、加载完成触发    
  118.                 if(isLoading == true){    
  119.                     console.log("view:"+view+",开始加载");    
  120.                 }else if(isLoading == false){    
  121.                     console.log("view:"+view+",加载完成");    
  122.                 }else{    
  123.                     console.log("view:"+view+",除非天塌下来否则不会进这个分支");    
  124.                 }    
  125.             },    
  126. //          nextDayThreshold : "09:00:00",  //当一个事件的结束时间跨越到另一天，最短的时间，它必须为它的渲染，如果它在这一天。    
  127.             eventOrder : "title", //多个相同的日程数据排序方式，String / Array / Function, 默认值: "title"    
  128.             eventRender : function(event, element, view) {//当Event对象开始渲染时触发    
  129.             },    
  130. //          eventAfterRender : function( event, element, view ) { } //当Event对象结束渲染时触发    
  131.             eventAfterAllRender : function(view){  
  132.             },   //当所有Event对象渲染完成时触发    
  133. //          eventDestroy : function( event, element, view ) { }//一个Event DOM销毁时触发    
  134. /**Event Object配置end */    
  135. /**Event Rendering配置(一些样式等配置) start*/    
  136. //          eventColor: '#378006',      //不解释，所有的日程区块生效，如要对指定数据源生成参见EventSource，如要对指定Event生效，参见EventObject    
  137. //          eventBackgroundColor:"",    //同上，不解释    
  138. //          eventBorderColor:"",        //同上，不解释    
  139. //          eventTextColor:""           //同上，不解释    
  140. /**Event Rendering配置 end*/    
  141.             editable: true,//支持Event日程拖动修改，默认false    
  142.             eventStartEditable : true, //Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime    
  143.             eventDurationEditable : false,  //Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽    
  144. //          dragRevertDuration : 500, //拖拽取消恢复花费时间，单位毫秒，这个就用默认的差不多了    
  145.             dragOpacity:0.2,//拖拽时不透明度，0.0~1.0之间，数字越小越透明    
  146.             dragScroll : true,//是否在拖拽时自动移动容器，默认true    
  147.             eventOverlap : true, //拖拽时是否重叠    
  148.             eventConstraint : {//限制拖拽拖放的位置（即限制有些地方拖不进去）：an event ID, "businessHours", object    
  149.                 start: '10:00', // a start time (10am in this example)    
  150.                 end: '18:00', // an end time (6pm in this example)    
  151.                 dow: [ 1, 2, 3, 4 ] // days of week. an array of zero-based day of week integers (0=Sunday)  (Monday-Thursday in this example)    
  152.             },    
  153.             longPressDelay : 1000,  //面向可touch设备（如移动设备），长按多少毫秒即可拖动,默认1000毫秒（1S）    
  154.             eventDragStart : function(event, jsEvent, ui, view){//日程开始拖拽时触发    
  155.             },    
  156.             eventDragStop : function(event, jsEvent, ui, view){//日程拖拽停止  
  157.             },    
  158.             eventDrop : function(event, delta, revertFunc, jsEvent, ui, view){  //日程拖拽停止并且已经拖拽到其它位置了    
  159.             },    
  160.             eventResizeStart : function( event, jsEvent, ui, view ) {       //日程大小调整开始时触发    
  161.             },    
  162.             eventResizeStop : function(event, jsEvent, ui, view){           //日程大小调整停止时触发    
  163.             },    
  164.             eventResize : function(event, delta, revertFunc, jsEvent, ui, view){    //日程大小调整完成并已经执行更新时触发    
  165.             },    
  166. /*          访问后台URL，动态返回JSON数据的形式，这种是直接集成了jQuery.ajax，其实并不灵活   
  167.             events:  {     
  168.                 url: '/myfeed.php',   
  169.                 type: 'POST',   
  170.                 data: {   
  171.                     custom_param1: 'something',   
  172.                     custom_param2: 'somethingelse'   
  173.                 },   
  174.                 error: function() {   
  175.                     alert('there was an error while fetching events!');   
  176.                 },   
  177.                 color: 'yellow',   // a non-ajax option   
  178.                 textColor: 'black' // a non-ajax option   
  179.             },   
  180. */    
  181. /*          第二种：基于function的数据获取，通常是在切换上一页、下一页、视图切换时触发，非常适合动态数据获取   
  182.             events: function(start, end, timezone, callback) {   
  183.             $.ajax({   
  184.                 url: 'myxmlfeed.php',   
  185.                 dataType: 'xml',   
  186.                 data: {   
  187.                     // our hypothetical feed requires UNIX timestamps   
  188.                     start: start.unix(),   
  189.                     end: end.unix()   
  190.                 },   
  191.                 success: function(doc) {   
  192.                     var events = [];   
  193.                     $(doc).find('event').each(function() {   
  194.                         events.push({   
  195.                             title: $(this).attr('title'),   
  196.                             start: $(this).attr('start') // will be parsed   
  197.                         });   
  198.                     });   
  199.                     callback(events);   
  200.                 }   
  201.             });   
  202.             },   
  203. */    
  204.             events: [//第三种：直接是数组的形式传入    
  205.                 {    
  206.                     title: 'All Day Event',    
  207.                     start: '2016-10-13'    
  208.                 },    
  209.                 {    
  210.                     title: 'Long Event',    
  211.                     start: '2016-10-07',    
  212.                     end: '2016-10-10'    
  213.                 },    
  214.                 {    
  215.                     id: 991,    
  216.                     title: 'Repeating Event',    
  217.                     start: '2016-10-09T16:00:00'    
  218.                 },    
  219.                 {    
  220.                     id: 999,    
  221.                     title: 'Repeating Event',    
  222.                     start: '2016-10-16T16:00:00'    
  223.                 },    
  224.                 {    
  225.                     title: 'Conference',    
  226.                     start: '2016-10-11',    
  227.                     end: '2016-10-13'    
  228.                 },    
  229.                 {    
  230.                     title: 'Meeting',    
  231.                     start: '2016-10-12T10:30:00',    
  232.                     end: '2016-10-12T12:30:00'    
  233.                 },    
  234.                 {    
  235.                     title: 'Lunch',    
  236.                     start: '2016-10-12T12:00:00'    
  237.                 },    
  238.                 {    
  239.                     title: 'Meeting',    
  240.                     start: '2016-10-12T14:30:00'    
  241.                 },    
  242.                 {    
  243.                     title: 'Happy Hour',    
  244.                     start: '2016-10-12T17:30:00'    
  245.                 },    
  246.                 {    
  247.                     title: 'Dinner',    
  248.                     start: '2016-10-12T20:00:00'    
  249.                 },    
  250.                 {    
  251.                     title: 'Birthday Party',    
  252.                     start: '2016-10-13T07:00:00'    
  253.                 },    
  254.                 {    
  255.                     title: 'Click for Google',    
  256.                     url: 'http://google.com/',    
  257.                     start: '2016-10-28'    
  258.                 }    
  259.             ]    
  260.   
  261. /*          多数据源支持:场景可能是从多种模块取数据，比如从会议取会议日程、从计划取计划日程，而且要求会议、计划日程颜色显示不一样，那么就可以用这种   
  262.             eventSources: [   
  263.                 {   
  264.                     events: function(start, end, timezone, callback){...},   
  265.                     color: 'black',     // an option!   
  266.                     textColor: 'yellow' // an option!   
  267.                 },   
  268.                 {   
  269.                     googleCalendarId: 'abcd1234@group.calendar.google.com',   
  270.                     color: 'yellow',   // an option!   
  271.                     textColor: 'black' // an option!   
  272.                 }   
  273.             ]   
  274. */    
  275.   
  276.   
  277.         });    
  278.   
  279. //      日期格式需要遵守fullCalendar引用的moment.js规则：https://fullcalendar.io/docs/utilities/Moment/    
  280.   
  281. //      Event Object 就是一个日程区块，数据元，通常以数组的形式传入option->events中 见 https://fullcalendar.io/docs/event_data/Event_Object/    
  282. //      Event Source Object 不好理解，大概就是一组日程数据源对象吧，可以是一个events、也可以是JSON、还可以是Google Calendar的数据 见 https://fullcalendar.io/docs/event_data/Event_Source_Object/    
  283.   
  284. /* updateEvent更新一个日程对象   
  285. $('#calendar').fullCalendar({   
  286.     eventClick: function(event, element) {   
  287.         event.title = "CLICKED!";   
  288.         //更新日程对象信息   
  289.         $('#calendar').fullCalendar('updateEvent', event);   
  290.     }   
  291. });   
  292. */    
  293.   
  294. //      .fullCalendar( 'clientEvents' [, idOrFilter ] ) ->   Array  从内存中筛选指定的event,[, idOrFilter ]==>省略号删除全部、ID数组删除有ID的日程、也可传入Event对象，建议使用时详细查看官方文档    
  295. //      .fullCalendar( 'removeEvents' [, idOrFilter ] )     删除日程，[, idOrFilter ]参见clientEvents，建议使用时详细查看官方文档    
  296. //      .fullCalendar( 'refetchEvents' )                    刷新所有数据源的日历视图，建议使用时详细查看官方文档    
  297. //      .fullCalendar( 'refetchEventSources', sources )     刷新指定数据源的日历视图（与eventSource有关配合用），建议使用时详细查看官方文档    
  298. //      .fullCalendar( 'addEventSource', source )           动态添加一个数据源（与eventSource有关配合用），建议使用时详细查看官方文档    
  299. //      .fullCalendar( 'removeEventSource', source )        动态删除一组数据源（与eventSource有关配合用），建议使用时详细查看官方文档    
  300. //      .fullCalendar( 'removeEventSources', optionalSourcesArray ) 动态删除多个数据源，如果optionalSourcesArray未指定则删除全部，建议使用时详细查看官方文档    
  301. //      .fullCalendar( 'getEventSources' )                  返回所有的数据源    
  302. //      .fullCalendar( 'getEventSourceById', id )           根据ID获取数据源    
  303.   
  304. //      $('#calendar').fullCalendar('render');  渲染日历视图    
  305. //      $('#calendar').fullCalendar('destory'); 销毁日历视图    
  306.   
  307. //      var view = $('#calendar').fullCalendar('getView'); //获取当前视图对象    
  308. //      console.log("name:"+view.name+"|title:"+view.title+"|start:"+view.start+"|end:"+view.end+"|intervalStart:"+view.intervalStart+"|intervalEnd:"+view.intervalEnd);    
  309. //      $('#calendar').fullCalendar('changeView', "month" ); //切换为其它视图    
  310. //      $('#calendar').fullCalendar('prev'); //切换到当前视图的上一页（类似于顶部的“<”箭头）    
  311. //      $('#calendar').fullCalendar('next'); //切换到当前视图的下一页（类似于顶部的“>”箭头）    
  312. //      $('#calendar').fullCalendar('prevYear') //切换到上一年    
  313. //      $('#calendar').fullCalendar('nextYear') //切换到下一年    
  314. //      $('#calendar').fullCalendar('today');   //日期视图跳转到“今天”    
  315. //      $('#calendar').fullCalendar( 'gotoDate', date );  //日期视图跳转到指定时间    
  316. //      $('#calendar').fullCalendar( 'incrementDate', duration ); //日期视图向前或向后移动固定的时间，duration可以为={ days:1, hours:23, minutes:59 }    
  317.   
  318. //      var moment = $('#calendar').fullCalendar('getDate');      //获取当前视图的日期对象，（如果月视图则返回月初到月末，周视图返回周初到周末）    
  319. //      console.log("The current date of the calendar is " + moment.format());    
  320. //      $('#calendar').fullCalendar( 'select', start, [ end ], [ resource ] ); //js动态选择某个时间段的日程    
  321. //      .fullCalendar( 'unselect' );  //js动态取消选择的日程    
  322.   
  323. //      var locale = $('#calendar').fullCalendar('option', 'locale');        //option支持get，注：不仅限于locale，还包括其它option操作    
  324. //      $('#calendar').fullCalendar('option', {locale: 'fr',isRTL: true});   //option支持set，注：不仅限于locale，还包括其它option操作    
  325.   
  326. //      var calendar = $('#calendar').fullCalendar('getCalendar'); //支持动态绑定/解绑fullcalendar中的事件    
  327. //      calendar.on('dayClick', function(date, jsEvent, view) {console.log('clicked on ' + date.format());});    
  328.   
  329. //      .fullCalendar( 'renderEvent', event [, stick ] );   //渲染一个新的Event，建Demo select方法    
  330. //      .fullCalendar( 'rerenderEvents' )                   //渲染那所有的Event    
  331.   
  332.     });  
  333. }  

 

Tags: jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 99

jQuery跳转到另一个页面

作者:admin  日期:2021-01-05

1.我们可以利用http的重定向来跳转

 
window.location.replace("http://www.baidu.com");
 
2.使用href来跳转
 
window.location.href = "http://www.baidu.com";
 
3.使用jQuery的属性替换方法
 
$(location).attr('href', 'http://www.baidu.com');
 
$(window).attr('location','http://www.baidu.com');
 
$(location).prop('href', 'http://www.baidu.com');

Tags: javascript jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 176

返回顶部的jquery插件

作者:admin  日期:2020-02-16

 

Easy Peasy

Download the minified version of the plugin, include it after jQuery and:

<script> jQuery(document).ready(function(){ jQuery.goup(); }); </script> 带参数的：点击下载此文件 
<script type="text/javascript">
        $(document).ready(function () {
            $.goup({
                trigger: 100,
                bottomOffset: 50,
                locationOffset: 70,
containerColor: '#990000',
                title: '返回顶部',
                titleAsText: false
            });
        });
    </script>

Demo

Yeah! You can see it in action on this page. If you scroll down, you can see, on the bottom right, the magic!

Options

Name Description Type Default
location On which side the button will be shown ("left" or "right") String right
locationOffset How many pixel the button is distant from the edge of the screen, based on the location setted Integer 20
bottomOffset How many pixel the button is distant from the bottom edge of the screen Integer 10
containerRadius Let you transform a square in a circle (yeah, it's magic!) Integer 10
containerClass The class name given to the button container String goup-container
arrowClass The class name given to the arrow container String goup-arrow
containerColor The color of the container (in hex format) String #000
arrowColor The color of the arrow (in hex format) String #fff
trigger After hoiw many scrolled down pixels the button must be shown (bypoassed by alwaysVisible) Integer 500
entryAnimation The animation of the show and hide events of the button ("slide" or "fade") String fade
alwaysVisible Set to true if u want the button to be always visible (bypass trigger) Boolean false
goupSpeed The speed at which the user will be brought back to the top ("slow", "normal" or "fast") String slow
hideUnderWidth The threshold of window width under which the button is permanently hidden Integer 500
title A text to show on the button mouse hover String ''
titleAsText If true the hover title becomes a true text under the button Boolean false
titleAsTextClass The class name given to the title text String goup-text
zIndex Set the z-index Integer 1

 点击下载

Tags: javascript jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 355

JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

作者:admin  日期:2019-10-06

 

JavaScript代码
  1. $(function(){  
  2.     //遍历获取的input元素对象数组，绑定click事件  
  3.     var len = $("input[type='file']").length;  
  4.     for(var i = 0; i < len; i++){  
  5.         $("input[type='file']").eq(i).click(function(){  
  6.             $(this).next().val("");  
  7.             $(this).next().hide();  
  8.             $(this).css("width","200px");  
  9.         })  
  10.     }  
  11. }  

jQuery获取：

jQuery.parent(expr)，找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr)，类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuery.contents()，返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，children()则只会返回节点

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next()，返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings()，返回兄弟姐妹节点，不分前后

jQuery.find(expr)，跟jQuery.filter(expr)完全不一样：

jQuery.filter()，是从初始的jQuery对象集合中筛选出一部分，而

jQuery.find()，的返回结果，不会有初始集合中的内容，比如$("p").find("span")，是从<p>元素开始找<span>，等同于$("p span")

JS获取：

JavaScript代码
  1. var chils= s.childNodes;  //得到s的全部子节点  
  2. var par=s.parentNode;   //得到s的父节点  
  3. var ns=s.nextSibling;   //获得s的下一个兄弟节点  
  4. var ps=s.previousSibling;  //得到s的上一个兄弟节点  
  5. var fc=s.firstChild;   //获得s的第一个子节点  
  6. var lc=s.lastChild;   //获得s的最后一个子节点  

JS获取节点父级，子级元素：JS的方法会比JQUERY麻烦很多，主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素：空的text元素，目前IE也是这样

XML/HTML代码
  1. <div id="test">  
  2. 　　<div></div>  
  3. 　　<div></div>  
  4. </div>  

查看更多...

Tags: javascript jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 366

bootstrap怎么设置下拉菜单不点击，改成鼠标悬停直接显示下拉菜单

作者:admin  日期:2017-05-22

 方法一：

实际上比较简单，只需要加一个css设置下hover的状态，把下拉菜单设置成block，具体css：

CSS代码
  1. .nav  
  2.  > li:hover .dropdown-menu {display: block;}  

 但是主导航失去链接的效果！

方法二：

不仅可以解决Bootstrap鼠标悬停的问题，还可以让一个菜单恢复链接实现点击
下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成了一个JQuery插件，在dropdown代码段中找到了关键的几句：
$(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.bs.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

把其中的click.bs.dropdown.data-api事件关闭就好，代码如下：

JavaScript代码
  1. $(document).ready(function(){  
  2.     $(document).off('click.bs.dropdown.data-api');  
  3. });  

这样可以让一级菜单恢复href属性，起到超链接功能。

至于下拉菜单悬浮，鼠标放上就显示，按照楼上的方法就好。或者用js来实现：

JavaScript代码
  1. $(document).ready(function(){  
  2.     dropdownOpen();//调用  
  3. });  

/**
 * 鼠标划过就展开子菜单，免得需要点击才能展开
 */

JavaScript代码
  1. function dropdownOpen() {  
  2.   
  3.     var $dropdownLi = $('li.dropdown');  
  4.   
  5.     $dropdownLi.mouseover(function() {  
  6.         $(this).addClass('open');  
  7.     }).mouseout(function() {  
  8.         $(this).removeClass('open');  
  9.     });  
  10. }  

 

Tags: jquery bootstrap

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 592

使用JQuery使Div居中

作者:admin  日期:2015-05-29

Div居中是一个比较常见的需求。下面介绍一种使用JQuery使Div居中的方法
先假设有这样一个Div，<div id="d">test</div>
首先是要把需要居中的Div进行绝对定位，如：
<style type="text/css">
#d {
position: absolute;
width: 500;
height: 300;
border: 1px solid red;
}
</style>
有了这样的样式定义之后就是使其居中的js代码了。

JavaScript代码
  1. var obj = $("#d");//获得相应的Div对象    
  2. var x = ($(window).width()-500)/2;//使用$(window).width()获得显示器的宽，并算出对应的Div离左边的距离    
  3. var y = ($(window).height()-300)/2;//使用$(window).height()获得显示器的高，并算出相应的Div离上边的距离    
  4. obj.css("top",y).css("left",x);  

上面这段代码可以在页面一加载完就执行。

改进后的代码：

JavaScript代码
  1. $(document).ready(function(){  
  2.     middle();  
  3. });  
  4. $(window).resize(function(){  
  5.     middle();  
  6. });  
  7. function middle(){  
  8.     var obj = $("#mainbg");//获得相应的Div对象    
  9.     var x = ($(window).width()-500)/2;//使用$(window).width()获得显示器的宽，并算出对应的Div离左边的距离    
  10.     var y = ($(window).height()-300)/2;//使用$(window).height()获得显示器的高，并算出相应的Div离上边的距离    
  11.     obj.css("top",y).css("left",x);   
  12. }  

上面的代码实现窗口大小变化后始终居中。

Tags: javascript jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2079

jQuery禁止鼠标右键

作者:admin  日期:2015-05-29

 jQuery屏蔽鼠标右键：
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
--------------------------------------------------------------------------------------------------
JS屏蔽鼠标右键：
<script language="JavaScript">
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
</script>
--------------------------------------------------------------------------------------------------
jquery禁止右键弹出的突破方法：
如： $(document).bind("contextmenu", function() { return false; }); //这段JS代码将禁止右键弹出
突破方法：
地址栏中输入：javascript:alert($(document).unbind("contextmenu",""));

Tags: javascript jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2668

jquery禁用右键、文本选择功能、复制按键的实现

作者:admin  日期:2013-05-26

同时适合IE、firefox、谷歌浏览器下适用，经过筛选代码如下：

JavaScript代码
  1. //禁用右键、文本选择功能、复制按键  
  2. $(document).bind(“contextmenu”,function(){return false;});  
  3. $(document).bind(“selectstart”,function(){return false;});  
  4. $(document).keydown(function(){return key(arguments[0])});  
  5.   
  6. //按键时提示警告  
  7. function key(e){  
  8. var keynum;  
  9. if(window.event){  
  10. keynum = e.keyCode; // IE  
  11. }else if(e.which){  
  12. keynum = e.which; // Netscape/Firefox/Opera  
  13. }  
  14. if(keynum == 17){  
  15. alert(“禁止复制内容！”);  
  16. return false;  
  17. }  
  18. }  
  19.   
  20. //禁用右键、文本选择功能、复制按键  
  21.     $(document).bind("contextmenu",function(){return false;});  
  22.     $(document).bind("selectstart",function(){return false;});  
  23.     $(document).keydown(function(){return key(arguments[0])});   
  24.    
  25.  //按键时提示警告  
  26.        function key(e){  
  27.             var keynum;  
  28.             if(window.event) // IE  
  29.               {  
  30.                 keynum = e.keyCode;  
  31.               }  
  32.             else if(e.which) // Netscape/Firefox/Opera  
  33.               {  
  34.                 keynum = e.which;  
  35.               }  
  36.             if(keynum == 17){ alert("禁止复制内容！");return false;}  
  37.         }  
  38.   
  39.     
  40. //屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键       
  41. function   document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键     
  42. function   window.onhelp(){return false}       //屏蔽F1帮助     
  43. function   document.onkeydown(){     
  44.     if((window.event.altKey)&&     
  45.       ((window.event.keyCode==37)||            //屏蔽Alt+方向键←     
  46.       (window.event.keyCode==39))){            //屏蔽Alt+方向键→  
  47.            alert("不准你使用ALT+方向键前进或后退网页！");     
  48.            event.returnValue=false;      
  49.       }         if((event.keyCode==8)||                    //屏蔽退格删除键      
  50.       (event.keyCode==116)||                   //屏蔽F5刷新键     
  51.       (event.ctrlKey && event.keyCode==82)){   //Ctrl+R     
  52.            event.keyCode=0;     
  53.            event.returnValue=false;     
  54.       }     
  55.       if(event.keyCode==122){event.keyCode=0;event.returnValue=false;}    //屏蔽F11     
  56.       if(event.ctrlKey && event.keyCode==78)event.returnValue=false;      //屏蔽Ctrl+n     
  57.       if(event.shiftKey && event.keyCode==121)event.returnValue=false;    //屏蔽shift+F10     
  58.       if(window.event.srcElement.tagName=="A" && window.event.shiftKey)       
  59.          window.event.returnValue=false;       //屏蔽shift加鼠标左键新开一网页     
  60.       if((window.event.altKey)&&(window.event.keyCode==115)){             //屏蔽Alt+F4      
  61.          window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");     
  62.          return false;     
  63.       }     
  64.   }     

Tags: jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2381

Jquery实现链接批量设置新窗口打开

作者:admin  日期:2012-04-30

首先调用jquery类文件：

XML/HTML代码
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  

非站内链接新窗口打开：

JavaScript代码
  1. <script type="text/javascript">   
  2. jQuery(function($){   
  3. $("a[href*='://']:not(a[href^='http://www.jlist.cn'],a[href^='javascript:'])").attr("target", "_blank");})   
  4. </script>  

实际上是jquery方法属性的基本应用！

演示地址：https://blog.guanjianci.net/codetest/jquery/openwithblank.html

查看更多...

Tags: jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2435

jquery页面中固定显示div层

作者:admin  日期:2012-04-27

这个是别人写的代码，自己实际用的时候对代码做了改动，主要需要新增一些功能！ 

JavaScript代码
  1. /*任意位置浮动固定层*/  
  2. /*没剑(http://regedit.cnblogs.com) 2009-03-04*/  
  3. /*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/  
  4. /*2009-06-10修改：重新修改插件实现固定浮动层的方式，使用一个大固定层来定位 
  5. /*2009-07-16修改：修正IE6下无法固定在top上的问题 
  6. /*09-11-5修改：当自定义层的绝对位置时，加上top为空值时的判断 
  7. 这次的方法偷自天涯新版页 
  8. 经多次测试，基本上没bug~ 
  9. 有问题的朋友欢迎到偶的博客http://regedit.cnblogs.com上提出 
  10. */  
  11. /*调用： 
  12. 1 无参数调用：默认浮动在右下角 
  13. $("#id").floatdiv(); 
  14.  
  15. 2 内置固定位置浮动 
  16. //右下角 
  17. $("#id").floatdiv("rightbottom"); 
  18. //左下角 
  19. $("#id").floatdiv("leftbottom"); 
  20. //右下角 
  21. $("#id").floatdiv("rightbottom"); 
  22. //左上角 
  23. $("#id").floatdiv("lefttop"); 
  24. //右上角 
  25. $("#id").floatdiv("righttop"); 
  26. //居中 
  27. $("#id").floatdiv("middle"); 
  28.  
  29. 另外新添加了四个新的固定位置方法 
  30.  
  31. middletop（居中置顶）、middlebottom（居中置低）、leftmiddle、rightmiddle 
  32.  
  33. 3 自定义位置浮动 
  34. $("#id").floatdiv({left:"10px",top:"10px"}); 
  35. 以上参数，设置浮动层在left 10个像素,top 10个像素的位置 
  36. */  
  37. jQuery.fn.floatdiv=function(location){  
  38.         //判断浏览器版本  
  39.     var isIE6=false;  
  40.     var Sys = {};  
  41.     var ua = navigator.userAgent.toLowerCase();  
  42.     var s;  
  43.     (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;  
  44.     if(Sys.ie && Sys.ie=="6.0"){  
  45.         isIE6=true;  
  46.     }  
  47.     var windowWidth,windowHeight;//窗口的高和宽  
  48.     //取得窗口的高和宽  
  49.     if (self.innerHeight) {  
  50.         windowWidth=self.innerWidth;  
  51.         windowHeight=self.innerHeight;  
  52.     }else if (document.documentElement&&document.documentElement.clientHeight) {  
  53.         windowWidth=document.documentElement.clientWidth;  
  54.         windowHeight=document.documentElement.clientHeight;  
  55.     } else if (document.body) {  
  56.         windowWidth=document.body.clientWidth;  
  57.         windowHeight=document.body.clientHeight;  
  58.     }  
  59.     return this.each(function(){  
  60.         var loc;//层的绝对定位位置  
  61.         var wrap=$("<div></div>");  
  62.         var top=-1;  
  63.         if(location==undefined || location.constructor == String){  
  64.             switch(location){  
  65.                 case("rightbottom")://右下角  
  66.                     loc={right:"0px",bottom:"0px"};  
  67.                     break;  
  68.                 case("leftbottom")://左下角  
  69.                     loc={left:"0px",bottom:"0px"};  
  70.                     break;    
  71.                 case("lefttop")://左上角  
  72.                     loc={left:"0px",top:"0px"};  
  73.                     top=0;  
  74.                     break;  
  75.                 case("righttop")://右上角  
  76.                     loc={right:"0px",top:"0px"};  
  77.                     top=0;  
  78.                     break;  
  79.                 case("middletop")://居中置顶  
  80.                     loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};  
  81.                     top=0;  
  82.                     break;  
  83.                 case("middlebottom")://居中置低  
  84.                     loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};  
  85.                     break;  
  86.                 case("leftmiddle")://左边居中  
  87.                     loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};  
  88.                     top=windowHeight/2-$(this).height()/2;  
  89.                     break;  
  90.                 case("rightmiddle")://右边居中  
  91.                     loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};  
  92.                     top=windowHeight/2-$(this).height()/2;  
  93.                     break;  
  94.                 case("middle")://居中  
  95.                     var l=0;//居左  
  96.                     var t=0;//居上  
  97.                     l=windowWidth/2-$(this).width()/2;  
  98.                     t=windowHeight/2-$(this).height()/2;  
  99.                     top=t;  
  100.                     loc={left:l+"px",top:t+"px"};  
  101.                     break;  
  102.                 default://默认为右下角  
  103.                     location="rightbottom";  
  104.                     loc={right:"0px",bottom:"0px"};  
  105.                     break;  
  106.             }  
  107.         }else{  
  108.             loc=location;  
  109.             alert(loc.bottom);  
  110.             var str=loc.top;  
  111.             //09-11-5修改：加上top为空值时的判断  
  112.             if (typeof(str)!= 'undefined'){  
  113.                 str=str.replace("px","");  
  114.                 top=str;  
  115.             }  
  116.         }  
  117.         /*fied ie6 css hack*/  
  118.         if(isIE6){  
  119.             if (top>=0)  
  120.             {  
  121.                 wrap=$("<div style=\"top:e­xpression(documentElement.scrollTop+"+top+");\"></div>");  
  122.             }else{  
  123.                 wrap=$("<div style=\"top:e­xpression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");  
  124.             }  
  125.         }  
  126.         $("body").append(wrap);  
  127.           
  128.         wrap.css(loc).css({position:"fixed",  
  129.             z_index:"999"});  
  130.         if (isIE6)  
  131.         {  
  132.               
  133.             wrap.css("position","absolute");  
  134.             //没有加这个的话，ie6使用表达式时就会发现跳动现象  
  135.             //至于为什么要加这个，还有为什么要加nothing.txt这个，偶也不知道，希望知道的同学可以告诉我  
  136.             $("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");  
  137.         }  
  138.         //将要固定的层添加到固定层里  
  139.         $(this).appendTo(wrap);  
  140.     });  
  141. };  

下载地址：http://files.cnblogs.com/regedit/jquery.floatdiv.rar

原文网址：http://www.cnblogs.com/regedit/archive/2008/03/11/1100170.html

Tags: javascript jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3941

 广告位

↑返回顶部↑