|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
动态版本控制可以根据时间戳来实现，但是这样的话，每次打开页面都会重新下载加了版本控制的文件，如果你的页面自身打开本来就慢的话， 这样一来，无疑会带来很差的用户体验。 但是如果在每个引用文件后面都手动加上版本，如果页面比较多的话，这很明显是个很蠢的做法，所以我们可以这样做： （1）在入口文件定义公共模块： define('COMMON_PATH','./Common/'); 然后将Home文件夹下的Common剪切出来，放在和入口文件同目录。 （2）在Common-->Conf-->config.php中配置一个数组： <?php return array( //CSS版本控制 'cssVersion' => '1.0', 'cssVersionid' => '1.0', //JS版本控制 'jsVersion' => '1.0', 'jsVersionid' => '1.0', ); （3）在控制器中引入 <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { public function index(){ /* 版本控制 */ $config = require(COMMON_PATH.'Conf/config.php'); this−>assign(′cssVersionid′,config['cssVersionid']); this−>assign(′jsVersionid′,config['jsVersionid']); /* 页面显示 */ $this->display(); } } 当然所有的assign必须放在$this->display();前面。在thinkPHP3.2.3中，你也可以这样写： <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { public function __construct(){ /* 版本控制 */ parent::__construct(); $config = require(COMMON_PATH.'Conf/config.php'); this−>assign(′cssVersionid′,config['cssVersionid']); this−>assign(′jsVersionid′,config['jsVersionid']); } public function index(){ /* 页面显示 */ $this->display(); } } （4）这时候就可以在HTML页面引入了 <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/page/index.css?v={$cssVersionid}"> <script src="__PUBLIC__/js/page/index.js?v={$jsVersionid}"></script> 这样一来，每次有更新的话，只需要手动在config.php更改版本就行了，而且可以只更新CSS或JS其中一个。 |
图片加载失败显示默认图片占位符
为网站的图片加上加载失败的默认占位符会让网站看起来更专业、更严谨。
<img src=”__PUBLIC__/img/simple/simplelove.png” onerror=”onerror=null;src=’__PUBLIC__/img/defaultpic.jpg'”>[……]
JS根据不同浏览器(分辨率)调用不同css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
根据不同浏览器： <script type="text/javascript"> var version = navigator.userAgent; if (version.indexOf("MSIE") > 1) { document.write("<link href='ie.css' rel='stylesheet' type='text\/css'\/>"); } else if (version.indexOf("Chrome") > 1) { document.write("<link href='chrome.css' rel='stylesheet' type='text\/css'\/>"); } else if (version.indexOf("Firefox") > 1) { document.write("<link href='ff.css' rel='stylesheet' type='text\/css'\/>"); } </script> 根据不同分辨率： <script type="text/javascript"> if (screen.width == 1024){ document.write("<link href='css/css1.css' rel='stylesheet' type='text\/css'\/>"); }else { document.write("<link href='css/css2.css' rel='stylesheet' type='text\/css'\/>");} </script> |
为 placeholder 自定义样式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
textarea::-webkit-input-placeholder{ padding: 1em; } textarea::-moz-placeholder{ padding: 1em; } <span style="color: #339966;">同理，input的定义方法为：</span> input::-webkit-input-placeholder{ padding: .2em; } input::-moz-placeholder{ padding: .2em; } |
关于HTML5在动画制作工具Animatron的一些问题
Animatron是国外一款在线HTML5动画制作工具，网址：www.animatron.com 当然，想使用的话，是需要FQ的。
用animatron制作好的动画是可以下载为代码和GIF的，这时候付费玩家自然又是充满优越感的，因为付费玩家可以下载普通玩家下不到的部分。
下载下来的文件夹[……]
在HTML中禁止文字的复制
很简单，只需在<body>中添加如下代码：
|
1 2 3 4 5 6 7 |
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'> |
JS返回上一页
<button onclick=”javascript:history.go(-1);”>返回上一页</button>
<button onclick=”javascript:history.back(-1);”>返回上一页</button>[……]
当一个页面出现多个checkbox全选时的处理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
HTML： <input type="checkbox" onclick="boxOnclick(this,'some1')">全选一 <input type="checkbox" onclick="boxOnclick(this,'some2')">全选二 <input type="checkbox" onclick="boxOnclick(this,'some3')">全选三 <input type="checkbox" class="some1">全选一的子集 <input type="checkbox" class="some2">全选二的子集 <input type="checkbox" class="some3">全选三的子集 JS： function boxOnclick(obj, someNum) { if (obj.checked) { $("." + someNum).each(function () { this.checked = true; }); } else { $("." + someNum).each(function () { this.checked = false; }); } } |
JS获取浏览器高度 并赋值给类
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 如果你需要给某个div设置全屏的话，可以用下面的jQuery来获取设备高度，然后赋值给类。 $(window).load(function () { var maxHeight = 0; if (document.documentElement.clientHeight > maxHeight) { maxHeight = document.documentElement.clientHeight; } $('.you-class').css("height", maxHeight) }); |
点击按钮对两个div的隐藏与显示进行切换
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
HTML： <button type="button" id="showHidden">点击切换div的隐藏与显示</button> <div id="div1">请叫我第一层</div> <div id="div2">请叫我第二层</div> JS: <script type='text/javascript'> function show_hidden(obj) { if(obj.style.diaplay == 'block') { obj.style.display = 'none'; } else { obj.style.display = 'block'; } } var sh = document.getElementById("showHidden"); sh.click = function() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); show_hidden(div1); show_hidden(div2); return false; } </script> 示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button type="button" id="showHidden">点击切换div的隐藏与显示</button> <div id="div1" style="display:block">请叫我第一层</div> <div id="div2" style="display:none">请叫我第二层</div> <script type='text/javascript'> function show_hidden(obj) { if(obj.style.display == 'block') { obj.style.display = 'none'; } else { obj.style.display = 'block'; } } var sh = document.getElementById("showHidden"); sh.onclick = function() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); show_hidden(div1); show_hidden(div2); return false; } </script> </body> </html> |