VUE 组件里使用定时器自动刷新数据

使用 window.setInterval()

<template>
  <div class="hello">
    <h2>Count: {{count}}</h2>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },

  data() {
    return {
      count: 0
    };
  },

  created() {
    this.getRandomNumber();
    this.timer = setInterval(this.getRandomNumber, 5000);
  },

  methods: {
    getRandomNumber() {
      axios
        .get("https://wordpress.org/news/wp-json/wp/v2/posts", {
          params: {
            per_page: 1
          }
        })
        .then(response => {
          // handle success
          console.log(response);
          this.count = Math.floor(Math.random() * 10);
        })
        .catch(error => {
          // handle error
          console.log(error);
          this.count = 0;
        });
    },

    cancelAutoUpdate: () => {
      clearInterval(this.timer);
    }
  },

  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

FlexSlider 从这里开始

Step 1 – Link files

Add these items to theof your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

 Step 2 – Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

 Step 3 – Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

…and voila! That wraps up the most basic installation of FlexSlider into your webpage.

Step 4 – Tailor to your needs

Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values. For examples on how to use these properties for advanced setups, check out the Advanced Options section.

namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "fade",              //String: Select your animation type, "fade" or "slide"
easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false,                 //{NEW} Boolean: Reverse the animation direction
animationLoop: true,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode  
startAt: 0,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true,                //Boolean: Animate slider automatically
slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false,               //Boolean: Randomize slide order

// Usability features
pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

// Primary Controls
controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous",           //String: Set the text for the "previous" directionNav item
nextText: "Next",               //String: Set the text for the "next" directionNav item

// Secondary Navigation
keyboard: true,                 //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false,              //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false,               //Boolean: Create pause/play dynamic element
pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
playText: 'Play',               //String: Set the text for the "play" pausePlay item

// Special properties
controlsContainer: "",          //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls: "",             //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

// Carousel Options
itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
                                
// Callback API
start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){}           //{NEW} Callback: function(slider) - Fires after a slide is removed

 

20段Web开发不容错过的CSS代码

Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。

1. CSS Resets

网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

p { font-size: 1.2em; line-height: 1.0em; color: #333; }

2.经典的CSS Clearfix

这个clearfix代码已在Web开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。

.clearfix:after { content: "."; display: block; clear: both; visibility:hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 <font></font> 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

3.升级版的Clearfix

在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

4. Cross-Browser Transparency

CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

.transparent {
    filter: alpha(opacity=50);
/* internet explorer */
    -khtml-opacity: 0.5;     
/* khtml, old safari */
    -moz-opacity: 0.5;      
/* mozilla, netscape */
    opacity: 0.5;          
/* fx, safari, opera */
}

源码地址: http://perishablepress.com/cross-browser-transparency-via-css/

5. CSS Blockquote模板

这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。

blockquote {
    background: #f9f9f9;<
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #ccc;
    content: open-quote; 
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    display: inline;
}

查看源码: http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

6. 个性化的圆角代码

许多CSS开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧!

#container {
    -webkit-border-radius: 4px 3px 6px 10px;
    -moz-border-radius: 4px 3px 6px 10px;
    -o-border-radius: 4px 3px 6px 10px; 
    border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-rightright-radius: 3px;
    -webkit-border-bottom-rightright-radius: 6px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 10px;
}

7. 一般媒体查询

这是一段非常好的模板,用于各种零零碎碎的媒体查询,在移动设备上也可以使用,这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) { 

/* Styles */
} 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {

/* Styles */
} 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

/* Styles */
}
<font></font> 
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/* Styles */
}  
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {

/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

/* Styles */
}

源码地址: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

8. 现代字体栈

在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问CSS Font Stacks

/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 

/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 

/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 

/*The Helvetica/Arial-based sans serif */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 

/*The Verdana-based sans serif */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 

/*The Trebuchet-based sans serif */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 

