エントリー
こんにちはKhabrovites
小さくても便利な機能をご紹介します。
- メイクアップ作業を少し簡単できれいにします。
- 一般的なプラットフォームであるjQueryを使用して、ページ上の要素の選択を簡素化します
この関数の意味は、次のようなページ/ページの読み込みとともに、次のような重要なクライアントパラメータを決定することです。
ブラウザ、ブラウザバージョン、OS、ブラウザエンジンなど
そして、それらをページのhtmlタグに配置します。
もっともっと。 読んでる？
なぜこれが必要なのですか？
個人的には、このような機能を持っていると非常に便利です。さまざまなブラウザ、特に最も古くていたずらなブラウザのスタイルの記述が簡単になり、条件によってはページ上の要素に簡単にアクセスできるようになります。 ブラウザのバージョンでもOSでも
行こう？
機能自体：
var CBS = function () {
var ua = navigator.userAgent.toLowerCase(); //
// -1
//
var is = function (t){
return ua.indexOf(t) > -1;
};
// -
var cookie = navigator.cookieEnabled ? 'iscookie' : 'nocookie' ;
//
var g = 'gecko' ; // FF
var w = 'webkit' ; // Chrome
var s = 'safari' ; // Safari
var h = document .getElementsByTagName( 'html' )[0];
var b = [(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?( 'ie ie' +RegExp.$1 + ( is ( 'trident' )&& is ( 'msie 7.0' ) ? ' compat' : '' )): is ( 'firefox/2' )?g+ ' ff2' : is ( 'firefox/3' )?g+ ' ff3' : is ( 'firefox/4' )?g+ ' ff5' : is ( 'firefox/5' )?g+ ' ff5' : is ( 'gecko/' )?g:/opera(\s|\/)(\d+)/.test(ua)? 'opera opera' +RegExp.$2: is ( 'konqueror' )? 'konqueror' : is ( 'chrome' )?w+ ' ' +s+ ' chrome' : is ( 'applewebkit/' )?w+ ' ' +s+(/version\/(\d+)/.test(ua)? ' ' +s+RegExp.$1: '' ): is ( 'mozilla/' )?g: '' , is ( 'j2me' )? 'mobile' : is ( 'iphone' )? 'iphone' : is ( 'ipod' )? 'ipod' : is ( 'mac' )? 'mac' : is ( 'darwin' )? 'mac' : is ( 'webtv' )? 'webtv' : is ( 'win' )? 'win' +( is ( 'windows nt 5.1' )? ' xp' :( is ( 'windows nt 5.1' )? ' vista' :( is ( 'windows nt 6.1' )? ' win7' : '' ))): is ( 'freebsd' )? 'freebsd' :( is ( 'x11' )|| is ( 'linux' ))? 'linux' : '' , 'js' ];
c = b.join( ' ' )+ ' ' +cookie;
h.className += ' ' + c;
return c;
};
* This source code was highlighted with Source Code Highlighter .
var CBS = function () {
var ua = navigator.userAgent.toLowerCase(); //
// -1
//
var is = function (t){
return ua.indexOf(t) > -1;
};
// -
var cookie = navigator.cookieEnabled ? 'iscookie' : 'nocookie' ;
//
var g = 'gecko' ; // FF
var w = 'webkit' ; // Chrome
var s = 'safari' ; // Safari
var h = document .getElementsByTagName( 'html' )[0];
var b = [(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?( 'ie ie' +RegExp.$1 + ( is ( 'trident' )&& is ( 'msie 7.0' ) ? ' compat' : '' )): is ( 'firefox/2' )?g+ ' ff2' : is ( 'firefox/3' )?g+ ' ff3' : is ( 'firefox/4' )?g+ ' ff5' : is ( 'firefox/5' )?g+ ' ff5' : is ( 'gecko/' )?g:/opera(\s|\/)(\d+)/.test(ua)? 'opera opera' +RegExp.$2: is ( 'konqueror' )? 'konqueror' : is ( 'chrome' )?w+ ' ' +s+ ' chrome' : is ( 'applewebkit/' )?w+ ' ' +s+(/version\/(\d+)/.test(ua)? ' ' +s+RegExp.$1: '' ): is ( 'mozilla/' )?g: '' , is ( 'j2me' )? 'mobile' : is ( 'iphone' )? 'iphone' : is ( 'ipod' )? 'ipod' : is ( 'mac' )? 'mac' : is ( 'darwin' )? 'mac' : is ( 'webtv' )? 'webtv' : is ( 'win' )? 'win' +( is ( 'windows nt 5.1' )? ' xp' :( is ( 'windows nt 5.1' )? ' vista' :( is ( 'windows nt 6.1' )? ' win7' : '' ))): is ( 'freebsd' )? 'freebsd' :( is ( 'x11' )|| is ( 'linux' ))? 'linux' : '' , 'js' ];
c = b.join( ' ' )+ ' ' +cookie;
h.className += ' ' + c;
return c;
};
* This source code was highlighted with Source Code Highlighter .
var CBS = function () {
var ua = navigator.userAgent.toLowerCase(); //
// -1
//
var is = function (t){
return ua.indexOf(t) > -1;
};
// -
var cookie = navigator.cookieEnabled ? 'iscookie' : 'nocookie' ;
//
var g = 'gecko' ; // FF
var w = 'webkit' ; // Chrome
var s = 'safari' ; // Safari
var h = document .getElementsByTagName( 'html' )[0];
var b = [(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?( 'ie ie' +RegExp.$1 + ( is ( 'trident' )&& is ( 'msie 7.0' ) ? ' compat' : '' )): is ( 'firefox/2' )?g+ ' ff2' : is ( 'firefox/3' )?g+ ' ff3' : is ( 'firefox/4' )?g+ ' ff5' : is ( 'firefox/5' )?g+ ' ff5' : is ( 'gecko/' )?g:/opera(\s|\/)(\d+)/.test(ua)? 'opera opera' +RegExp.$2: is ( 'konqueror' )? 'konqueror' : is ( 'chrome' )?w+ ' ' +s+ ' chrome' : is ( 'applewebkit/' )?w+ ' ' +s+(/version\/(\d+)/.test(ua)? ' ' +s+RegExp.$1: '' ): is ( 'mozilla/' )?g: '' , is ( 'j2me' )? 'mobile' : is ( 'iphone' )? 'iphone' : is ( 'ipod' )? 'ipod' : is ( 'mac' )? 'mac' : is ( 'darwin' )? 'mac' : is ( 'webtv' )? 'webtv' : is ( 'win' )? 'win' +( is ( 'windows nt 5.1' )? ' xp' :( is ( 'windows nt 5.1' )? ' vista' :( is ( 'windows nt 6.1' )? ' win7' : '' ))): is ( 'freebsd' )? 'freebsd' :( is ( 'x11' )|| is ( 'linux' ))? 'linux' : '' , 'js' ];
c = b.join( ' ' )+ ' ' +cookie;
h.className += ' ' + c;
return c;
};
* This source code was highlighted with Source Code Highlighter .
頭の中にあるスクリプトタグに挿入します
関数を定義した後、またはページが完全にロードされたら、最初のオプションをお勧めします。
CBS();
それがすべてのようです！ 次は？
ソースをご覧ください！
1つの例（IEブラウザーで起動される機能）：
html class="ie ie7 win win7 js iscookie"
IEブラウザバージョン7からログインしていることがわかります（実際にはIE9からログインしましたが、開発者ツールでは古いバージョンのエミュレーションを選択しました）。
O.S.-Windows、バージョン-win7、iscookie-ブラウザーのcookieがサポートされています。
今それをどうしますか？
IE6 / 7のサポートを必要とする有害なクライアントのスタイルを記述するか、そうでない場合はブラウザーに応じて異なるブロックを表示するだけでよいとします。
IEでこのようなファイルをアップロードする場合は、条件付きコメントを使用します。
既に1件のリクエストを保存しています
次に、次のような汚いスタイルのハックを使用する必要はありません。
height: 10px;
//height: 11px;
#height: 9px;
さまざまなイベントのスタイルを上書き/追加するだけです：
.normal-class {
height: 20px; //
}
.ie7 .normal-class {
height: 30px; // Internet Exporer 7
}
確かに、よりクリーンで便利ですか？ ;-)
タスクに応じて、同じトリックをJavaScript自体に自分の好みに適用できます。
よく例（jQuery）：
$( '.normal-class' ).click( function () { //
if ( $( 'html' ).hasClass( 'ie7' ) ) {
// - IE7
alert( ', !' );
} else {
// -
alert( ' !' );
};
});
* This source code was highlighted with Source Code Highlighter .
$( '.normal-class' ).click( function () { //
if ( $( 'html' ).hasClass( 'ie7' ) ) {
// - IE7
alert( ', !' );
} else {
// -
alert( ' !' );
};
});
* This source code was highlighted with Source Code Highlighter .
$( '.normal-class' ).click( function () { //
if ( $( 'html' ).hasClass( 'ie7' ) ) {
// - IE7
alert( ', !' );
} else {
// -
alert( ' !' );
};
});
* This source code was highlighted with Source Code Highlighter .
などなど。 一般に、それですべてです。
誰かが重宝するか、少なくともそれを楽しむことを願っています。 これは私の最初の投稿です。厳密に判断しないでください。
関数の作成に協力してくれた私の友人でありソナーの上司と、habrozhitelになる機会を与えてくれたmifaに感謝します。
ご清聴ありがとうございました！