auxak blog » Bootstrap http://blog.auxak.com Creative & Innovative IT Sun, 09 Nov 2014 18:54:41 +0000 ja hourly 1 https://wordpress.org/?v=4.0.38 jQuery, jQueryUI, Bootstrap利用時のCDNフォールバック対応　 http://blog.auxak.com/cdn-fallback/ http://blog.auxak.com/cdn-fallback/#comments Sun, 09 Nov 2014 18:51:30 +0000 http://blog.auxak.com/?p=156 コンテンツデリバリーネットワーク（CDN）を利用した、jQueryやjQuery UI、BootstrapのJavaScriptファイルやCSSファイルの読み込みが失敗した際のフォールバックの方法は以下の通りです。


<!-- JQueryの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="venders/jquery/2_1_1/jquery-2.1.1.min.js"><\/script>');</script>

<!-- JQuery UI(.css)の読み込み -->
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<div class="ui-helper-hidden"></div>
<script>
    // jQuery UI CSS Fallback
    $(function () {
        if ($('.ui-helper-hidden:first').is(':visible') === true) {
            $('<link rel="stylesheet" type="text/css" href="venders/jquery_ui/1_11_2/jquery-ui.min.css" />').appendTo('head');
        }
    });
</script>

<!-- JQuery UI(.js)の読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="venders/jquery_ui/1_11_2/jquery-ui.min.js"><\/script>')</script>

<!-- Bootstrap(.css)の読み込み -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script>
    // Bootstrap CSS Fallback
    $(function () {
        if ($('body').css('color') !== 'rgb(51, 51, 51)') {
            $('<link rel="stylesheet" type="text/css" href="venders/bootstrap/3_3_0/css/bootstrap.min.css" />').appendTo('head');
        }
    });
</script>

<!-- Bootstrap(.js)の読み込み -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>$.fn.modal || document.write('<script src="venders/bootstrap/3_3_0/js/bootstrap.min.js"><\/script>')</script>
]]> http://blog.auxak.com/cdn-fallback/feed/ 0