/*The heavier “Impact” sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal,"Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 

/*The monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

源码地址: http://www.sitepoint.com/eight-definitive-font-stacks/

9. 自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色,下面代码的默认颜色是浅蓝色,当然,你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

10.隐藏Logo上的H1文本

1
2
3
4
5
6
7
h1 {
    text-indent-9999px
    margin0 auto;
    width320px;
    height85px;
    backgroundtransparent url("images/logo.png"no-repeat scroll;
}

11. 为图片创建拍立得效果边框

运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。

img.polaroid {
    background:#000;
/*Change this to a background image or remove*/
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333;
/* Standard blur at 5px. Increase for more depth *

-webkit-box-shadow:1px 1px 5px #333;

-moz-box-shadow:1px 1px 5px #333;

height:200px; /*Set to height of your image or desired div*/
    width:200px;
/*Set to width of your image or desired div*/
}

源码地址: http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3

12. 锚链接伪类选择器

1
2
3
4
a:link { colorblue; }
a:visited { colorpurple; }
a:hover { colorred; }
a:active { color: yellow; }

源码地址: http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers

13. 花俏地CSS3 Pull-Quotes

Pull-quotes不同于页面里的blockquote,它们通常用在文章中来引用文本。

.has-pullquote:before {

/* Reset metrics. */
    padding: 0;
    border: none; 

/* Content */
    content: attr(data-pullquote);

/* Pull out to the right, modular scale based margins. */
    float: rightright;
    width: 320px;
    margin: 12px -140px 24px 36px;

/* Baseline correction */
    position: relative;
    top: 5px;

/* Typography (30px line-height equals 25% incremental leading) */
    font-size: 23px;
    line-height: 30px;
}
.pullquote-adelle:before {
    font-family: "adelle-1", "adelle-2";
    font-weight: 100;
    top: 10px !important;
}

.pullquote-helvetica:before {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;
}
.pullquote-facit:before {
    font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;
}

源码地址: http://miekd.com/articles/pull-quotes-with-html5-and-css/

14. CSS3的全屏背景效果

如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。

html {
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

源码: http://css-tricks.com/perfect-full-page-background-image/

15. 内容垂直集中

相对于内容在水平位置,内容在垂直方向是不好把控的,尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}

源码地址: http://www.w3.org/Style/Examples/007/center

16. 垂直滚动条

这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。

1
html { height101% }

17. CSS3 Gradients模板

