CSS Sprites技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

CSS 雪碧图技术不是什么新东西，在网页应用中已经有几年了，现在的网页开发在图标图片的应用上已经趋向于使用字体图标，这是一种比CSS雪碧图技术更优雅的图标应用方式。

在网站中的导航最常见最明显，一些地方的零碎小图标也多使用。
CSS知识点：background-image
backgorund-position

特点：

相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。
一般情况下，你需要保存为PNG-24的文件格式。
可以设计出丰富多彩的颜色体表。

难点：

你需预先确定每个小图标的大小
注意小图标与小图标之间的距离
细心、耐心
PNG-24的图片格式：PNG-24可减少毛边。background-position 索引值 查看全部

1. 只按日期排序，忽略年份> select date, description from table_name order by month(date),dayofmonth(date);
注意：单纯使用dayofyear来排序会导致错误，如2-29与非闰年的3-1日同等级

 
2. 排序点分式IP> select ip from table_name order by inet_aton(ip);
或者在设计表时就使用 int unsigned 来表示ip。


3. 将某列中特定值排在最前
例如想把表中lulu的名字排在最前显示，其他按字母排序> select name from table_name order by if(name='lulu',0,1),name ;
也可以把if的条件根据需要换成相应的语句。

 
4. 将某列内容按照用户自定义的顺序排序
例如想把表中的名字按lulu,xixi,baba,mama的非常规顺序排序输出：> select name from table_name order by field(name,'lulu','xixi','baba','mama');

 
5. 对枚举类型排序
枚举类型默认为数字排序，如果希望以字符串形式排序。> select name from table_name order by cast(name as char);
如果希望更改enum的排序默认顺序，可以alter tablealter table table_name modify name enum('lulu','xixi','mama','baba');


6. 按csv类型的字符串的某字串排序
例如某列m_str内容是形如abc-321-mno-jkl的形式，希望对第二列进行排序> select m_str from table_name
order by substring_index(substring_index(m_str,'-',2),'-',-1); 查看全部

> select date, description from table_name order by month(date),dayofmonth(date);

> select ip from table_name order by inet_aton(ip);

> select name from table_name order by if(name='lulu',0,1),name ;

> select name from table_name order by field(name,'lulu','xixi','baba','mama');

> select name from table_name order by cast(name as char);

alter table table_name modify name enum('lulu','xixi','mama','baba');

> select m_str from table_name

order by substring_index(substring_index(m_str,'-',2),'-',-1);

The constructor

The playlist in this demo is instanced with 1 item in it and uses the{supplied:"ogv,m4v,oga,mp3"}supplied:"ogv,m4v,oga,mp3"} option to enable a media player that accepts audio and video.
 
var myPlaylist = new jPlayerPlaylist({ myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, [
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
], {
playlistOptions: {
enableRemoveControls: true
},
swfPath: "/js",
supplied: "ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true // Allows the audio poster to go full screen via keyboard
});The constructor might look scary to JavaScript newcomers, but it is really just 1 line of JavaScript, laid out in an easy to read manner. JSON (JavaScript Object Notation) is used in this demo to create the objects and arrays passed to the constructor. The parameters are an object, an array and an object:
// This is pseudo-code.
var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});The parameters can be created outside the constructor to suit your goal. In particular, the options may be common to all your instances on a page. The playlist could be generated through an AJAX call to a JSON or XML url.
var cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" }; cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" };
var playlist = []; // Empty playlist
var options = { swfPath: "/js", supplied: "ogv, m4v, oga, mp3" };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
Defining the css selectors

The first parameter is an object used to define the css selectors that point at the jPlayer and container HTML elements. The jPlayer element is where the video output is displayed and the container, cssSelectorAncestor, is the outter divider of the player skin HTML.

To use the default values, use an empty object, {}. The defaults are:
{
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}
Defining the playlist content

