中山php|最優網絡 ：中山做網站 中山php建站
最優良人
Category Page for: 網站前端
asyncbox異步彈出窗口，jq彈出層插件，可異步加載頁面
2011/08/25 at 12:18 » Comments (20)
AsyncBox（異步盒子）是一款基于 jQuery 的彈窗插件。能夠實現網站的整體風格效果，給用戶一個新的視覺享受。主要模擬常用的 alert、confirm、prompt、open 和擴展了一些對話框。它通過回調函數觸發事件動作并執行，使操作區域更加明了、統一。而且能夠在主流瀏覽器中靈活運用。 介紹及下載地址 http://www.nnhuashi.com/asyncbox/index.html 實例： $('#select-furns').click(function() { asyncbox.open({ id: 'select-form', ...more »解決jquery和prototype沖突，jquery和prototype共存的方法
2011/08/25 at 11:58 » Comments (251)
今天遇到一個項目的修改，由于該項目之前是使用prototype框架，而我拿手的是使用jquery框架，但是又不想全部重寫原來的頁面效果，所以在頁面引入了jquery文件，但是發現原來的js效果消失了，這是因為他們共同使用了$這個對象，造成了重寫覆蓋，解決方法是重定義jquery的這個對象 首先在頁面最開頭引入jquery文件，一定要在prototype文件引入之前，然后緊接著重寫$ <script type="text/javascript" src="data/jquery.min.js"></script> <script type="text/javascript"> var jQuery=$; </script> 然后在后面運用jquery時把原來使用$的地方全部換成jQuery就可以了 more »div li元素不限定寬度，如何浮在中間
2011/08/18 at 17:47 » Comments (498)
div的橫向居中我們都知道而已用margin:0 auto;實現，但是在不指定寬度的情況下這語句是沒有意義的，div為塊級元素，在內層DIV未指定寬度的情況下不能通過margin:0 auto來實現居中，將其轉換為內聯元素（display:inline）后在外層DIV加text-align:center才能居中 <!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=gb2312" /> <title>無標題文檔</title> </head> <body> <div style="width:800px;height:300px;text-align:center;margin:0 auto;background:#efefef;"><div style="background:#ff33cc;display:inline;">sdaasddsa</div></div> </body> </html> more »按鈕變成失效狀態，input框變成只讀模式以及CSS一些頁面控制
2011/08/18 at 14:42 » Comments (200)
以下代碼可以使按鈕變成失效狀態 <input id="select-layout" type="button" value="布置圖管理" name="select-layout" disabled="disabled"> 以下代碼可以使input框變成只讀且禁用模式 <input name="demo" type="text" disabled value="value" readonly="true" /> CSS控制字數多，隱藏多余字 text-overflow:ellipsis;word-break:keep-all;overflow:hidden; white-space:nowrap; 顯示豎的滾動條 overflow-y:auto;height:220px; //表格不被撐開，換行 style="word-break:break-all" 控制input或者textarea背景透明的樣式 background-color: transparent; 實現細邊的表格 <table width=500 border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#add3ef"> <tr bgcolor="#eff3ff"> <td>標題：用戶：</td> </tr> <tr bgColor="#ffffff"> <td>內容：</td> </tr> </table> 或者簡單通過這個屬性控制 style="border-collapse:collapse" more »HTML表單里面使用fieldset，legend標簽，實現標題浮在邊線上的效果
2011/08/15 at 09:58 » Comments (293)
經常看到一些表單會有一種相同的特殊效果，就是表單說明文字會浮在邊線上，可以用css控制實現，但是其實html有一個fieldset標簽來實現這效果 HTML <fieldset> 標簽 定義和用法 fieldset 元素可將表單內的相關元素分組。 <fieldset> 標簽將表單內容的一部分打包，生成一組相關表單的字段。 當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。 <fieldset> 標簽沒有必需的或唯一的屬性。 <legend> 標簽為 fieldset 元素定義標題。 實例 組合表單中的相關元素： <form> <fieldset> <legend>health information</legend> height: <input type="text" /> weight: <input type="text" /> </fieldset> </form> 實現效果如下 health informationheight: weight: 還可以用css控制邊線的樣式和legend的樣式。 <form> <fieldset> <legend>health information</legend> height: <input type="text" /> weight: <input type="text" /> </fieldset> </form> more »php正則匹配時常用到的模式修正符
2011/08/15 at 01:19 » Comments (267)
PHP簡單的模版引擎主要的原理是使用preg_replace對模板的內容進行替換，替換成可執行的php語句然后寫入緩存文本，再include進來執行。 在使用preg_replace時常用到的模式修正符有： e：$replacement 的字符串將被當作php語句執行 U：禁止貪婪匹配 只跟蹤到最近的一個匹配符并結束， m：在匹配首內容或者尾內容時候采用多行識別匹配 s：模式中的圓點元字符（.）匹配所有的字符，包括換行 more »js離開當前頁面時觸發的函數
2011/08/15 at 01:14 » Comments (51)
js離開當前頁面時觸發的函數： window.onbeforeunload=fun() ; function fun(return 'msg';) ; 這樣子在瀏覽器在捕捉到頁面即將離開的時候就會彈出提示框，顯示msg的內容，詢問你確定或者取消 目前三大主流瀏覽器中firefox和IE都支持onbeforeunload事件 另外還有一個相似的函數Onunload： Onunload，onbeforeunload都是在刷新或關閉時調用，可以在<script>腳本中通過window.onunload來指定或者在<body>里指定。區別在于onbeforeunload在onunload之前執行，它還可以阻止onunload的執行。 Onbeforeunload也是在頁面刷新或關閉時調用，Onbeforeunload是正要去服務器讀取新的頁面時調用，此時還沒開始讀取；而onunload則已經從服務器上讀到了需要加載的新的頁面，在即將替換掉當前頁面時調用。Onunload是無法阻止頁面的更新和關閉的。而 Onbeforeunload 可以做到。 1、onbeforeunload事件： 說明：目前三大主流瀏覽器中firefox和IE都支持onbeforeunload事件,opera尚未支持。 用法： ·object.onbeforeunload = handler ·<element onbeforeunload = "handler" … ></element> 描述： 事件觸發的時候彈出一個有確定和取消的對話框，確定則離開頁面，取消則繼續待在本頁。handler可以設一個返回值作為該對話框的顯示文本。 觸發于： ·關閉瀏覽器窗口 ·通過地址欄或收藏夾前往其他頁面的時候 ·點擊返回，前進，刷新，主頁其中一個的時候 ·點擊 一個前往其他頁面的url連接的時候 ·調用以下任意一個事件的時候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit. ·當用window open打開一個頁面，并把本頁的window的名字傳給要打開的頁面的時候。 ·重新賦予location.href的值的時候。 ·通過input type="submit"按鈕提交一個具有指定action的表單的時候。 可以用在以下元素： ·BODY, FRAMESET, window 平臺支持： IE4+/Win, ...more »異步加載可視化編輯器 Xheditor
2011/08/15 at 01:02 » Comments (6)
如果像上一篇文章使用基于Jquery的可視化編輯器 Xheditor 那樣設置的話，訪問頁面時會加載70多k的jquery文件和50多k的xheditor文件，為了追求頁面默認加載的性能提升，其實這些文件完全可以在編輯的時候異步加載的，下面是操作步驟： 1，需要用到一個異步加載js文件并執行的函數 function getJsFile(url, callBack){ var XH = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Msxml2.XMLHTTP'); XH.open('get',url,true); XH.onreadystatechange = function(){ if(XH.readyState == 4 && XH.status == 200){ if(window.execScript) window.execScript(XH.responseText); else eval.call(window, XH.responseText); eval(callBack); } ...more »使用基于Jquery的可視化編輯器 Xheditor
2011/08/15 at 01:00 » Comments (19)
使用方法 1. 下載xhEditor最新版本。 下載地址：http://code.google.com/p/xheditor/downloads/list 2. 解壓壓縮文件，將其中的xheditor.js以及xheditor_emot、xheditor_plugins和xheditor_skin三個文件夾上傳到網站相應目錄 3. 在相應html文件的</head>之前添加 <script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script> <script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script> 4. 方法1：在textarea上添加屬性： class="xheditor {skin:'default'}"，前面主參數也可以是xheditor-mini和xheditor-simple，分別加載迷你和簡單工具欄，后面詳細參數可以省略 方法2：在您的頁面初始JS代碼里加上： $('#elm1').xheditor(); $('#elm1').xheditor()； 例如： $({ $('#elm1').xheditor()； }); 相應的刪除編輯器的代碼為 $('#elm1').xheditor(false)； 重要說明：2種初始化方法只能選擇其中一種，不能混合使用，優先級分別是：方法1>方法2，例如用了方法1，方法2就無法使用了 更多幫助信息，請查看在線幫助：http://code.google.com/p/xheditor/wiki/Help 或者參考demos文件夾中的演示頁面 建議使用wizard.html初始化代碼生成向導來生成適合你的代碼。 more »異步加載 Xheditor 的時候遇到的瀏覽器兼容問題
2011/08/14 at 02:55 » Comments (20)
由于各個瀏覽器對js代碼的異步執行函數的支持不一樣 window.execScript() 只支持IE瀏覽器 eval() 雖然支持各個瀏覽器，但是卻不能在全局執行 解決的方法是利用javascript里面有一個改變上下文環境的關鍵字with . 把GetJsFile方法改成如下： function getJsFile(url, callBack){ var XH = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Msxml2.XMLHTTP'); XH.open('get',url,true); XH.onreadystatechange = function(){ if(XH.readyState == 4 && XH.status == 200){ with ( window )eval(XH.responseText); //if(window.execScript) window.execScript(XH.responseText); //else eval.call(window, XH.responseText); with ...more »返回菜單
