`

YUI样式的一点心得

    博客分类：
  • js
YUIYahoojsonJSPHTML 
阅读更多
<%@ page language="java" import="java.util.Date" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>  
<%@include file="/public/jsp/init.jsp"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/public/ui/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/public/ui/yui/connection/connection-min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<title>小姐维护</title>
<p:jsLib>
{<c:out escapeXml="false" value="${uiLibs}"/>,
components:['PORTAL.widget.form',
'PORTAL.widget.datatable',
'PORTAL.widget.button',
'PORTAL.widget.container','connection']}
</p:jsLib>
<Script language="javaScript">
PORTAL.namespace("page");
var D = PORTAL.widget.DialogFactory;

//页面初始化
YAHOO.util.Event.onDOMReady(function(){
});

//外部接口
(function(){
PORTAL.page.interface = {
hiddenDialog:function(){
D.get('dialog1').hide();
},
//tmpObj,用于记录iframe 中的dataTable 对象
tmpObj:{},
setItemValue:function(rs){
var obj = PORTAL.page.interface.tmpObj;
obj.datatable.updateCell(obj.record,"itemName",rs.getData("name"));
        obj.datatable.updateCell(obj.record,"itemVersion",rs.getData("ecn"));
        D.get('vendorItemDialog').hide();
}
};

})();

//页面业务类
(function(){
PORTAL.page.bussiness={
//处理返回成功的函数
handleSuccess:function(o) {
if (o.responseText !== undefined) {
var result=eval("("+o.responseText+")");
alert(o.responseText);
}
},
handleFailure:function(o) {
//处理失败的函数
if (o.responseText !== undefined) {
alert("HTTP状态: " + o.status);
alert("HTTP状态代码的信息: " + o.statusText);
}
},
doSave:function(){//新增保存方法

alert('提交');
//回调函数
var callback = {
success:function(o){
var status = YAHOO.lang.JSON.parse(o.responseText);
        if(!status.status){        
        alert("×错误！(请选择正确选项)");
        YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","block");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
},3000);
        }else{
alert("√保存成功！");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","block");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
},3000);
}
},failure: function(o) {
            alert(o.responseText);
            YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","block");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
},3000);
            }
};
var id = document.getElementById("Pid").value;
var no = document.getElementById("vendorNo").value;
var name = document.getElementById("vendorname").value;
var canBeConsumed = document.getElementById("canBeConsumed").checked;
var canBeReceived = document.getElementById("canBeReceived").checked;
var desc = document.getElementById("desc").value;
var sUrl= PORTAL.constant.CONTEXT_PATH +"/views/masterData/vendor/vendorMaintenanceAction!doSave.action";
var postData="Pid="+id+"&vendorNo="+no+"&vendorname="+name+"&canBeConsumed="+canBeConsumed+"&canBeReceived="+canBeReceived+"&desc="+desc;
alert(postData);
var request = YAHOO.util.Connect.asyncRequest("POST",sUrl,callback, postData);
},
canBeConsumedValue:function (){// 可接受人员 alert("select");
var obj = document.getElementById("selectCanBeConsumed");
var index = obj.selectedIndex; // 选中索引
var value = obj.options[index].value; // 选中值
if(value!=null){
document.getElementById("canBeConsumed").value=value;
}else{
document.getElementById("canBeConsumed").value=" ";
}
},
canBeReceivedValue:function (){//可消人员 alert("select1");
var obj = document.getElementById("selectCanBeReceived");
alert(obj);
var index = obj.selectedIndex; // 选中索引
alert(index);
var value = obj.options[index].value; // 选中值
if(value!=null){
document.getElementById("canBeReceived").value=value;
}else{
document.getElementById("canBeReceived").value=" ";
}
},
getVendorDetail:function (){//得到单个客户
//回调函数
var callback = {
success:function(o){
var status = YAHOO.lang.JSON.parse(o.responseText);
        if(!status.status){        
        alert("×错误！(改小姐不存在！请重新输入！)");
        YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","block");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
},3000);
        }else{
        YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","block");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("errorMes"),"display","none");
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("excepMes"),"display","none");
window.setTimeout(function(){
YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get("succeMes"),"display","none");
},3000);
        YAHOO.util.Dom.get("vendorNo").value=status.result.no;
YAHOO.util.Dom.get("vendorname").value=status.result.name;
YAHOO.util.Dom.get("canBeConsumed").value=status.result.canBeConsumed;
YAHOO.util.Dom.get("canBeReceived").value=status.result.canBeReceived;
YAHOO.util.Dom.get("desc").value=status.result.desc;
YAHOO.util.Dom.get("createUser").value=status.result.createUser.id;
YAHOO.util.Dom.get("createDate").value=status.result.createDate;
YAHOO.util.Dom.get("modifyUser").value=status.result.modifyUser.id;
YAHOO.util.Dom.get("modifyDate").value=status.result.modifyDate;
}
},failure: function(o) {
            alert(o.responseText);
            } //处理成功对应的函数
};
alert("fdsfdsfsfds");
var no = document.getElementById("vendorNo").value;
alert("jagdjhfjsdhgf");
var postData = "vendorNO="+no;
alert("====================="+no);
var sUrl= PORTAL.constant.CONTEXT_PATH +"/views/masterData/vendor/vendorMaintenance/vendorMaintenanceAction!getVendorDetail.action";
alert(sUrl);

try{
var request = YAHOO.util.Connect.asyncRequest("POST",sUrl,callback, postData);
}catch(ex){alert(ex.message);}
},
find:function(){//模糊查询
//回调函数
var callback = {
success:function(o){
var status = YAHOO.lang.JSON.parse(o.responseText);
        if(!status.status){        
        alert("×错误！(请选择正确选项)");
        }else{
alert("√查询成功！");
}
},failure: function(o) {
            alert(o.responseText);
            } //处理成功对应的函数
};
var vendorName = document.getElementById("vendorname").value;
var vendorNo = document.getElementById("vendorNo").value;
var postData = "vendorname="+vendorName+"&vendorNo="+vendorNo;
alert("fddddddd");
var path= PORTAL.constant.CONTEXT_PATH+"/views/masterData/vendor/vendorMaintenance/vendorList.jsp?vendorNo="+vendorNo+"&vendorname="+vendorName;
var panel = D.show("dialog1", 
            { fixedcenter : true,
              visible : true, 
              constraintoviewport : true,
              header:"供应商列表",
              body:"<iframe frameborder=0 width='500px' height='350px' src='"+path+"'></iframe>",
              buttons : [ 
                          { text:"取消", handler:function(){
this.hide();
}}]
             } );
},
setFormValue:function(obj){//给表单赋值
YAHOO.util.Dom.get("vendorNo").value=obj.getData("no");
alert(YAHOO.util.Dom.get("vendorNo").value);
YAHOO.util.Dom.get("vendorname").value=obj.getData("name");
YAHOO.util.Dom.get("desc").value=obj.getData("desc");
YAHOO.util.Dom.get("canBeConsumed ").value=obj.getData("canBeConsumed");
YAHOO.util.Dom.get("canBeReceived").value=obj.getData("canBeReceived");
YAHOO.util.Dom.get("createUser").value=obj.getData("createUser").id;
YAHOO.util.Dom.get("createDate").value=obj.getData("createDate");
YAHOO.util.Dom.get("modifyUser").value=obj.getData("modifyUser").id;
YAHOO.util.Dom.get("modifyDate").value=obj.getData("modifyDate");
YAHOO.util.Dom.get("Pid").value=obj.getData("Pid");
},
showAddItemWin:function(){

var path= PORTAL.constant.CONTEXT_PATH+"/views/masterData/vendor/vendorMaintenance/item.jsp";
var panel2 = D.show("dialog2", 
            { fixedcenter : true,
              visible : true, 
              constraintoviewport : true,
              header:"物料明细",
              body:"<iframe frameborder=0 width='500px' height='350px' src='"+path+"'></iframe>",
              buttons : [ 
                          { text:"取消", handler:function(){
this.hide();
}}]
             } );
}
};
})();

</Script>
</head>


<body onload="setTab('two',2,7 ,'jt',1,2)" class="yui-skin-sam">
<div  class="cncom_bg">
<div class="con_bg">
<jsp:include page="/views/fragment/top.jsp"/>  
<jsp:include page="/views/fragment/nav.jsp"/>           
    <div class="cncom_main">
    <div class="comm_left">
        <div class="comm_left_box">            
           <div class="comm_left_tx_vo">
<div class="comcn_teb_h2_vo">
                <span class="h2_lead">供应商维护</span>
                <span class="float_right"></span>
</div>
<table id="mytable_vo" class="ccn_tab_vo" cellspacing="0" summary="">
<%session.setAttribute("site","BYD-mes");%>
  <tr>
    <th scope="row"  class="spec">地点 ：</th>
    <td><%=session.getAttribute("site") %></td>
    <td>用户登录地点</td>
  </tr>
  <tr>
    <th scope="row"   class="specalt">小姐编号 ：</th>
    <td class="alt"><input class="cc_inp_a" tabIndex="2"  type="text"  name="no" id="vendorNo"/>
<input class="icon_select" type="button" name="select" title="查询"   value=""
onclick="PORTAL.page.bussiness.find()" />
<input class="sear_but_vo" name="ss" type="button" value="检索" onclick="PORTAL.page.bussiness.getVendorDetail()"/>
<input class="sear_but_vo"

value="清空" name="abc" type="reset" />
</td>
  </tr>  
</table>
            </div>
<!--
<div class="bydit_success">√查询成功！</div>
<div class="bydit_exceptional" >×异常！(请选择正确选项)</div>            
<div class="bydit_error" >×错误！(请选择正确选项)</div>   
-->
<div class="x_con_coom">
<div class="table_middle_h2_xx_bg">
<div class="table_middle_h2_xx">
<div class="table_middle_b_q_textx">
<ul>
    <li class="hover" id="jt1" onClick="setTab('jt',1,2)">基本信息</li>
    <li id="jt2" onClick="setTab('jt',2,2)">明细</li>
</ul>
</div>
</div>
</div>
</div>
<div class="xcon_cont">

<div class="jt_con_a"  id="con_jt_1">
<%session.setAttribute("user","超级赛亚人");%>
<table id="mytable" class="ccn_tab_vo" cellspacing="0" summary="">
<tr>
<th colspan="2" class="nobg" scope="col">&nbsp;</th>
</tr>
<tr>
<th scope="row" class="spec">建档人 ：</th>
<td>${user }</td>
</tr>
<tr>
<th scope="row" class="specalt">修改人 ：</th>
<td class="alt">${user}</td>
</tr>
<tr>
<th scope="row" class="spec">建档时间 ：</th>
<td><%="2010-10-26 09:39:23"%></td>
</tr>
<tr>
<th scope="row" class="specalt">修改时间 ：</th>
<td class="alt"><%="2010-10-26 09:39:23"%></td>
</tr>

</table>
<form  action="${pageContext.request.contextPath}/views/masterData/vendor/vendorMaintenanceAction.action" method="post">
<table id="mytable" class="ccn_tab" cellspacing="0" summary="">
<caption>详细信息</caption>
   <tr>
    <th colspan="2" class="nobg" scope="col"  >&nbsp;</th>
  </tr>
  <tr>
    <th scope="row"  class="spec">供应商名称 ：</th>
    <td>
<input class="cc_inp_a" tabIndex="2" type="text"  name="vv" id="vendorname"/>
</td>
  </tr>
  <tr>
    <th scope="row"  class="spec">供应商详细 ：</th>
    <td>
<input class="cc_inp_a" tabIndex="2" type="text"   name="hh" id="desc"/>
</td>
  </tr>
  <tr>
    <th scope="row"   class="specalt">可接受物料 ：</th>
    <td class="alt">
<input name="canBeConsumed" id="canBeConsumed" type="checkbox" />
    </td>
  </tr>
  <tr>
    <th scope="row"  class="spec">可消耗物料 ：</th>
    <td>
<input name="canBeReceived" id="canBeReceived" type="checkbox"  />
</td>
  </tr>
<tr>
<th class="yesbg" scope="col"></th>
<th class="yesbg" scope="col"><input class="button_ll"
value="保存" name="" type="button"
onclick="PORTAL.page.bussiness.doSave()" /> <input class="button_ll"
value="清空" name="" type="reset" /></th>
</tr>

   
 
</table>
   <input type="hidden" name="pid" id="Pid" >
</form>
</div>



<div class="jt_con_b" id="con_jt_2" style="display: none">
<div class="cncom_main">
<div class="comm_left">
        <div class="comm_left_box">
          <div class="comcn_teble">           
             <iframe frameborder=0 width="100%" height="100%" marginheight=0 marginwidth=0 src="vendorItem.jsp" ></iframe>
          </div>
        </div>
  </div>
</div>
</div>  
   
</div>   
         
        </div>
    </div>      
<jsp:include page="/views/fragment/right.jsp"/>      
      <!--comm_right-->
    </div> 
<jsp:include page="/views/fragment/footer.jsp"/>
</div>
</div>
</body>
</html>
分享到：
| onload事件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    yui3-master.zip

    《深入理解YUI3：基于yui3-master.zip的探讨》 YUI（Yahoo! User Interface Library）是由雅虎公司开发的一套开源JavaScript库，它为Web开发者提供了丰富的功能和工具，以创建交互性强、性能优秀的网页应用。YUI3是...

    yui.rar 例子

    《深入理解YUI：基于“yui.rar 例子”的解析》 YUI，全称Yahoo! User Interface Library，是雅虎公司推出的一款开源JavaScript库，旨在帮助开发者构建高性能、易于维护的网页应用。本篇文章将结合“yui.rar 例子”...

    yui 资源包

    《深入理解YUI 3.9.0 r2：界面设计与资源优化》 YUI，全称为Yahoo! User Interface Library，是由雅虎公司开发的一个开源JavaScript库，它旨在简化Web应用程序的构建，特别是对于界面设计和交互效果的实现。在3.9.0...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    YUI3.6文档及示例

    4. **样式与动画**：YUI3.6包含了CSS类操作和动画效果的实现，可以轻松实现复杂的页面过渡和动画效果。 5. **数据管理**：提供了数据存储和模型层管理，方便在客户端进行数据操作和同步。 6. **用户界面组件**：...

    【YUI组件】基于YUI的表单验证器

    通常，这样的组件会有一个主JS文件（如`yui-form-validator.js`），可能还有一个CSS文件（如`yui-form-validator.css`）来处理样式，以及一些示例或测试用例文件。 **相关知识点：** 1. **YUI库**：了解YUI的基本...

    《YUI使用文档》汉语版的yui学习材料

    《YUI使用文档》汉语版是一份详细的YUI学习材料，它涵盖了这个JavaScript库的核心功能和使用方法。YUI，全称Yahoo! User Interface Library，是Yahoo开发的一个开放源代码的JavaScript库，旨在帮助开发者创建交互式...

    YUI 详细说明文档

    YUI提供了一套标准化的CSS样式，帮助开发者快速搭建界面。 - **5.1 Fonts**：定义字体样式。 - **5.2 Reset**：重置浏览器默认的样式，确保在不同浏览器间的一致性。 - **5.3 Grids**：提供了一套网格布局系统...

    yui_2.6.0r2

    YUI 2.6.0r2版本在当时的JavaScript社区中占有重要地位，它提供了大量的可重用模块，涵盖了DOM操作、事件处理、动画效果、Ajax交互、CSS样式管理、数据处理等多个领域。这个版本修复了之前的一些已知问题，增强了...

    YUI-EXT使用详解

    6. **工具提示（Tooltips）**：YUI-EXT还提供了强大的工具提示功能，允许自定义内容、样式和行为，使用户能够获取更多关于界面上元素的信息。 7. **可扩展性（Extensibility）**：YUI-EXT的组件和类系统设计得非常...

    YUI3.7.3 最新版本 带API

    3. **CSS样式工具**：YUI3包含了一套CSS工具，如样式类名管理器（YUI.addClass, YUI.removeClass等），这有助于在JavaScript中动态控制元素的样式。 4. **DOM操作**：YUI3提供了丰富的DOM操作接口，如查找元素（YUI...

    yui3.10.3最新版

    YUI 3的核心组件包括事件处理、DOM操作、动画效果、CSS样式管理、AJAX请求、数据存储以及各种用户界面组件等。 ### 版本3.10.3的特性 - **性能优化**：YUI 3.10.3版本在性能方面做了许多改进，包括更快的脚本执行...

    yui_2.9.0前端UI

    YUI 库，全称Yahoo! UI Library。是一组工具和控件，用JavaScript写成, 为的是用DOM 脚本，DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议，对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    yui_3.8.1.zip

    3. **CSS样式和布局**：YUI包含一套响应式设计的CSS框架，如Grids布局系统，帮助开发者快速创建响应式的网页布局。 4. **数据管理**：YUI提供了Model、ModelList和Store等组件，用于数据的存储、管理和同步，与...

    YUI类库2.9.0下载download

    YUI 2 is a JavaScript and CSS library with more than 30 unique components including low-level DOM utilities and high-level user-interface widgets. Currently at version 2.9.0, YUI 2 is robust, proven, ...

    YUI2 库与例子都有了

    3. **样式（CSS）**：YUI2包含了一套完整的CSS框架，提供栅格系统、布局模板和模块化样式，便于创建响应式和一致的设计。 4. **组件（Components）**：YUI2提供了多种组件，如按钮、表格、日历、菜单、滑块等，这些...

    从YUI2到YUI3看前端的演变 pdf

    个人以为在现阶段，这种方式有一点激进，否能为广大用户所接受并发扬光大，还需要时间检验。YUI是个“学院派”的框架，以性能和严谨著称，易用性相对而言弱了一些。它能否在已经拉开的 JavaScript 框架大战中胜出，...

    yui js压缩工具

    这有助于减少CSS文件的大小，加快页面样式加载速度。 **使用方法** 使用YUI Compressor非常简单，你可以通过命令行界面或集成到构建系统中。在命令行下，只需指定输入文件和输出文件，YUI Compressor就会自动处理...

    YUI.rar_html_javascript YUI_yui_yui javascript

    5. **CSS样式框架**：YUI提供了一套可自定义的CSS样式，帮助开发者快速创建一致的界面风格。 6. **DOM操作**：YUI提供了强大的DOM操作接口，包括选择元素、修改属性、插入和删除节点等。 7. **AJAX**：YUI的AJAX组件...

    yui_2.5.2 类库

    - **样式（StyleSheet）**：提供了操作CSS样式的工具，可以动态修改页面样式，实现动态布局。 - **Ajax（Asynchronous JavaScript and XML）**：支持异步数据交换，与服务器进行无刷新通信。 - **IO（Input/...

Magicbox
Global site tag (gtag.js) - Google Analytics