The second parameter is an Array of Objects used to define the playlist. The object elements are used by the jPlayer setMedia command, so follow the rules for suppling the formats defined in thesupplied option. The title, artist and free properties are used by jPlayerPlaylist to display each item. To start with an empty playlist, use an empty array, []. A playlist with a single audio item looks like:
[
{
title:"The Title",
artist:"The Artist", // Optional
free: Boolean, // Optional - Generates links to the media
mp3:"MP3 URL", // Dependant on supplied option
oga:"OGA URL", // Dependant on supplied option
poster: "Poster URL" // Optional
}
]
Defining the jPlayer and playlist options

The third parameter is an object to define the jPlayer options and jPlayerPlaylist options. This object is passed to jPlayer, and is used to setup the basic jPlayer options, such as solution, supplied and the all important swfPath. You can define all options, except for the cssSelectorAncestor and therepeat event handler, which are overridden by the jPlayerPlaylist code. Remember that event handlers are not really options. The playlist code binds event handlers to jPlayer events, such asready and ended, which might interact with your event handlers in unexpected ways. Example options are:
{
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
swfPath: "/js",
supplied: "mp3, oga"
}
Default playlist options:
playlistOptions: {: {
autoPlay: false,
loopOnPrevious: false,
shuffleOnLoop: true,
enableRemoveControls: false,
displayTime: 'slow',
addTime: 'fast',
removeTime: 'fast',
shuffleTime: 'slow'
}
Control flag descriptions:

autoPlay : Boolean : Will auto-play when instanced on the page, and when a new playlist is given using setPlaylist()(). Remember that mobile devices require a gesture before anything will play. Recommend leaving this as false initially... And change it later if you want when changing the playlist through a user gesture. eg., They clicked on a link to change the playlist and your click handler changes autoPlay to true before you setPlaylist().
loopOnPrevious : Boolean : If loop is active, the playlist will loop back to the end when executingprevious()().
shuffleOnLoop : Boolean : If loop and shuffle are active, the playlist will shuffle when executingnext()() on the last item.
enableRemoveControls : Boolean : Displays the remove controls for each item.


Animation timing controls:

These options use jQuery animation timings, where the time is in milliseconds and also the strings 'slow' and 'fast' can be used. To make changes instant, set the time to zero, which removes the animation effect.

displayTime : Number/String : The period of the slide-up and slide-down animations when a new playlist is displayed.
addTime : Number/String : The period of the slide-down animation when a new item is added.
removeTime : Number/String : The period of the slide-up animation when a item is removed.
shuffleTime : Number/String : The period of the slide-up and slide-down animations when a playlist is shuffled.


jPlayerPlaylist methods:

setPlaylist(playlist:Array) : Void
Change the playlist. (See playlistOptions.autoPlay.autoPlay to cause it to play automatically.)
myPlaylist.setPlaylist([.setPlaylist([
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
},
{
title:"Hidden",
artist:"Miaow",
free: true,
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
}
]);
add(media:Object, [playNow:Boolean]) : Void
Add a media item to the end of the playlist. Optional playNow param to start it playing after adding it.
myPlaylist.add({.add({
title:"Your Face",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/m ... ot%3B,
oga:"http://www.jplayer.org/audio/o ... ot%3B,
poster: "http://www.jplayer.org/audio/p ... ot%3B
});
 remove([index:Number]) : Boolean
Removes the item from the playlist. Removes all items if no param is given. A positive index removes items from the start of the playlist while a negative index removes items from the end.
// Examples of usage:
myPlaylist.remove(); // Removes all items
myPlaylist.remove(0); // Removes the 1st item
myPlaylist.remove(1); // Removes the 2nd item
myPlaylist.remove(-1); // Removes the last item
if( myPlaylist.remove(0) ) {
alert("1st item removed successfully!");
} else {
alert("Failed to remove 1st item!"); // A remove operation is being animated.
}
select(index:Number) : Void
Selects the item in the playlist. A positive index selects items from the start of the playlist while a negative index selects items from the end.
// Examples of usage:
myPlaylist.select(0); // Selects the 1st item
myPlaylist.select(1); // Selects the 2nd item
myPlaylist.select(-1); // Selects the last item
play([index:Number]) : Void
Plays the item in the playlist. Plays the current item if no param is given. A positive index plays items from the start of the playlist while a negative index plays items from the end.
// Examples of usage:
myPlaylist.play(); // Plays the currently selected item
myPlaylist.play(0); // Plays the 1st item
myPlaylist.play(1); // Plays the 2nd item
myPlaylist.play(-1); // Plays the last item
shuffle([shuffled:Boolean], [playNow:Boolean]) : Void
Shuffle the playlist. Toggles shuffled setting if no param is given. True always shuffles the playlist. False will un-shuffle if it was shuffled. The playNow param will cause the first item to play automatically. (playNow can only be used if the first param is given. Use shuffle(undefined,true) to toggle and play.)
// Examples of usage:
myPlaylist.shuffle(); // Toggles shuffle state
myPlaylist.shuffle(true); // Shuffle the playlist
myPlaylist.shuffle(false); // Un-shuffle the playlist
myPlaylist.shuffle(true, true); // Shuffle the playlist and plays
next() : Void
Move to and play the next item in the playlist. The behaviour for the last item depends on the loop state, the shuffle state and the playlistOptions.shuffleOnLoop.shuffleOnLoop option.
myPlaylist.next();
.next();
previous() : Void
Move to and play the previous item in the playlist. The behaviour for the first item depends on the loop state and the playlistOptions.loopOnPrevious.loopOnPrevious option. (The playlist is never shuffled when looping back to the last item.)
myPlaylist.previous();
.previous();
pause() : Void
Pause the current item.
myPlaylist.pause();
.pause();
option(option:String, [value:Mixed]) : Void
Set or get the playlist option.
// Examples of usage:
var controls = myPlaylist.option("enableRemoveControls"); // Get option
myPlaylist.option("enableRemoveControls", true); // Set option
The HTML Structure

The playlist looks for the class jp-playlist-playlist within the cssSelectorAncestor element. A <ul> element is expected here, which is used to generate the item list.
<div id="jp_container_N"> id="jp_container_N">
<div class="jp-playlist">
<ul>
<li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->
</ul>
</div>
</div>
The playlist is automatically added as <li> elements to the <ul> element. The jp-free-media-free-media span is only generated when the playlist item has its free property set.
<li>
<div>
<a class="jp-playlist-item-remove" href="javascript:;">&times;</a>
<span class="jp-free-media">
(<a tabindex="1" href="http://www.jplayer.org/audio/m ... ot%3B class="jp-playlist-item-free">mp3</a> )
</span>
<a tabindex="1" class="jp-playlist-item" href="javascript:;">Cro Magnon Man <span class="jp-artist">by The Stark Palace</span></a>
</div>
</li>
The Techie Bit

The jPlayerPlaylist code is enclosed in a self-executing function that protects the jQuery variable within its scope, thus allowing the $ shortcut to be used within its code without conflicting with other JavaScript libraries. jPlayer does this too of course, which allowsjQuery.noConflict().noConflict() to be used.

The jPlayerPlaylist is an add-on to jPlayer. It is not a jQuery plugin, but a JavaScript object definition. You instance it like any other object, using the new operator.

jPlayerPlaylist is the only variable added to Javascript's global namespace.

When using jPlayerPlaylist with the animations and issuing comands from JavaScript, be aware that the animations take time to complete. Bombarding the playlist with many JavaScript commands may well give unexpected results unless you set all the animation timings to zero.

While this demo gives a poster image for all videos, in practice the video poster is only displayed if the Video item is first and autoPlay is false. 查看全部

var myPlaylist = new jPlayerPlaylist({ myPlaylist = new jPlayerPlaylist({

  jPlayer: "#jquery_jplayer_N",

  cssSelectorAncestor: "#jp_container_N"

}, [

  {

    title:"Cro Magnon Man",

    artist:"The Stark Palace",

    mp3:"http://www.jplayer.org/audio/m ... ot%3B,

    oga:"http://www.jplayer.org/audio/o ... ot%3B,

    poster: "http://www.jplayer.org/audio/p ... ot%3B

  }

], {

  playlistOptions: {

    enableRemoveControls: true

  },

  swfPath: "/js",

  supplied: "ogv, m4v, oga, mp3",

  smoothPlayBar: true,

  keyEnabled: true,

  audioFullScreen: true // Allows the audio poster to go full screen via keyboard

});

// This is pseudo-code.

var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});

var cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" }; cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" };

var playlist = []; // Empty playlist

var options = { swfPath: "/js", supplied: "ogv, m4v, oga, mp3" };

var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

{

  jPlayer: "#jquery_jplayer_1",

  cssSelectorAncestor: "#jp_container_1"

}

[

  {

    title:"The Title",

    artist:"The Artist", // Optional

    free: Boolean, // Optional - Generates links to the media

    mp3:"MP3 URL", // Dependant on supplied option

    oga:"OGA URL", // Dependant on supplied option

    poster: "Poster URL" // Optional

  }

]

{

  playlistOptions: {

    autoPlay: true,

    enableRemoveControls: true

  },

  swfPath: "/js",

  supplied: "mp3, oga"

}

playlistOptions: {: {

  autoPlay: false,

  loopOnPrevious: false,

  shuffleOnLoop: true,

  enableRemoveControls: false,

  displayTime: 'slow',

  addTime: 'fast',

  removeTime: 'fast',

  shuffleTime: 'slow'

}

myPlaylist.setPlaylist([.setPlaylist([

  {

    title:"Cro Magnon Man",

    artist:"The Stark Palace",

    mp3:"http://www.jplayer.org/audio/m ... ot%3B,

    oga:"http://www.jplayer.org/audio/o ... ot%3B,

    poster: "http://www.jplayer.org/audio/p ... ot%3B

  },

  {

    title:"Hidden",

    artist:"Miaow",

    free: true,

    mp3:"http://www.jplayer.org/audio/m ... ot%3B,

    oga:"http://www.jplayer.org/audio/o ... ot%3B,

    poster: "http://www.jplayer.org/audio/p ... ot%3B

  }

]);

myPlaylist.add({.add({

  title:"Your Face",

  artist:"The Stark Palace",

  mp3:"http://www.jplayer.org/audio/m ... ot%3B,

  oga:"http://www.jplayer.org/audio/o ... ot%3B,

  poster: "http://www.jplayer.org/audio/p ... ot%3B

});

// Examples of usage:

myPlaylist.remove(); // Removes all items

myPlaylist.remove(0); // Removes the 1st item

myPlaylist.remove(1); // Removes the 2nd item

myPlaylist.remove(-1); // Removes the last item

if( myPlaylist.remove(0) ) {

  alert("1st item removed successfully!");

} else {

  alert("Failed to remove 1st item!"); // A remove operation is being animated.

}

// Examples of usage:

myPlaylist.select(0); // Selects the 1st item

myPlaylist.select(1); // Selects the 2nd item

myPlaylist.select(-1); // Selects the last item

// Examples of usage:

myPlaylist.play(); // Plays the currently selected item

myPlaylist.play(0); // Plays the 1st item

myPlaylist.play(1); // Plays the 2nd item

myPlaylist.play(-1); // Plays the last item

// Examples of usage:

myPlaylist.shuffle(); // Toggles shuffle state

myPlaylist.shuffle(true); // Shuffle the playlist

myPlaylist.shuffle(false); // Un-shuffle the playlist

myPlaylist.shuffle(true, true); //  Shuffle the playlist and plays

myPlaylist.next();

.next();

myPlaylist.previous();

.previous();

myPlaylist.pause();

.pause();

// Examples of usage:

var controls = myPlaylist.option("enableRemoveControls"); // Get option

myPlaylist.option("enableRemoveControls", true); // Set option

<div id="jp_container_N"> id="jp_container_N">

  <div class="jp-playlist">

    <ul>

      <li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->

    </ul>

  </div>

</div>

<li>

  <div>

    <a class="jp-playlist-item-remove" href="javascript:;">&times;</a>

    <span class="jp-free-media">

      (<a tabindex="1" href="http://www.jplayer.org/audio/m ... ot%3B class="jp-playlist-item-free">mp3</a> )

    </span>

    <a tabindex="1" class="jp-playlist-item" href="javascript:;">Cro Magnon Man <span class="jp-artist">by The Stark Palace</span></a>

  </div>

</li>