你可以下一個javascript的功能特效的幫助文檔，里面有這個，只是稍微改一下就行了，或者jQuery的幫助文檔
成都創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設|網(wǎng)站維護|優(yōu)化|托管以及網(wǎng)絡推廣，積累了大量的網(wǎng)站設計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設計服務，案例作品覆蓋加固等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身設計品質(zhì)網(wǎng)站。
jquerymobile實現(xiàn)一個簡單的九宮格代碼如下：
效果如下：
index.html頁面代碼如下：
Html代碼
!DOCTYPE html
html lang="en"
head
meta charset="utf-8" /
meta name="viewport" content="width=device-width, initial-scale=1"
titlejQuery Mobile Examples - JQM Gallery /title
link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" /
link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /
link rel="stylesheet" href="style.css" type="text/css" /
script src="jquery.mobile/jquery-1.6.4.min"/script
script src="jquery.mobile/jquery.mobile-1.0.1.min.js"/script
/head
body
div data-role="page" data-theme="a" id="jqm-home"
div data-role="header"
h1業(yè)務管理/h1
/div
div data-role="content" data-theme="b"
section class="gallery"
ul class="gallery-entries clearfix"
li class="gallery-item"
a href="#"img src="images/shoppingcart.png"/
h3故障管理/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/2.png"/
h3工單管理/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/3.png"/
h3資產(chǎn)屬性/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/4.png"/
h3資產(chǎn)狀態(tài)/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/5.png"/
h3資產(chǎn)看板/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/6.png"/
h3故障上報/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/7.png"/
h3備品備件/h3
/a
/li
li class="gallery-item"
a href="#"img src="images/8.png"/
h3采購申請/h3
/a
/li
/ul
/div
/div
/body
/html
css樣式代碼如下：
Js代碼
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
}
.gallery{
float: left;
width:100%;
}
.gallery-entries{
list-style:none;
padding:0;
float: left;
}
.gallery-entries .gallery-item{
float: left;
margin-right:1%;
margin-bottom:2%;
}
.gallery-entries .gallery-item img{
-webkit-box-shadow: #999 0 3px 5px;
-moz-box-shadow: #999 0 3px 5px;
box-shadow: #999 0 3px 5px;
border: 1px solid #fff;
max-width:100%;
width: 80px;
height: 80px;
}
.gallery-entries .gallery-item a{
font-weight:normal;
text-decoration:none;
}
.gallery-entries .gallery-item a h3{
width:80px;
white-space:nowrap;
font-size:1em;
overflow: hidden;
text-overflow:ellipsis;
padding-top:3px;
align:center;
}
.gallery-entries .gallery-item a:hover h3, .gallery-entries .gallery-item a:active h3{
text-decoration:underline;
}
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title/title
meta name="keywords" content=""
meta name="description" content=""
style type="text/css"
* { padding:0; margin:0;}
dl { width:153px; border-top:1px solid #ddd; border-left:1px solid #ddd;}
dl dd { list-style:none; width:50px; height:50px; float:left; border-right:1px solid #ddd; border-bottom:1px solid #ddd; float:left;}
/style
script type="text/javascript" src="js/jquery.min.js"/script
/head
body
dl
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
/dl
/body
/html
代碼如下：
function foo(chars) {
if (!chars.length) return;
var _foo = function(chars, tmp) {
for (i in chars) {
var ch = chars;
var t = tmp + ch[i];
var ch = delCharAt(chars, i);
if (ch.length 1) {
alert(t);
} else {
_foo(ch, t);
}
}
};
_foo(chars, '');
}
function delCharAt(s, i) {
ss = '';
for (j in s) {
if (i != j) {
ss += s[j];
}
}
return ss;
}
foo('1234');
為大型彈窗定制
本組件主要以iframe方式加載單獨頁面為主的彈出窗口，由其適用于后臺管理和webOS類項目使用，獨立的內(nèi)容頁更方便管理，頁面的也不易受其它頁面的影響，而且內(nèi)容頁可以是靜態(tài)或動態(tài)的任何一種文件。
強大靈活的接口
由于本組件主要是用來制作大型的窗口，頁面和窗口間的交互肯定會非常頻繁，所以本組件提供了豐富的交互控制接口，可以非常方便的進行頁面間的數(shù)據(jù)的傳輸。
細致的用戶體驗
智能無限級跨框架彈出，如果不是在輸入狀態(tài)，它支持Esc快捷鍵關閉；智能給按鈕添加焦點；黃金比例垂直居中；采用九宮格的布局結(jié)構(gòu)，css類鉤子豐富，可以定制類似桌面軟件般精致的皮膚...
跨平臺兼容特性
兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移動設備。并且IE6下也能支持現(xiàn)代瀏覽器的靜止定位(fixed)、覆蓋下拉控件、alpha通道png背景。
重慶分公司
重慶分公司