#colorbox {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));
    background-image: -webkit-linear-gradient(top, #83b842, #629721);
    background-image: -moz-linear-gradient(top, #83b842, #629721);
    background-image: -ms-linear-gradient(top, #83b842, #629721);
    background-image: -o-linear-gradient(top, #83b842, #629721);
    background-image: linear-gradient(top, #83b842, #629721);
}

18. @Font-Face模板

使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站,并生成自定义font families。

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot');
/* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
    url('webfont.woff') format('woff'),
/* Modern Browsers */
    url('webfont.ttf')  format('truetype'),
/* Safari, Android, iOS */
    url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */
}
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}

源码地址: http://css-tricks.com/snippets/css/using-font-face/

 

19.创建缝合效果

p {
    position:relative;
    z-index:1; 
    padding: 10px;
    margin: 10px;
    font-size: 21px;
    line-height: 1.3em;
    color: #fff;
    background: #ff0030;
    -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
p:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottombottom: 3px;
    left :3px;
    rightright: 3px;
    border: 2px dashed #fff;
}   
p a {
    color: #fff;
    text-decoration:none;
}
p a:hover, p a:focus, p a:active {
    text-decoration:underline;
}

20. CSS3 斑马线效果

当用户在浏览许多行数据时,很难分清哪一个单元格是属于哪一行的。默认情况下,通过添加斑马线,用户可以给奇偶行更新不同的背景色。

1
2
3
tbody tr:nth-child(odd) {
    background-color#ccc;
}

源码地址: http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

来自:http://www.phpchina.com/archives/view-42908-1.html

让 jQuery Datepicker 兼容 WordPress 和 WPML

没什么好说的,直接代码:

jQuery(function($){
        $.datepicker.regional['zh-hans'] = $.datepicker.regional['zh_CN'] = {
                closeText: '关闭',
                prevText: '&#x3c;上月',
                nextText: '下月&#x3e;',
                currentText: '今天',
                monthNames: ['一月','二月','三月','四月','五月','六月',
                '七月','八月','九月','十月','十一月','十二月'],
                monthNamesShort: ['一','二','三','四','五','六',
                '七','八','九','十','十一','十二'],
                dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
                dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
                dayNamesMin: ['日','一','二','三','四','五','六'],
                weekHeader: '周',
                dateFormat: 'yy-mm-dd',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: true,
                yearSuffix: '年'};
        $.datepicker.setDefaults( $.datepicker.regional[ "<?php echo defined('ICL_LANGUAGE_CODE')?ICL_LANGUAGE_CODE:WPLANG;?>" ] );
});

最后一行,这儿由于 WPML 和 WORDPRESS 的语言静态变量不一样,值也不同,需要判断然后输出,输出的值可能是 zh-hans,或 zh_CN,所以在第一行声明了两个变量来存储翻译。

CarouFredSel中TouchSwipe不支持带链接的元素

http://caroufredsel.dev7studios.com/configuration.php

caroufredsel 的配置页面里提到 swipe 这个属性:To enable this feature, you’ll need to include the jQuery.touchSwipe-plugin.

如果 HTML 结构是这样

<div class="image_carousel">
<ul id="carousel">
   <li><img src="slier.jpg"/><li>
   <li><img src="slider2.jpg"/><li>
</ul>
</div>

你可以这样使这个幻灯片支持touchswipe

<script>
    $("#carousel").carouFredSel({
        auto        : false,
	prev        : '#c-prev',
	next        : '#c-next',
        swipe       : {
                onTouch     : true,
                onMouse     : true
            }
    });
</script>

倘若这个幻灯片的图片带来链接:

<ul id="carousel">
   <li><a href="foo.html"><img src="kitten.jpg"/></a><li>
   <li><a href="foo.html"><img src="puppy.jpg"/></a><li>
</ul>

那这个就不起作用了。

这是因为 这个插件将一些元素排除了,查看代码可以发现:

excludedElements:"label, button, input, select, textarea, a, .noSwipe"

所以在处理带连接的情况,就需要重置一下 excludedElements, 例如:

$("#foo1").carouFredSel({
    	auto : false,
        items: 1,
        swipe       : {
            onTouch         : true,
            onMouse         : true,
            options         : {
                excludedElements: "button, input, select, textarea, .noSwipe"
            }
        },
	    prev : "#foo1_prev",
	    next : "#foo1_next"
});

可以在手机里打开下面的链接查看 http://jsfiddle.net/4uUKd/28/embedded/result,js,css,html/
或者扫描:
在线二维码生成器

还有另一个另一个jquery 插件,jQuery Touchwipe Plugin

这两个插件名字类似,但是功能却不尽一样。

导入这个插件后,我们可以这样实现:

$('#carousel').carouFredSel({
        width: '100%',
        prev: '#prev-propslider',
        next: '#next-propslider',
        swipe: true
});

$('#carousel').touchwipe({
        wipeLeft: function() {
            $('#carousel').trigger('next', 1);
        },
        wipeRight: function() {
            $('#carousel').trigger('prev', 1);
        }
});

这样就可以了,但是至于 touchSwipe 如何支持链接,一时还找不到方法。

How to fix position absolute z-index bug in IE7

正常的我们做下拉菜单 和 幻灯片重叠在一起的时候,使用 z-index 就可以解决问题,正常的效果应该是这样:

magemenu-and-sliders

但是天杀的 IE7 却是这样:

magemenu-and-sliders-ie7

这时候任凭你怎么使用 position 和 z-index 都不会起作用!

可以到google搜索 ie7 position absolute z-index

一大堆解决方案。经常我几番研究,下面示范一个通俗易懂的解决方法:

先看一下我的代码结构:

code

这两个层的 z-index 的值大设置并没有多大关系,只要按照显示在上面的数字越大就可以了。

下面我们找到 mega menu 的根层 #header,给她家上两个css属性 {position: relative;z-index: 10;}

在找到 幻灯片 所在层的根层 #page ,加上 css 属性 {position: relative;z-index: 1;}

保存,测试,看看是不是在IE7 里也正常了。

无聊的可以拿下面的代码中各个浏览器里面试试,定能发现其中的奥妙,至于这是IE7 的什么bug,那就不管了~

<style><!--
.parent{width:200px; height:200px; padding:10px;}   .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}   .lt50{left:50px;top:50px;}
--></style>
<div style="height:500px">
	<div style="position: relative; z-index: 10;">
		<div class="parent" style="position: absolute; background: lightgrey;">
			<div class="sub" style="position: absolute; z-index: 20; background: darkgray;">20</div>
			<div class="sub lt50" style="position: absolute; z-index: 10; background: dimgray;">10</div>
		</div>
	</div>
	<div style="position: relative; z-index: 1;">
		<div class="parent" style="position: absolute; left: 80px; top: 80px; background: black;">
			<div class="sub" style="position: absolute; z-index: 4; background: darkgray;">2</div>
			<div class="sub lt50" style="position: absolute; z-index: 2; background: dimgray;">1</div>
		</div>
	</div>
</div>

 

DEMO:

20
10
2
1

Backstretch Errot: has no method ‘backstretch’

a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element

Uncaught TypeError: Object function (e,t){return new v.fn.init(e,t,n)} has no method ‘backstretch’

maybe many guys got this error

Maybe the issue is ’cause you put $.backstretch([“bg.jpg”]);   ahead of jquery.backstretch.js plugin, try switch the postion.

jQuery 向上弹出式菜单

Slide Up Menu / jQuery 向上弹出式菜单

The jQuery Slide Up Menu it’s a good alternative to other existing menus giving the possibility to position the menu on the bottom of your header image or at the bottom of the window, acting like Windows Start Menu. You can let it behave like a normal menu or you can add HTML code inside and put whatever you want inthere

jQuery的向上滑动菜单,这是一个很好的替代现有的可能定位在你的头部图像的下面或在窗口底部的菜单上,就像Windows的“开始”菜单的菜单。 你可以把它像一个普通的菜单, 或者你可以添加HTML代码或者任何你想要的放里面。

Options / 设置

slideUpSpeed / 上弹速度

Number of milliseconds to slide up the submenu items Default: 500

slideDownSpeed / 回收速度

Number of milliseconds to slide down the submenu items Default: 500

ease

Ease animation effect Default: easeInOutCubic (supported without jquery.ease plugin)

Use false to remove the animation ease.
To use any other animation pls use the jQuery Easing Plugin

stopQueue / 停止动画队列

Stop or continue animation on event change Default: true 

Stopping the queue animation will provide a faster visual feedback when sliding trough the menu items although the effects may appear snappier. Using stopQueue false you may get animations executing long after you hovered the item (if the user will rapidly and repeatedly hover the mouse over the menu items).

Usage / 怎么使用

HTML HEAD code / Html 头部调用的代码

<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script> //if needed
<script type="text/javascript" src="jquery.slideup.menu.1.0.min.js"></script>

HTML BODY code / html 菜单的代码

<div class="top-menu">
<ul class="top-menu-main">
  <li class="first">
    <ul class="top-submenu">
      <li class="first">Subitem 1.0</li>
      <li class="">Subitem 1.1</li>
      <li class="">Subitem 1.2</li>
      <li class="">Subitem 1.3</li>
      <li class="last">Subitem 1.4</li>
    </ul>
    <a href="#" class="menu-item-text">Item 1</a>
  </li>
  <li class="">
    <ul class="top-submenu">
      <li class="first">Subitem 2.0</li>
      <li class="">Subitem 2.1</li>
      <li class="last">Subitem 2.2</li>
    </ul>
    <a href="#" class="menu-item-text">Item 2</a>
  </li>
  <li class="">
    <ul class="top-submenu">
      <li class="first">Subitem 3.0</li>
      <li class="last">Subitem 3.1</li>
    </ul>
    <a href="#" class="menu-item-text">Item 3</a>
  </li>
</ul>
</div>

Javascript code / 执行代码

<script>
var opts = {slideUpSpeed:500, slideDownSpeed: 200};
$(document).ready(function(){
  $(".top-menu").slideupmenu(opts);
});
</script>

 

WordPress Portfolio work with Isotope and Infinite Scroll

准备:需要的jQuery插件

  1. Isotope: 神奇的布局精致的jQuery插件。演示
  2. Infinite Scroll:无限滚动被称为autopagerize的,unpaginate,无尽的网页。但实质上,它是预取从随后出现的页面上的内容,并直接将其添加到用户的当前页面。http://www.infinite-scroll.com/ 演示

新建文章类型 portfolio 和 Portfolio 分类 

 function my_post_types() {
        register_post_type('portfolio', array(
            'label' => __('Portfolio','itc'),
            'singular_label' => __('Portfolio', 'itc'),
            '_builtin' => false,
            //'exclude_from_search' => false, // Exclude from Search Results
            'capability_type' => 'post',
            'public' => true,
            'show_ui' => true,
            'show_in_nav_menus' => FALSE,
            'menu_position' => 100,
            'rewrite' => array(
                'slug' => 'portfolio-show',
                'with_front' => FALSE,
            ),
            'query_var' => true,
            'supports' => array(
                'title',
                'thumbnail',
                'editor',
                'page-attributes')
                )
        );

        register_taxonomy('portfolio_category', array('portfolio', 'solution', 'service'), array(
            'hierarchical' => true,
            'labels' => array(
                'name' => __('Portfolio Category', 'itc'),
                'singular_name' => __('Portfolio Category', 'itc'),
                'search_items' => __('Search Portfolio Category', 'itc'),
                'all_items' => __('All Portfolio Category', 'itc'),
                'parent_item' => __('Parent Portfolio Category', 'itc'),
                'parent_item_colon' => __('Parent Portfolio Category:', 'itc'),
                'edit_item' => __('Edit Portfolio Category', 'itc'),
                'update_item' => __('Update Portfolio Category', 'itc'),
                'add_new_item' => __('Add New Portfolio Category', 'itc'),
                'new_item_name' => __('New Portfolio Category Name', 'itc'),
                'menu_name' => __('Portfolio Category', 'itc'),
            ),
            'show_ui' => true,
            'query_var' => true,
            'rewrite' => array('slug' => 'service-view'),
        ));
}
 add_action('init', 'my_post_types');

好了,可以尽情的往里面塞内容了!

伟大的步骤开始了,前段实现:

创建页面模板 page-portfolio.php

文件顶头写入下面内容:

/**
 * Template Name: Portfolio
 * Description: A full-width Portfolio template with no sidebar
 */

保存,放到当前主题目录里。

新建 portfolio 页面

页面-》新建页面; 注意在右边页面属性-> 模板 里选择 portfolio. ok, portfolio 页面建成了,打开预览。神马?空白!别急,还没完成。

引入jQuery 插件 Isotope and Infinite Scroll

编辑 page-portfolio.php

/**
 * Template Name: Portfolio
 * Description: A full-width Portfolio template with no sidebar
 *
 */
get_header();
$taxonomy = 'portfolio_category';
?>
<script type='text/javascript' src='<?php bloginfo('template_url') ?>/js/jquery.isotope.min.js'></script>
<script type='text/javascript' src='<?php bloginfo('template_url') ?>/js/jquery.infinitescroll.min.js'></script>

前提:在 get_header() 已经调用了 jQuery ;jquery.isotope.min.js 和 jquery.infinitescroll.min.js 已经保存到主题文件夹里的 js 文件夹里。

建立 Portfolio 的 Filters

            <div id="options" class="page-title clearfix">
                <h1><?php the_title() ?></h1>
        <?php
        $all_portfolio_category = get_terms($taxonomy);
        $count_portfolio_category = count($all_portfolio_category);
        if ($count_portfolio_category > 0) {
            echo '<ul class="tags option-set" id="filters" data-option-key="filter">';
            echo '<li><a href="#filter" data-option-value="*" class="selected" title="All"><span><img src="<?php bloginfo('template_url') ?>/images/all.png" alt="Hosting"></span></li>';
            foreach ($all_portfolio_category as $term) {
                echo '<li><a href="#filter" data-option-value=".' . $term->slug . '" title="' . $term->name . '"><span><img src=' . z_taxonomy_image_url($term->term_id) . ' alt="' . $term->name . '" ></span></a></li>';
            }
            echo '</ul>';
        }
        ?>                
            </div> 

分页形式列出 portfolioes

           <div id="project_show" class="clearfix">
                
<?php
query_posts(array(
    'post_type' => 'portfolio',                    
    'posts_per_page' => 9,
    'is_paged' => TRUE, 
    'paged' => max(1, get_query_var('paged'))));
 while ( have_posts()) :  the_post();
?>                
<?php
$portfolio_terms = get_the_terms(get_the_ID(), $taxonomy );
						
if ( $portfolio_terms &#038;& ! is_wp_error( $portfolio_terms ) ) : 

	$data_category = array();

	foreach ( $portfolio_terms as $portfolio_term ) {
		$data_category[] = $portfolio_term->slug;
	}
						
	$data_categories = join( " ", $data_category );
        endif;
//获取每个portfolio相关的分类,并在下面的element层里输出。
?>

                <div class="element one_third <?php echo $data_categories;?>" data-symbol="<?php the_title()?>" data-category="<?php echo $data_categories;?>">
                    <div class="third_wrap">
                        <div class="project clearfix">
                                =========================
                </div>

<?php
endwhile;
wp_reset_postdata();
?>

            </div>
 <?php toolbox_content_nav('nav-below'); ?>   

Js 实例

  <script>
    $(function(){
      
      var $container = $('#project_show');

      $container.isotope({
        itemSelector : '.element'
      });
  
        $container.infinitescroll({
        navSelector  : '.nav-previous',    // selector for the paged navigation 
        nextSelector : '.nav-previous a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more projects to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
          }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'appended', $( newElements ) ); 
        }
      );
      
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        $('#portfolio_category_name').text($this.attr('title'));
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' &#038;& typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        
        return false;
      });

      
    });
  </script>
  

到这儿工作就基本上完成了,去试试,已经有效果的,但是并没有人家那么梦幻,是因为支持动画的 CSS 还没有引入。

将下面的CSS加入到 style.css 里,或者独立调用也行。

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
html,
body {
  height: 100%;
}


.element {
  width: 320px;
  height: 220px;
  float: left;
  overflow: hidden;
  position: relative;
}


/**** Example Options ****/


#options li a:hover {
  background-color: #0081cc;
}

#options li a:active {
  background-color: #0085d6;
}


#options li a.selected {
  background-color: #0085d6;
}

/* Combination filter options*/

#options .option-combo {
  display: inline-block;
  float: left;
  margin-right: 10px;
}

#options .option-combo ul {
  margin-right: 20px;
  display: inline-block;
}

#options .option-combo h2,
#options .option-combo h4 {
  line-height: 34px;
  margin-bottom: 0;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;
}


/**** Infinite Scroll ****/

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 30px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

OK,大功告成!