jQuery: fire click() before blur() event

Solution 1 Listen to mousedown instead of click. The mousedown and blur events occur one after another when you press the mouse button, but click only occurs when you release it. Solution 2 You can preventDefault() in mousedown to block the dropdown from stealing focus. The slight advantage is that the value will be selected when the mouse button is released, which is how native select components work. JSFiddle… Read More

固定宽度下拉列表中option内容显示不全问题解决方法

不少时候在页面中为了布局的需要，下拉列表<select>的宽度需要设成比较小的值，这时如果恰巧它包含的选择项<option>的内容比较长，那么超出select宽度的部分将会被截断，如果option显示的内容又比较重要，必须完整地展现出来，或者你是个完美主义者，那这就成了一个不大不小的问题了。 在IE7+、Firefox中，由于支持了<option>的title属性，我们可以想办法给option标记设置title属性（内容可以与显示的值相同或者不同）。如果是已经做好的页面，不想再做太多改动，可以用下面的脚本，自动遍历页面上的所有<select>，给所有的option加上与text相同的title。 function SetOptionTitle() {     var selects = document.getElementsByTagName(“select”);     if (selects.length > 0)     {         for (var i = 0; i < selects.length; i++)         {             var options = selects[i].options;             if (selects[i].options.length > 0)             {                 for (var j = 0; j < options.length; j++)                 {                     if (options[j].title == “”)                         options[j].title = options[j].text;                 }             }         }     } } 很不幸的是，IE6并不支持<option>的title属性，这一方法在IE6下完全无效！鉴于目前的浏览器市场状况，我们还不得不尽力兼容IE6，所以只能另想其它办法。 我目前想到的办法是：当鼠标悬停到<select>时，创建一个这个下拉列表的副本，同时把焦点移到这个副本上，把副本的样式设成绝对定位，而且盖在原来的下拉列表上，宽度根据option的显示内容自动拉伸，当这个副本失去焦点，或者用户对它进行了选择操作后，获取副本的selectedIndex，赋给原来的select对象。具体代码如下： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title></title> <script type=”text/javascript”> function FixWidth(selectObj) {     var newSelectObj = document.createElement(“select”);     newSelectObj = selectObj.cloneNode(true);     newSelectObj.selectedIndex = selectObj.selectedIndex;     newSelectObj.onmouseover = null;          var e = selectObj;     var absTop = e.offsetTop;     var absLeft = e.offsetLeft;     while(e = e.offsetParent)     {         absTop += e.offsetTop;         absLeft += e.offsetLeft;     }     with (newSelectObj.style)     {         position = “absolute”;         top = absTop + “px”;         left = absLeft + “px”;         width = “auto”;     }          var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };     if(window.addEventListener)     {… Read More

ラジオボタンにはlabelタグのforが便利

Zopeジャンキー日記 :ラジオボタンにはlabelタグのforが便利: Web  方法  はてなブックマークの「注目エントリー」で、３ユーザと５ユーザの切替ボタンが、 ラベルと連動していないことに気づいた。 HTMLソースでいうと、いま <input value=”3″ name=”threshold” type=”radio”> 3users <input value=”5″ name=”threshold” type=”radio”> 5users のようになっていますが（ちょっと簡略化しています）、 <input value=”3″ name=”threshold” type=”radio” id=”button1″ /> <label for=”button1″>3users</label> <input value=”5″ name=”threshold” type=”radio” id=”button2″ /> <label for=”button2″>5users</label> のようにすれば、ラベル部分もクリックできるようになります。 私はこの切替ボタンをよく押すので、 ラベルもクリックできるようになるとうれしいです＞はてなの担当者様 じつは私も、わりと最近になって知ったクチなんですが（笑）、 これは知らないともったいないと思ったので、紹介しておきます。 アップデート （12/22）: コメント欄にて、ながさわさんより <label><input value=”3″ name=”threshold” type=”radio” /> 3users</label> <label><input value=”5″ name=”threshold” type=”radio” /> 5users</label> と書けることを教えていただきました。… Read More

Dict lookup

Dict lookup: Dict lookup This MS IE 4+ add-on lets you easily look up words using the dict.org server. Just highlight the word, right click, and chose dict. A new window will open with the dict.org page and the word’s available definitions. Installation Download the archive (36KB), extract to a directory then run dict-install.bat. You… Read More