我装扮QQ空间出鍙傛暟闱炴硶这几个字啥意思啊_百度知道JQuery涓?ajax()鏂规硶鍙傛暟璇﹁В_亟需动态创建DIV_使用OM-UI高速搭建系统前台框架__脚本百事通
稍等，加载中……
^_^请注意，有可能下面的2篇文章才是您想要的内容：
JQuery涓?ajax()鏂规硶鍙傛暟璇﹁В
亟需动态创建DIV
使用OM-UI高速搭建系统前台框架
JQuery涓?ajax()鏂规硶鍙傛暟璇﹁В
JQuery涓?.ajax()鏂规硶鍙傛暟璇﹁В
url: 瑕佹眰涓篠tring绫诲瀷鐨勫弬鏁帮紝锛堥粯璁や负褰撳墠椤靛湴鍧EUR锛夊彂閫佽?姹傜殑鍦板潃銆?/p&
type: 瑕佹眰涓篠tring绫诲瀷鐨勫弬鏁帮紝璇锋眰鏂瑰紡锛坧ost鎴杇et锛夐粯璁や负get銆傛敞鎰忓叾浠杊ttp璇锋眰鏂规硶锛屼緥濡俻ut鍜?/p&
聽 聽 聽 delete涔熷彲浠ヤ娇鐢?紝浣嗕粎閮ㄥ垎娴忚?鍣ㄦ敮鎸併EUR?/p&
timeout: 瑕佹眰涓篘umber绫诲瀷鐨勫弬鏁帮紝璁剧疆璇锋眰瓒呮椂鏃堕棿锛堟?绉掞級銆傛?璁剧疆灏嗚?鐩?.ajaxSetup()鏂规硶鐨勫叏灞EUR璁?/p&
聽 聽 聽 聽 聽缃?EUR?/p&
async锛氳?姹備负Boolean绫诲瀷鐨勫弬鏁帮紝榛樿?璁剧疆涓簍rue锛屾墍鏈夎?姹傚潎涓哄紓姝ヨ?姹傘EUR?/p&
聽 聽 聽 聽濡傛灉闇EUR瑕佸彂閫佸悓姝ヨ?姹傦紝璇峰皢姝らEUR夐」璁剧疆涓篺alse銆傛敞鎰忥紝鍚屾?璇锋眰灏嗛攣浣忔祻瑙堝櫒锛岀敤鎴峰叾浠栨搷浣滃繀椤荤瓑
聽 聽 聽 聽寰呰?姹傚畬鎴愭墠鍙?互鎵ц?銆?/p&
cache锛氳?姹備负Boolean绫诲瀷鐨勫弬鏁帮紝榛樿?涓簍rue锛堝綋dataType涓簊cript鏃讹紝榛樿?涓篺alse锛夈EUR?/p&
聽 聽 聽 聽璁剧疆涓篺alse灏嗕笉浼氫粠娴忚?鍣ㄧ紦瀛樹腑鍔犺浇璇锋眰淇℃伅銆?/p&
data: 瑕佹眰涓篛bject鎴朣tring绫诲瀷鐨勫弬鏁帮紝鍙戦EUR佸埌鏈嶅姟鍣ㄧ殑鏁版嵁銆傚?鏋滃凡缁忎笉鏄?瓧绗︿覆锛屽皢鑷?姩杞?崲涓哄瓧绗︿覆鏍?/p&
聽 聽 聽 寮忋EUR俫et璇锋眰涓?皢闄勫姞鍦╱rl鍚庛EUR傞槻姝㈣繖绉嶈嚜鍔ㄨ浆鎹?紝鍙?互鏌ョ湅processData閫夐」銆傚?璞″繀椤讳负key/value鏍?/p&
聽 聽 聽 寮忥紝渚嬪?{foo1:"bar1",foo2:"bar2"}杞?崲涓?foo1=bar1&foo2=bar2銆傚?鏋滄槸鏁扮粍锛孞Query灏嗚嚜鍔ㄤ负涓嶅悓
聽 聽 聽 鍊煎?搴斿悓涓EUR涓?悕绉般EUR備緥濡倇foo:["bar1","bar2"]}杞?崲涓?foo=bar1&foo=bar2銆?/p&
dataType: 瑕佹眰涓篠tring绫诲瀷鐨勫弬鏁帮紝棰勬湡鏈嶅姟鍣ㄨ繑鍥炵殑鏁版嵁绫诲瀷銆傚?鏋滀笉鎸囧畾锛孞Query灏嗚嚜鍔ㄦ牴鎹甴ttp鍖卪ime
聽 聽 聽 聽 聽 淇℃伅杩斿洖responseXML鎴杛esponseText锛屽苟浣滀负鍥炶皟鍑芥暟鍙傛暟浼犻EUR掋EUR?/p&
聽 聽 聽 聽 聽 鍙?敤鐨勭被鍨嬪?涓嬶細
聽 聽 聽 聽 聽 xml锛氳繑鍥瀀ML鏂囨。锛屽彲鐢↗Query澶勭悊銆?/p&
聽 聽 聽 聽 聽 html锛氳繑鍥炵函鏂囨湰HTML淇℃伅锛涘寘鍚?殑script鏍囩?浼氬湪鎻掑叆DOM鏃舵墽琛屻EUR?/p&
聽 聽 聽 聽 聽 script锛氳繑鍥炵函鏂囨湰JavaScript浠ｇ爜銆備笉浼氳嚜鍔ㄧ紦瀛樼粨鏋溿EUR傞櫎闈炶?缃?簡cache鍙傛暟銆傛敞鎰忓湪杩滅▼璇锋眰
聽 聽 聽 聽 聽 聽 聽 聽 聽 鏃讹紙涓嶅湪鍚屼竴涓?煙涓嬶級锛屾墍鏈塸ost璇锋眰閮藉皢杞?负get璇锋眰銆?/p&
聽 聽 聽 聽 聽 json锛氳繑鍥濲SON鏁版嵁銆?/p&
聽 聽 聽 聽 聽 jsonp锛欽SONP鏍煎紡銆備娇鐢⊿ONP褰㈠紡璋冪敤鍑芥暟鏃讹紝渚嬪?myurl?callback=?锛孞Query灏嗚嚜鍔ㄦ浛鎹㈠悗涓EUR涓?/p&
聽 聽 聽 聽 聽 聽 聽 聽 鈥?鈥濅负姝ｇ‘鐨勫嚱鏁板悕锛屼互鎵ц?鍥炶皟鍑芥暟銆?/p&
聽 聽 聽 聽 聽 text锛氳繑鍥炵函鏂囨湰瀛楃?涓层EUR?/p&
beforeSend锛氳?姹備负Function绫诲瀷鐨勫弬鏁帮紝鍙戦EUR佽?姹傚墠鍙?互淇?敼XMLHttpRequest瀵硅薄鐨勫嚱鏁帮紝渚嬪?娣诲姞鑷?畾涔?/p&
聽 聽 聽 聽 聽 聽 HTTP澶淬EUR傚湪beforeSend涓??鏋滆繑鍥瀎alse鍙?互鍙栨秷鏈??ajax璇锋眰銆俋MLHttpRequest瀵硅薄鏄?儫涓EUR鐨勫弬
聽 聽 聽 聽 聽 聽 鏁般EUR?/p&
聽 聽 聽 聽 聽 聽 function(XMLHttpRequest){
聽 聽 聽 聽 聽 聽 聽 聽 聽 //璋冪敤鏈??ajax璇锋眰鏃朵紶閫掔殑options鍙傛暟
聽 聽 聽 聽 聽 聽 }
complete锛氳?姹備负Function绫诲瀷鐨勫弬鏁帮紝璇锋眰瀹屾垚鍚庤皟鐢ㄧ殑鍥炶皟鍑芥暟锛堣?姹傛垚鍔熸垨澶辫触鏃跺潎璋冪敤锛夈EUR?/p&
聽 聽 聽 聽 聽 鍙傛暟锛歑MLHttpRequest瀵硅薄鍜屼竴涓?弿杩版垚鍔熻?姹傜被鍨嬬殑瀛楃?涓层EUR?/p&
聽 聽 聽 聽 聽 function(XMLHttpRequest, textStatus){
聽 聽 聽 聽 聽 聽 聽 聽 聽//璋冪敤鏈??ajax璇锋眰鏃朵紶閫掔殑options鍙傛暟
聽 聽 聽 聽 聽 }
success锛氳?姹備负Function绫诲瀷鐨勫弬鏁帮紝璇锋眰鎴愬姛鍚庤皟鐢ㄧ殑鍥炶皟鍑芥暟锛屾湁涓や釜鍙傛暟銆?/p&
聽 聽 聽 聽 聽(1)鐢辨湇鍔″櫒杩斿洖锛屽苟鏍规嵁dataType鍙傛暟杩涜?澶勭悊鍚庣殑鏁版嵁銆?/p&
聽 聽 聽 聽 聽(2)鎻忚堪鐘舵EUR佺殑瀛楃?涓层EUR?/p&
聽 聽 聽 聽 聽function(data, textStatus){
聽 聽 聽 聽 聽 聽 //data鍙?兘鏄痻mlDoc銆乯sonObj銆乭tml銆乼ext绛夌瓑
聽 聽 聽 聽 聽 聽 聽//璋冪敤鏈??ajax璇锋眰鏃朵紶閫掔殑options鍙傛暟
error锛氳?姹備负Function绫诲瀷鐨勫弬鏁帮紝璇锋眰澶辫触鏃惰?璋冪敤鐨勫嚱鏁般EUR傝?鍑芥暟鏈?涓?弬鏁帮紝鍗砐MLHttpRequest瀵硅薄銆侀敊
聽 聽 聽 聽璇?俊鎭?EUR佹崟鑾风殑閿欒?瀵硅薄(鍙?EUR?銆?/p&
聽 聽 聽 聽ajax浜嬩欢鍑芥暟濡備笅锛?/p&
聽 聽 聽 聽function(XMLHttpRequest, textStatus, errorThrown){
聽 聽 聽 聽 聽 //閫氬父鎯呭喌涓媡extStatus鍜宔rrorThrown鍙?湁鍏朵腑涓EUR涓?寘鍚?俊鎭?/p&
聽 聽 聽 聽 聽 聽 //璋冪敤鏈??ajax璇锋眰鏃朵紶閫掔殑options鍙傛暟
聽 聽 聽 聽}
contentType锛氳?姹備负String绫诲瀷鐨勫弬鏁帮紝褰撳彂閫佷俊鎭?嚦鏈嶅姟鍣ㄦ椂锛屽唴瀹圭紪鐮佺被鍨嬮粯璁?/p&
聽 聽 聽 聽 聽 聽 聽涓?application/x-www-form-urlencoded"銆傝?榛樿?鍊奸EUR傚悎澶у?鏁板簲鐢ㄥ満鍚堛EUR?/p&
dataFilter锛氳?姹備负Function绫诲瀷鐨勫弬鏁帮紝缁橝jax杩斿洖鐨勫師濮嬫暟鎹?繘琛岄?澶勭悊鐨勫嚱鏁般EUR?/p&
聽 聽 聽 聽 聽 聽 鎻愪緵data鍜宼ype涓や釜鍙傛暟銆俤ata鏄疉jax杩斿洖鐨勫師濮嬫暟鎹?紝type鏄?皟鐢╦Query.ajax鏃舵彁渚涚殑
聽 聽 聽 聽 聽 聽 dataType鍙傛暟銆傚嚱鏁拌繑鍥炵殑鍊煎皢鐢眏Query杩涗竴姝ュ?鐞嗐EUR?/p&
聽 聽 聽 聽 聽 聽 function(data, type){
聽 聽 聽 聽 聽 聽 聽 聽 //杩斿洖澶勭悊鍚庣殑鏁版嵁
聽 聽 聽 聽 聽 聽 聽 聽
聽 聽 聽 聽 聽 聽 }
global锛氳?姹備负Boolean绫诲瀷鐨勫弬鏁帮紝榛樿?涓簍rue銆傝〃绀烘槸鍚﹁Е鍙戝叏灞EURajax浜嬩欢銆傝?缃?负false灏嗕笉浼氳Е鍙戝叏灞EUR
聽 聽 聽 聽 ajax浜嬩欢锛宎jaxStart鎴朼jaxStop鍙?敤浜庢帶鍒跺悇绉峚jax浜嬩欢銆?/p&
ifModified锛氳?姹備负Boolean绫诲瀷鐨勫弬鏁帮紝榛樿?涓篺alse銆備粎鍦ㄦ湇鍔″櫒鏁版嵁鏀瑰彉鏃惰幏鍙栨柊鏁版嵁銆?/p&
聽 聽 聽 聽 聽 聽 鏈嶅姟鍣ㄦ暟鎹?敼鍙樺垽鏂?殑渚濇嵁鏄疞ast-Modified澶翠俊鎭?EUR傞粯璁ゅEUR兼槸false锛屽嵆蹇界暐澶翠俊鎭?EUR?/p&
jsonp锛氳?姹備负String绫诲瀷鐨勫弬鏁帮紝鍦ㄤ竴涓猨sonp璇锋眰涓?噸鍐欏洖璋冨嚱鏁扮殑鍚嶅瓧銆?/p&
聽 聽 聽 聽璇ュEUR肩敤鏉ユ浛浠ｅ湪"callback=?"杩欑?GET鎴朠OST璇锋眰涓璘RL鍙傛暟閲岀殑"callback"閮ㄥ垎锛屼緥濡?/p&
聽 聽 聽 聽{jsonp:'onJsonPLoad'}浼氬?鑷村皢"onJsonPLoad=?"浼犵粰鏈嶅姟鍣ㄣEUR?/p&
username锛氳?姹備负String绫诲瀷鐨勫弬鏁帮紝鐢ㄤ簬鍝嶅簲HTTP璁块棶璁よ瘉璇锋眰鐨勭敤鎴峰悕銆?/p&
password锛氳?姹備负String绫诲瀷鐨勫弬鏁帮紝鐢ㄤ簬鍝嶅簲HTTP璁块棶璁よ瘉璇锋眰鐨勫瘑鐮併EUR?/p&
processData锛氳?姹備负Boolean绫诲瀷鐨勫弬鏁帮紝榛樿?涓簍rue銆傞粯璁ゆ儏鍐典笅锛屽彂閫佺殑鏁版嵁灏嗚?杞?崲涓哄?璞★紙浠庢妧鏈??搴?/p&
聽 聽 聽 聽 聽 聽 聽鏉ヨ?骞堕潪瀛楃?涓诧級浠ラ厤鍚堥粯璁ゅ唴瀹圭被鍨?application/x-www-form-urlencoded"銆傚?鏋滆?鍙戦EUR丏OM
聽 聽 聽 聽 聽 聽 聽鏍戜俊鎭?垨鑰呭叾浠栦笉甯屾湜杞?崲鐨勪俊鎭?紝璇疯?缃?负false銆?/p&
scriptCharset锛氳?姹備负String绫诲瀷鐨勫弬鏁帮紝鍙?湁褰撹?姹傛椂dataType涓?jsonp"鎴栬EUR?script"锛屽苟涓攖ype鏄疓ET鏃?/p&
聽 聽 聽 聽 聽 聽 聽 聽鎵嶄細鐢ㄤ簬寮哄埗淇?敼瀛楃?闆?charset)銆傞EUR氬父鍦ㄦ湰鍦板拰杩滅▼鐨勫唴瀹圭紪鐮佷笉鍚屾椂浣跨敤銆?/p&
妗堜緥浠ｇ爜锛?/p&
$(function(){
聽 聽 $('#send').click(function(){
聽 聽 聽 聽 聽$.ajax({
聽 聽 聽 聽 聽 聽 聽type: "GET",
聽 聽 聽 聽 聽 聽 聽url: "test.json",
聽 聽 聽 聽 聽 聽 聽data: {username:$("#username").val(), content:$("#content").val()},
聽 聽 聽 聽 聽 聽 聽dataType: "json",
聽 聽 聽 聽 聽 聽 聽success: function(data){
聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽$('#resText').empty(); 聽 //娓呯┖resText閲岄潰鐨勬墍鏈夊唴瀹?/p&
聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽var html = '';聽
聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽$.each(data, function(commentIndex, comment){
聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽html += '&div class="comment"&&h6&' + comment['username']
聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽+ ':&/h6&&p class="para"' + comment['content']
聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽+ '&/p&&/div&';
聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽});
聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽$('#resText').html(html);
聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 }
聽 聽 聽 聽 聽});
椤轰究璇翠竴涓?.each()鍑芥暟:
$.each()鍑芥暟涓嶅悓浜嶫Query瀵硅薄鐨別ach()鏂规硶锛屽畠鏄?竴涓?叏灞EUR鍑芥暟锛屼笉鎿嶄綔JQuery瀵硅薄锛岃EUR屾槸浠ヤ竴涓?暟缁勬垨鑰呭?璞′綔涓虹?1涓?弬鏁帮紝浠ヤ竴涓?洖璋冨嚱鏁颁綔涓虹?2涓?弬鏁般EUR傚洖璋冨嚱鏁版嫢鏈変袱涓?弬鏁帮細绗?涓?负瀵硅薄鐨勬垚鍛樻垨鏁扮粍鐨勭储寮曪紝绗?涓?负瀵瑰簲鍙橀噺鎴栧唴瀹广EUR?/p&
亟需动态创建DIV
需要动态创建DIV
这是原来的CSS样式 .item{float:overflow:margin-left:8margin-top:10width: 320 height: 250background-repeat: no- background-image:url(../images/bgred.jpg)} .curve{position:width:320 height:250 z-index:1; left: 75 top: -40} 动态创建DIV代码如下: for(j = 0;j*8 &str. j++) { var mydiv = window.frames["displayFrame"].document.createElement("div"); mydiv.setAttribute("id","itemdiv"+j); mydiv.style.styleFloat="left"; mydiv.style.overflow="hidden"; mydiv.style.marginLeft="8px"; mydiv.style.marginTop="10px"; mydiv.style.width="320px"; mydiv.style.height="250px"; mydiv.style.backgroundRepeat="no-repeat"; mydiv.style.backgroundImage="url(image/bgred.jpg)" window.frames["displayFrame"].document.body.appendChild(mydiv); var curvediv =window.frames["displayFrame"].document.createElement("div"); curvediv.setAttribute("id","curvediv"+j); curvediv.style.position="relative"; curvediv.style.zIndex=1; curvediv.style.left="75px"; curvediv.style.top="-40px"; curvediv.style.width="320px"; curvediv.style.height="250px"; window.frames["displayFrame"].document.getElementById("divitem"+j).appendChild(curvediv); } 把div元素增加到HTML里面. 也可在HTML里面定义一个SPAN window.frames["displayFrame"].document.getElementById("spanId").appendChild(mydiv); window.frames["displayFrame"].document.body.appendChild(mydiv); IE和Firefox都支持. 另外需要注意的是这个CSS元素 浮动效果:float:left 在IE下代码为:mydiv.style.styleFloat="left"; 在Firefox代码为: mydiv.style.cssFloat="left"; 其他的诸如这种元素: 在CSS编写中一般是:margin-left:8px 而在动态增加需要去掉- :mydiv.style.marginLeft="8px"; 关于大小写敏感问题没有仔细研究.详细出处参考：http://www.jb51.net/article/15938.htmjs 动态创建div 提示框
绝对定位&style type="text/css"&.f{ cursor: position: border:1px solid #090; background:#e9fde9 url(${pageContext.request.contextPath}/resource/images/frame/arr_tip_on.gif) 4px 6px no-
padding:4px 3px 1px 14
color:#444;}&/style&&script& var oo = function create(key,message){
if(oo==true){
var div =document.createElement("div");
div.className="f";
div.id="div";
div.innerHTML="&font size='1'&"+message+"&/font&";
document.body.appendChild(div);
var leftpos=0;
var toppos=0;
var obj=document.getElementByIdx(key);
obj = obj.offsetP //得到上级位置元素对象
leftpos += obj.offsetL
toppos += obj.offsetT
}while(obj.tagName!="BODY");
document.getElementByIdx("div").style.left=document.getElementByIdx(key).offsetLeft+//
document.getElementByIdx("div").style.top=document.getElementByIdx(key).offsetTop+document.getElementByIdx(key).offsetHeight+//位置：距离di为text的组件上边同样位置
div.onmouseout=
function del(e){
var obj=e.relatedTarget||e.toE
var div =document.getElementByIdx("div");
if(div.contains(obj))
document.body.removeChild(div);
oo= }&/script& 参考三：js动态div添加 &script&function showval(){
document.form1.input2.value = document.form1.input1.
f_creatediv(document.form1.input2.value)}// js创建DIVvar objdiv, objnamefunction f_creatediv(num){
var add_div,add_
add_div=document.createElement("DIV")
add_name="show_div"
add_div.id="show_div1"
document.body.appendChild(add_div);
document.getElementById('show_div1').style.display = "";
for(var i = 0; i & i ++ )
objdiv = document.createElement("DIV");
objname = "shop_" + i
objdiv.id =
objdiv.style.top = 100 * i + 100;
objdiv.style.left = 100 * i + 100;
objdiv.style.background = '#FFFF00';
objdiv.style.visibility = 'visible';
objdiv.style.width = 100;
objdiv.style.height = 20;
objdiv.style.border = "5 groove black";
objdiv.innerHTML = "SHOP_" +
document.getElementById('show_div1').appendChild(objdiv);
document.getElementById(objname).onmouseover = function()
// alert(this.id)
this.style.background = '#999999';
document.getElementById(objname).onmouseout = function()
this.style.background = '#FFFF00';
document.getElementById(objname).onclick = function()
document.form1.input1.value = this.
document.getElementById('show_div1').removeNode(true);
// f_creatediv(num)//
}}&/script&&html&&head&&title&&/title&//&style type="text/css"&&!--#div1 {position:left:10top:67width:360height:96z-index:1;}--&&/style&&/head&&body&&!--&div id="div1"&&/div&--&&form name="form1" &&p&&input name="input1" id="input1" value="5" onClick="showval()" /&&input name="input2" id="input2" value=""/&&/p&&/form&&/body&&/html&参考四：纯 JS 控制 DIV 选择&html& &head&
&title&纯JS控制DIV选择范围移动与复制&/title& &/head&&body onselectstart="return false"&&script language="javascript" type="text/javascript"& var copyNo = 0; var eventType = "nothing";
//"nothing"无事件，"selecting"选择中，"isSelected"选择判断中，"keepSelect"继续选择，"keepSelecting"继续选择中，"selected"确认选择，"move"移动中, "isMoved"继续移动，"moved"确认移动，"keepMove"继续移动, "reMove"重新移动 var oX,oY,nX,nY; var oLeft,oT var selectD var cloneD var borderA var changeD var oT //创建DIV function createDiv(divID, divLeft, divTop) {
var div = document.createElement("div");
div.id = divID;
div.group = "divGroup";
div.selectBorder = "#px solid";
div.noSelectBorder = "#px solid";
div.isSelect =
div.style.cssText = "width: 250 height: 50 left: " + divLeft + "; top: " + divTop + "; border: # text-align: position: background-color: #f5f5f5";
div.innerHTML = "&table style=\"width: 100%; height: 100%; text-align: vertical-align: middle\"&&tr&&td&coding by pippe&br /&&a href='mailto:'&&/a&&/td&&/tr&";
document.body.appendChild(div); } createDiv("oldDiv1", "100px", "400px"); createDiv("oldDiv2", "400px", "400px"); createDiv("oldDiv3", "700px", "400px"); //左键按下事件 function eventDown() {
if (event.button == 1)
oX = document.body.scrollLeft + event.clientX;
oY = document.body.scrollTop + event.clientY;
switch(eventType)
case "nothing":
//初次选择
case "keepSelect":
//继续选择
eventType = eventType == "nothing" ? "selecting" : "keepSelecting";
borderArea = document.createElement("div");
borderArea.id = "borderArea";
borderArea.style.left = oX + "px";
borderArea.style.top = oY + "px";
borderArea.style.position = "absolute";
borderArea.style.border = "#FF7700 1PX dotted";
document.body.appendChild(borderArea);
case "selected":
var len = selectDiv.
cloneDiv = new Array();
oLeft = new Array();
oTop = new Array();
for (var i = 0; i & i++)
cloneDiv[i] = selectDiv[i].cloneNode(true);
cloneDiv[i].style.filter = "alpha(opacity=50)";
oLeft[i] = parseInt(cloneDiv[i].style.left);
oTop[i] = parseInt(cloneDiv[i].style.top);
document.body.appendChild(cloneDiv[i]);
cloneDiv[i].setCapture();
eventType = "move";
} } //拖动事件 function eventMove() {
if (event.button == 1)
nX = document.body.scrollLeft + event.clientX;
nY = document.body.scrollTop + event.clientY;
//选择范围
switch (eventType)
case "selecting":
//初次选择
case "keepSelecting":
//继续选择
borderArea.style.left = nX &= oX ? nX + "px" : oX + "px";
borderArea.style.top = nY &= oY ? nY + "px" : oY + "px";
borderArea.style.width = nX &= oX ? nX - oX : oX - nX;
borderArea.style.height = nY &= oY ? nY - oY : oY - nY;
var theDivs = document.getElementsByTagName("div");
var len = theDivs.
var thisLeft, thisTop, thisRight, thirB
var x1,y1,x2,y2;
x2 = nX &= oX ? oX : nX;
x1 = nX &= oX ? nX : oX;
y2 = nY &= oY ? oY : nY;
y1 = nY &= oY ? nY : oY;
for (var i = 0; i & i++)
if (theDivs[i].group != "divGroup")
thisLeft = parseInt(theDivs[i].style.left);
thisRight = thisLeft + parseInt(theDivs[i].style.width);
thisTop = parseInt(theDivs[i].style.top);
thisBottom = thisTop + parseInt(theDivs[i].style.height);
//判断是否在选择框范围内
if ((((thisLeft & x1 && thisLeft & x2) || (thisRight & x1 && thisRight & x2)) && ((thisTop & y1 && thisTop & y2) || (thisBottom & y1 && thisBottom & y2)))
|| (((x1 & thisLeft && x1 & thisRight) || (x2 & thisLeft && x2 & thisRight)) && ((y1 & thisTop && y1 & thisBottom) || (y2 & thisTop && y2 & thisBottom))))
if (theDivs[i].isSelect == false)
theDivs[i].style.border = theDivs[i].selectB
theDivs[i].isSelect =
else if (theDivs[i].isSelect == true)
if (eventType == "selecting")
//初次选择
theDivs[i].style.border = theDivs[i].noSelectB
theDivs[i].isSelect =
//继续选择中
var len = selectDiv.
var isTrue =
for (var j = 0; j & j++)
if (theDivs[i].isSelect == true && theDivs[i] == selectDiv[j])
if (!isTrue)
theDivs[i].style.border = theDivs[i].noSelectB
theDivs[i].isSelect =
case "move":
var len = cloneDiv.
for (var i = 0; i & i++)
cloneDiv[i].style.left = (oLeft[i] + nX - oX) + "px";
cloneDiv[i].style.top = (oTop[i] + nY - oY) + "px";
} } //拖移结束 function eventUp() {
nX = document.body.scrollLeft + event.clientX;
nY = document.body.scrollTop + event.clientY;
//选择范围
switch(eventType)
case "selecting":
//初次选择
case "keepSelecting":
//继续选择
if (borderArea)
document.body.removeChild(borderArea);
borderArea =
//存储选中的DIV
var divs = document.getElementsByTagName("div");
var len = divs.
var count = 0;
selectDiv = new Array();
for(var i = 0; i & i++)
if (divs[i].group == "divGroup" && divs[i].isSelect == true)
selectDiv[count] = divs[i];
if (count & 0)
eventType = "isSelected";
createChange();
eventType = "nothing";
case "move":
//移动结束（左键松开）
eventType = "";
var len = cloneDiv.
var aimLeft, aimT
for (var i = 0; i & i++)
cloneDiv[i].releaseCapture();
aimLeft = parseInt(cloneDiv[i].style.left);
aimTop = parseInt(cloneDiv[i].style.top);
event.ctrlKey ? cloneDiv[i].style.left = selectDiv[i].style.left :
event.ctrlKey ? cloneDiv[i].style.top = selectDiv[i].style.top :
move(i, aimLeft, aimTop, event.ctrlKey);
case "nothing":
//恢复初始化
} } //移动的动画 function move(divIndex, aimLeft, aimTop, isCtrlKey) {
var moveSize = 30;
var nowLeft, nowT
if (!isCtrlKey)
//未按住CTRL移动
nowLeft = parseInt(selectDiv[divIndex].style.left);
nowTop = parseInt(selectDiv[divIndex].style.top);
if (nowLeft & aimLeft + moveSize || nowLeft & aimLeft - moveSize || nowTop & aimTop + moveSize || nowTop & aimTop - moveSize)
selectDiv[divIndex].style.left = aimLeft & nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft & nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";
selectDiv[divIndex].style.top = aimTop & nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop & nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";
oTime = setTimeout("move(" + divIndex + ", " + aimLeft + ", " + aimTop + ", " + isCtrlKey + ")", 1);
selectDiv[divIndex].style.left = aimL
selectDiv[divIndex].style.top = aimT
cloneDiv[divIndex].parentNode.removeChild(cloneDiv[divIndex]);
eventType = "isMoved";
createChange();
//按住CTRL复制
nowLeft = parseInt(cloneDiv[divIndex].style.left);
nowTop = parseInt(cloneDiv[divIndex].style.top);
if (nowLeft & aimLeft + moveSize || nowLeft & aimLeft - moveSize || nowTop & aimTop + moveSize || nowTop & aimTop - moveSize)
cloneDiv[divIndex].style.left = aimLeft & nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft & nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";
cloneDiv[divIndex].style.top = aimTop & nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop & nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";
oTime = setTimeout("move(" + divIndex + ", " + aimLeft + ", " + aimTop + ", " + isCtrlKey + ")", 1);
cloneDiv[divIndex].style.left = aimL
cloneDiv[divIndex].style.top = aimT
cloneDiv[divIndex].id = "copyDiv" + copyNo;
cloneDiv[divIndex].style.border = cloneDiv[divIndex].noSelectB
cloneDiv[divIndex].isSelect =
cloneDiv[divIndex].style.filter =
cloneDiv[divIndex].innerHTML = cloneDiv[divIndex].
eventType = "isMoved";
createChange();
} } //创建提示框 function createChange() {
if (!changeDiv)
changeDiv = document.createElement("div");
changeDiv.style.cssText = "width: 0 height: 0 position: border: # background-color: #EBFFFF;";
changeDiv.style.left = nX + "px"
changeDiv.style.top = nY + "px"
document.body.appendChild(changeDiv);
scrollTo(nX, nY);
setChange();
} } //设置提示框 function setChange() {
var thisWidth = parseInt(changeDiv.style.width);
var thisHeight = parseInt(changeDiv.style.height);
if (thisWidth & 300 || thisHeight & 100)
changeDiv.style.width = thisWidth & 300 ? thisWidth + 25 + "px" : "300px";
changeDiv.style.height = thisHeight & 100 ? thisHeight + 25 + "px" : "100px";
setTimeout("setChange()", 1);
switch(eventType)
case "isSelected":
var titleDiv = document.createElement("div");
titleDiv.style.cssText = "width: 100%; height: 20 background-color: #17C7C7; text-align: margin: 1px";
titleDiv.innerHTML = "&span style='height: 100%; color: #012828; margin-top: 5px'&确认选择?&/span&";
changeDiv.appendChild(titleDiv);
createBtn("selected", "确定选择", "20px");
createBtn("keepSelect", "继续选择", "110px");
createBtn("nothing", "重新选择", "200px");
case "isMoved":
var titleDiv = document.createElement("div");
titleDiv.style.cssText = "width: 100%; height: 20 background-color: #17C7C7; text-align: margin: 1px";
titleDiv.innerHTML = "&span style='height: 100%; color: #012828; margin-top: 5px'&确认移动?&/span&";
changeDiv.appendChild(titleDiv);
createBtn("moved", "确定移动", "20px");
createBtn("keepMove", "继续移动", "110px");
createBtn("reMove", "撤销移动", "200px");
} } //创建按钮 function createBtn(changeType, btnText, theLeft) {
var bgColor1 = "#89E3E4", bgColor2 = "#FFA76D";
var color1 = "#113E3F", color2 = "#381701";
var bdColor1 = "#256162", bdColor2 = "#7F3A0C";
var newDiv = document.createElement("div");
newDiv.style.cssText = "left: " + theLeft + "; top: 45 width: 80 height: 20 position: background-color: " + bgColor1 + "; text-align: margin: 1 color: " + color1 + "; border: " + bdColor1 + " 1 cursor: pointer";
newDiv.innerHTML = "&span style='height: 100%; text-align: margin-top: 5px' onselectstart='return false'&" + btnText + "&/span&";
newDiv.setAttribute("onmouseover", function(){this.style.backgroundColor = bgColor2; this.style.color = color2; this.style.borderColor = bdColor2});
newDiv.setAttribute("onmouseout", function(){this.style.backgroundColor = bgColor1; this.style.color = color1; this.style.borderColor = bdColor1});
newDiv.setAttribute("onclick", function(){setEventType(changeType);});
changeDiv.appendChild(newDiv); } //变更eventType function setEventType(changeType) {
eventType = changeT
changeDiv ? document.body.removeChild(changeDiv) :
changeDiv =
switch(changeType)
case "selected":
document.body.style.cursor = "move";
case "keepMove":
eventType = "selected";
case "reMove":
var len = selectDiv.
for (var i = 0; i & i++)
selectDiv[i].style.left = oLeft[i] + "px";
selectDiv[i].style.top = oTop[i] + "px";
if (cloneDiv[i])
cloneDiv[i].parentNode.removeChild(cloneDiv[i]);
eventType = "selected";
case "moved":
case "nothing":
var len = selectDiv.
for (var i = 0; i & i++)
selectDiv[i].style.border = selectDiv[i].noSelectB
selectDiv[i].isSelect =
if (cloneDiv && cloneDiv[i])
cloneDiv[i].style.border = cloneDiv[i].noSelectB
cloneDiv[i].isSelect =
if (eventType != "nothing")
eventType = "nothing";
document.body.style.cursor = "default";
} } document.onmousedown = eventD document.onmousemove = eventM document.onmouseup = eventUp;&/script&&p style="font-weight: bold"&操作说明：&/p&&ol& &li&
&p&按住左键拖动出现虚线选择框&/p& &/li& &li&
&p&虚线选择框经过DIV时，被选中的DIV边框会变粗变色，此时代表此DIV被选中；&br /& 虚线选择框离开DIV时，DIV边框变回原来样式，此时代表此DIV未被选中&/p& &/li& &li&
&p&择需要移动或复制的DIV，释放鼠标左键后出现选择按钮框，有【确定选择】、【继续选择】、【重新选择】三个选项
单击【继续选择】可在原来选择的DIV数量基础上继续选择，此时选择框离开原来选择的DIV原选择DIV也处在选择状态下
单击【重新选择】前面所选择的所有DIV将恢复未选择状态
单击【确认选择】后选择完成，此时鼠标图标变成移动图标
&/p& &/li& &li&
&p&按住左键拖动，此时被选择的DIV会复制出半透明的层随着鼠标移动而移动&/p& &/li& &li&
&p&在想移动的目的地或复制的目的地释放鼠标左键，产生一段过度动画，如果未按住CTRL将把原位置移动到新位置，按住则复制一个DIV到新位置&br /&
动画结束后，出现选择按钮框，有【确定移动】、【继续移动】、【撤销移动】三个选项
单击【继续移动】可再次移动/复制选择的DIV
单击【撤销移动】撤销本次操作，还原上一次移动/复制时的界面
单击【确认移动】本次移动/复制完成，可通过第一步继续移动/复制
&/p& &/li&&/ol& &/body&&/html&范围移动与复制
使用OM-UI高速搭建系统前台框架
使用OM-UI快速搭建系统前台框架
WebRoot里面的目录结构为：1、main.jsp页面：
&%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&
&%@ taglib uri="/jsp/jstl/core" prefix="c"%&
&%@ page import="java.util.*"%&
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"&
&title&欢迎登录XXXX&/title&
&meta http-equiv="Content-Type"
content="application/xhtml+ charset=utf-8" /&
&link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/main.css"/&
&link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/default/om-default.css"/&
&script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery.min.js"&&/script&
&script type="text/javascript" src="${pageContext.request.contextPath}/script/operamasks-ui.min.js"&&/script&
&script type="text/javascript" src="${pageContext.request.contextPath}/script/frame.js"&&/script&
&script type="text/javascript"&
var basePath = "${pageContext.request.contextPath}";
&div id="page"&
&div id="north-panel"&
&div class="head_logo" style="text-align:left"&
&font class="logo_text"&定位服务中心&/font&
&div class="right_img"&
&img id="to_home" class="right_imgs_css" src="${pageContext.request.contextPath}/images/home.png" /&
&img id="set_user" class="right_imgs_css" src="${pageContext.request.contextPath}/images/setting.png" /&
&img id="refresh_page" class="right_imgs_css" src="${pageContext.request.contextPath}/images/refresh.png" /&
&img id="help_doc" class="right_imgs_css" src="${pageContext.request.contextPath}/images/help.png" /&
&img id="logout" class="right_imgs_css" src="${pageContext.request.contextPath}/images/exit.png" /&
&div id="center-panel"&
&div id="tabs"&
&li&&a tabid="firstTab" id="firstTab" href="#tab1"&首页&/a&&/li&
&div id="tab1"&
欢迎登录XXXX
&div id="west-panel"
class="om-accordion" style="position:"&
&div id="nav-panel-1" class="nav-panel"&
&div class="my_menu_item nav-item" onclick="addItemToTab('/user/initQuery.action',this);"&用户数据查询&/div&
&div class="my_menu_item nav-item" onclick="addItemToTab('/ueOffset/init.action',this);"&手机类型管理&/div&
&div id="nav-panel-2" class="nav-panel"&
&div class="my_menu_item nav-item" onclick="addItemToTab('/hnb/initImport.action',this);"&基站数据导入&/div&
&div class="my_menu_item nav-item"
onclick="addItemToTab('/hnb/query.action',this);"&基站数据查询&/div&
&div class="my_menu_item nav-item"
onclick="addItemToTab('/hnb/reference.action',this);"&参考点配置&/div&
&div id="nav-panel-4" class="nav-panel"&
&div class="my_menu_item nav-item"
onclick="addItemToTab('/location/locatonQuery.action',this);"&定位结果查询&/div&
&div class="my_menu_item nav-item"
onclick="addItemToTab('/location/cellLocationQuery.action',this);"&关机定位结果&/div&
&div class="my_menu_item nav-item"
onclick="addItemToTab('/location/exportResult.action',this);"&定位结果导出&/div&
&div id="nav-panel-5" class="nav-panel"&
&div id="update_info" class="nav-item"&个人资料管理&/div&
&div class="nav-item" onclick="addItemToTab('/log/initSetLogLevel.action',this);"&系统日志配置&/div&
&div class="nav-item" onclick="addItemToTab('/setPro/initServiceParameters.action',this);"&服务参数配置&/div&
&div id="exit_main" class="nav-item"&退出&/div&
&div id="update_pwd_dialog-modal" title="修改密码" style="padding-top: 25padding-left: 25"&
&input type="text"/ id="username" value="${sessionScope.username}" style="display:"&
&&新密码：
&input type="password" id="newpwd"/&&br /&
&button style="margin-left: 80" id="update_pwd"&确定&/button&
&button id="cancel_pwd"&取消&/button&
2、frame.js
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi" : "g")),
replaceWith);
return this.replace(reallyDo, replaceWith);
// tabpanels
//var tabs =
* &一句话功能简述& &功能详细描述&
* @author smart
* @version [版本号, ]
* @see [相关类/方法]
* @since [产品/模块版本]
$(document).ready(function() {
$("#update_pwd_dialog-modal").omDialog({
autoOpen: false,
height: 140,
modal: true
var element = $('#page').omBorderLayout({
panels : [{
id : "north-panel",
header : false,
region : "north",
height : 90
id : "center-panel",
header : false,
region : "center"
id : "west-panel",
resizable : true,
collapsible : true,
title : "系统目录",
region : "west",
width : 180
var menuPanel = [{
id : "nav-panel-1",
title : "用户管理"
id : "nav-panel-2",
title : "基站管理"
id : "nav-panel-3",
title : "参数配置"
id : "nav-panel-4",
title : "定位信息"
id : "nav-panel-5",
title : "系统管理"
$(menuPanel).each(function(index, panel) {
$("#" + panel.id).omPanel({
title : panel.title,
collapsed : true,
collapsible : true,
// 面板收缩和展开的时候重新计算自定义滚动条是否显示
onCollapse : function() {
$("#west-panel").omScrollbar("refresh");
onExpand : function() {
$("#west-panel").omScrollbar("refresh");
// 初始化中间的tab页签
$('#center-tab').omTabs({
height : "fit",
border : false
// tabpanel
var tabs = $("#tabs").omTabs({
width : '100%',
height : '100%',
tabMenu : true,
closeFirst: false,
closable : true,
// switchMode : 'mouseover',
tabWidth : 100
// 把首页的关闭图标去掉
$("#firstTab").find("+ a.om-icon-close").remove();
// 给logo右边的图片增加样式
changeHeaderImg();
// 回到主页
$("#to_home").click(function(){
$('#tabs').omTabs('activate', "firstTab");
$("#set_user").click(function(){
$("#update_pwd_dialog-modal").omDialog('open');
// 修改密码
$("#update_pwd").click(function(){
var username = $("#username")[0].
var newpwd = $("#newpwd")[0].
url : basePath + "/login/updatePassword.action",
data : "username=" + username + "&newpwd=" + newpwd,
success: function(msg){
$("#update_pwd_dialog-modal").omDialog('close');
if(msg == '1')
$.omMessageTip.show(
type : 'success',
title : "提示",
content : "修改密码成功",
timeout : 1500
$.omMessageTip.show(
type : 'error',
title : "提示",
content : "修改密码失败",
timeout : 1500
// 取消修改密码
$("#cancel_pwd").click(function(){
$("#update_pwd_dialog-modal").omDialog('close');
$("#refresh_page").click(function(){
window.location.reload();
// 关闭其它页签，刷新首页页签
var self = tabs, $headers = self.find('&div.om-tabs-headers');
$headers.find('ul li').each(function(index, item) {
var itemId = $(item).find('a.om-tabs-inner')
.attr('tabid');
if ("firstTab" === itemId)
self.omTabs('close', (self.omTabs('getAlter',
itemId)));
// 刷新首页页签
$("#help_doc").click(function() {
var a = window
"../help/help.docx",
"height=0,width=0, top=100 left=50 toolbar=no,menubar=no,scrollbars=no,resizable=on,location=no,status=no");
a.document.execCommand("SaveAs");
// 导航退出
$("#logout").click(function(){
window.location = basePath + "/";
// 菜单退出
$("#exit_main").click(function(){
window.location = basePath + "/";
// 修改个人资料
$("#update_info").click(function(){
$("#update_pwd_dialog-modal").omDialog('open');
// 单击菜单项时，增加一个tabpanel
function addItemToTab(url, obj) {
var urltemp =
var tabid = urltemp.replaceAll("/", "");
tabid = tabid.replace("\.", "");
if ($("a[tabId='" + tabid + "']").length & 0) {
$('#tabs').omTabs('activate', tabid);
url = basePath +
$('#tabs').omTabs('add', {
tabId : tabid,
title : obj.innerHTML,
closable : true,
tabMenu : true,
border : false,
content : "&iframe src ='" + url + "' id='" + tabid + "' name='" + tabid
marginwidth=0 style='overflow:' marginheight=0 width=100% height='' "
//+ " onload='setIframeHeight(this)' "
+ " frameborder='no' border=0 &&/iframe&"
* 鼠标移入移出时改变图片的样式
function changeHeaderImg() {
var oLi = $(".right_imgs_css");
for (var i = 0; i & oLi. i++) {
oLi[i].onmouseover = function() {
$(this).addClass("header_alpha");
oLi[i].onmouseout = function() {
$(this).removeClass("header_alpha");
* 设置iframe的高度（目前只考虑ff）
* 用name属性，可兼容所有浏览器
function setIframeHeight(name) {
var iframe = document.getElementById(name.name);
if(iframe)
if (undefined != iframe.ownerDocument
&& undefined != iframe.ownerDocument.body.offsetHeight) {
// body的高度减去 top(89)、tab_header(28+12)、边框等高度
iframe.height = parseInt(iframe.ownerDocument.body.offsetHeight) - 150;
/*if($.browser.mozilla) // ff
/*$(window).resize(function(){
3、main.css
html,body {
font-size: 12
width: 100%;
height: 100%;
margin: 0;
padding: 0;
height: 100%;
#north-panel h2{
font-size: 18
font-weight:
div.icon-help{
background-image: url("images/icon-help.png");
margin-top: -2
#search-panel span.label{
margin-left: 10
#search-panel .input-text {
border: 1px solid #6D869E;
height: 18
vertical-align:
width: 137
#search-panel span.om-combo,#search-panel span.om-calendar{
vertical-align:
#grid .om-btn-icon {
padding-left: 34
#grid .op-menu{
background-color: #E6ECF5;
border: 1px solid #99A8BC;
padding: 0;
#grid .op-menu div{
padding-left: 20
#grid .op-menu div:hover{
background-color: #4E76AD;
color: #FFFFFF;
#grid .op-menu .edit{
background: url("images/op-edit.png") no-repeat scroll 7px 5
#grid .op-menu .delete{
background: url("images/op-delete.png") no-repeat scroll 7px 5
.om-borderlayout-region-west .om-borderlayout-region-header{
padding: 0
border: 0;
height: 28
line-height: 28
background: url("images/accordion/leftmenu_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
border-right:1px solid #99A8BB;
font-size: 14
font-weight:
.om-borderlayout-region-west .om-panel-body{
padding: 0;
.nav-panel {
padding: 0;
.nav-panel div.nav-item{
line-height: 25
font-size: 13
padding-left: 40
list-style-type:
.nav-panel div.user{
background: url("images/user.png") no-repeat scroll 20px 4
.nav-panel div.nav-item:hover{
border: 1px solid #99A8BC;
background-color: #C4D6EC;
padding-left: 39
line-height: 23
.nav-panel div.user:hover{
background-position: 19px 3
/* 左侧菜单的title距左15px,字体14px */
.om-panel-title{
padding-left: 15
font-size: 14
font-weight:
.om-tree .om-tree-node a:link {
color: #1E1E1E;
text-decoration:
font: normal 14px 宋体;
padding: 0;
color: #0000EE;
font-size: 14
list-style-type:
margin: 0;
padding: 0;
li:hover {
background-color: #46A3FF;
.li_selected {
background-color: #0072E3;
width: 100%;
height: 100%;
.settings {
background-image: url(../images/folder_wrench.png);
background-image: url(../images/folder_go.png);
.sub_item{
margin-left: 10
background-image: url(../images/leaf.gif);
#center-panel{
height:600
/* logo img */
#north-panel{
background: url(../images/head_bg.png) repeat-x;
/* 右边的图标 */
.right_img{
height: 88
vertical-align:
margin: 0px 30px 0px 0
.right_imgs_css{
margin-top: 20
margin-right: 30
/*菜单title*/
.menu_title{
font-size: 14
/* 左边菜单 div*/
.treeLEheight a{
margin: 2px 0;
padding: 2px 2px 2px 15
text-decoration:
/* 二级菜单css */
.second_menu{
.second_menu a{
margin: 2px 0;
padding: 2px 2px 2px 25
text-decoration:
.red_label{
color: 'red';
/* header img */
.header_alpha{
background-color:#FFFFFF;
filter:alpha(opacity=80); /* IE 透明度20% */
-moz-opacity:0.8; /* Moz + FF 透明度20%*/
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）透明度20%*/
.logo_text{
font-size: 32
font-weight:
line-height: 89
text-align:
用户查询的菜单项：
$(document)
function()
// 条件查询的面板
var panel = $("#condition_query").omPanel(
width : 'fit',
height : '105px',
iconCls : "panel_search",
header : true,
title : '条件查询',
collapsed : false,
collapsible : true
// 把查询的表单加入到面板当中
$("#condition_query").append($("form[name='locationResult']"));
// 修改图标
$(".panel_search").removeClass("om-icon");
$(".panel_search").removeClass("om-panel-icon");
// 手机号码自动搜索
$("#msisdn").omSuggestion(
queryName : 'msisdn',
method : 'POST',
dataSource : path + "/location/getAllMsisdnByJson.action"
// 用户名自动搜索
$("#userName").omSuggestion(
queryName : 'userName',
method : 'POST',
dataSource : path + "/location/getAllUserNameByJson.action"
// 手机短号联想搜索
$("#shortMsisdn").omSuggestion(
queryName : 'shortNum',
method : 'POST',
dataSource : path + "/location/getAllShortNumByJson.action"
// imsi联想搜索
$("#imsi").omSuggestion(
queryName : 'imsi',
method : 'POST',
dataSource : path + "/user/getAllImsiByJson.action"
$("#userInfoGrid")
dataSource : path + "/user/getAllUser.action",
singleSelect : true,
showIndex : true,
height: 450,
colModel :
header : '用户名',
name : 'userName',
width : 100,
align : 'center'
header : '手机号码',
name : 'msisdn',
width : 100,
align : 'center'
header : '手机短号码',
name : 'shortMsisdn',
width : 100,
align : 'center'
header : 'IMSI号码',
name : 'imsi',
width : 200,
align : 'center'
header : '手机类型标识',
name : 'imei',
width : 100,
align : 'center',
type : 'text',
editable : true,
name : 'imei',
"required", true, "手机类型标识是必填的"
"minlength", 6, "手机类型标识长度为六位"
"maxlength", 6, "手机类型标识长度为六位"
header : '用户状态',
name : 'ueState',
width : 100,
align : 'center',
renderer : function(colValue)
if ("0" == colValue)
return '&span style="color:"&离线&/span&';
return '&span style="color:"&在线&/span&';
type : 'text',
editable : false,
name : 'ueState',
renderer : function(colValue)
if ("0" == colValue)
return '&input type="text" value="离线" class="grid-edit-text readonly-text" readonly="readonly" style="width:95%"/&';
return '&input type="text" value="在线" class="grid-edit-text readonly-text" readonly="readonly" style="width:95%"/&';
header : '备注',
name : 'remark',
width : 180,
align : 'center'
onAfterEdit : function(rowIndex, rowData)
var msisdn = rowData['msisdn'];
var imei = rowData['imei'];
// 修改后的数据入库
type : 'POST',
data : 'msisdn=' + msisdn + '&imei=' + imei,
url : path + '/user/updateUserImei.action',
dataType : 'script',
success : function(msg)
if ("1" == msg)
$.omMessageBox.alert(
type : 'success',
title : '提示',
content : '修改成功'
$.omMessageBox.alert(
type : 'error',
title : '提示',
content : '修改失败'
// 重新加载数据
$('#userInfoGrid').omGrid('reload');
// 设置父页面iframe的高度
parent.document.getElementById("userinitQueryaction").height=560;
// 条件查询
function submitForm()
var imsi = $.trim($("#imsi").val());
var msisdn = $.trim($("#msisdn").val());
var userName = encodeURI(encodeURI($.trim($("#userName").val())));
var shortMsisdn = $.trim($("#shortMsisdn").val());
$('#userInfoGrid').omGrid(
"setData",
path + '/user/getAllUser.action?imsi=' + imsi + '&msisdn=' + msisdn + '&userName=' + userName
+ '&shortMsisdn=' + shortMsisdn);
// 查询条件重置
function reset()
var msisdn = $.trim($("#msisdn").val(""));
var userName = $.trim($("#userName").val(""));
var imsi = $.trim($("#imsi").val(""));
var shortMsisdn = $.trim($("#shortMsisdn").val(""));
最终的效果为：
如果您想提高自己的技术水平，欢迎加入本站官方1号QQ群：&&，&&2号QQ群：，在群里结识技术精英和交流技术^_^
本站联系邮箱：