`
高级java工程师
  • 浏览: 409205 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

xul+css+javascript

    博客分类:
  • xul
阅读更多
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://desktopxframe/content/bindings/workareaframe/workarea.css" type="text/css"?>
<?xml-stylesheet href="main.css" type="text/css"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml"
        title=""
        onload=""
        width="600px"
        height="600px">
   
  <script type="application/x-javascript" src="main.js"/>
  <!-- your xul code -->
<vbox id="zfx" >
<box id="xafx">
<groupbox id="an">
      <caption label="pack" />
      <box>
      <hbox>
      <textbox id="shur1"/>
        <menulist id="x1">
          <menupopup>     
            <menuitem label="+"/>
            <menuitem label="-"/>
            <menuitem label="*"/>
            <menuitem label="/"/>
          </menupopup>
        </menulist>
        <spacer flex="1"/>
      </hbox>
      <textbox id="shur2"/>=<textbox id="shur3"/>
      </box>
      <box>
      <button label="open" onclick='startNumberSum(this)'/>
      </box>
      <hbox pack="start" >
        <button label="1" onclick='startNumber(this)'/>
        <button label="2" onclick='startNumber(this)'/>
        <button label="3" onclick='startNumber(this)'/>
      </hbox>
      <hbox pack="center" >
        <button label="4" onclick='startNumber(this)'/>
        <button label="5" onclick='startNumber(this)'/>
        <button label="6" onclick='startNumber(this)'/>
      </hbox>
      <hbox  pack="end" >
        <button label="7" onclick='startNumber(this)'/>
        <button label="8" onclick='startNumber(this)'/>
        <button label="9" onclick='startNumber(this)'/>
      </hbox>
    </groupbox>
      </box>
</vbox>
</window>
------------------------------------------xul上面--------------------
function startNumber(thisButton){
   var value=document.getElementById("shur1").value;
   if( value==null||value==""){
     document.getElementById("shur1").value=thisButton.label;
   }else{
   document.getElementById("shur2").value=thisButton.label; 
   }
    //alert("thisButton");
}

function startNumberSum(){
   var valueA = document.getElementById('shur1').value;
   var valueOpr = document.getElementById('x1').label;
   var valueB = document.getElementById('shur2').value;
   if(valueA==null||valueA==""){
     valueA=0;
   }
if(valueB==null||valueB==""){
     valueB=0;
   }
   var result = 0;
   switch(valueOpr){
      case '+':
        result  = parseInt( valueA ) + parseInt( valueB );
      break;
      case '-':
       result  = parseInt( valueA ) - parseInt( valueB );
      break;
      case '*':
       result  = parseInt( valueA ) *parseInt( valueB );
      break;
      case '/':
     result  =  parseInt( valueA ) /parseInt( valueB );
      break; 
   }
   //最后把结果放进去
   document.getElementById('shur3').value = result;
}
----------------------------------------javascript--------------------
#zfx{
background:red;
min-width:600px;
min-height:600px;
}
#xafx{
background:green;
max-width:290px;
min-height:290px;
        
    position:fixed;
top:100px;
left:100px;
}
  #an{
   min-height:250px;
   min-width:200px;
}
#shur1{
min-height:20px;
max-width:60px;
}
#shur2{
min-height:20px;
max-width:60px;
}
#shur3{
min-height:20px;
max-width:60px;
}
-------------------------------------css--------------------------

最终实现计算器功能-------------------------------------------------------
分享到:
评论

相关推荐

    基于Firefox浏览器的全屏JavaScript+CSS设计源码扩展

    该项目是一款基于Firefox浏览器的全屏设计源码扩展,包含39个文件,涵盖21个PNG图片、4个JavaScript脚本、3个CSS样式表、3个XUL界面定义、2个ICO图标、2个DTD文档类型定义、1个manifest文件、1个JSON数据文件、1个...

    xul学习小程序

    XUL包含一系列的UI元素,如按钮、标签、列表框等,这些元素可以通过XML语法定义,并可以与JavaScript或CSS结合使用,以实现动态交互和样式控制。 在"Xul学习小程序"中,我们可以预见到以下核心知识点: 1. **XUL...

    XUL Programmer's Reference Manual

    3. **样式表(CSS)**:XUL界面的样式可以通过CSS(Cascading Style Sheets)进行定制,类似于HTML中的样式设计,可以调整字体、颜色、布局等。 4. **事件处理**:XUL支持JavaScript,允许通过绑定事件监听器来响应...

    用xul做的动态变化的 tree ,可以增,删,改

    XUL允许开发者使用XML来定义用户界面元素,并结合CSS来控制样式,JavaScript来处理交互逻辑。在本项目中,"用xul做的动态变化的 tree" 指的是一种可动态增删改的树形视图控件,这种控件在数据管理、文件系统浏览等...

    xul文档具体标签说明和例子

    XUL允许开发者通过XML描述界面布局和交互,结合CSS和JavaScript实现复杂的用户界面逻辑。在Firefox扩展开发中,XUL提供了一种标准化的方式来创建自定义的浏览器界面,使得开发者可以创建功能丰富的插件和工具。了解...

    xul小程序

    `defaults`目录下可能包含默认的样式表(CSS)、脚本(JavaScript)或者其他配置文件。这些文件定义了界面元素的初始状态和行为,比如颜色、字体、大小等,使得应用在启动时具有预设的外观和功能。 5. **chrome**...

    XUL最全帮助资料(part02)

    5. **Gecko渲染引擎**:Gecko是Mozilla浏览器背后的渲染引擎,负责解释和展示网页内容,包括HTML、CSS、JavaScript以及XUL。理解Gecko的工作原理有助于开发者创建更高效、更适应Gecko渲染方式的XUL界面。 6. **学习...

    javascript 开发

    Gecko是Mozilla浏览器所使用的布局引擎,它负责解析HTML、CSS以及JavaScript等Web标准,从而渲染页面。然而,在实际开发中,由于不同浏览器对Web标准的支持程度不一,导致了所谓的“PresentationalError”、...

    XUL中文帮助手册(DOC)

    它利用XML的结构化特性,结合CSS样式和JavaScript逻辑,构建出可定制的用户界面。通过学习和理解XUL,开发者可以创建自定义的浏览器扩展、独立应用或其他需要图形用户界面的项目。XUL的核心元素包括窗口、覆盖层、...

    XUL最全帮助资料(part01)

    XUL的核心概念在于利用XML语法来定义用户界面元素,如按钮、文本框、菜单等,并结合CSS进行样式设计,以及JavaScript进行交互逻辑处理。它允许开发者构建灵活且可扩展的应用程序,尤其适用于开发浏览器扩展和桌面...

    Mitschek_Bakkalaureatsarbeit_XPCOM_XUL-final-20100706

    它结合了HTML、CSS和JavaScript的优点,允许开发者使用XML来描述用户界面的结构,并使用CSS和JavaScript来控制样式和行为。XUL使得创建复杂的用户界面变得更加简单和统一。 5. **Java与XPCOM的整合**:论文中详细...

    mozilla 开发的ppt

    Mozilla扩展的开发涉及多种技术,包括CSS(级联样式表)用于美化界面,DOM(文档对象模型)用于实时更改XUL或编辑已加载的HTML,JavaScript作为Mozilla浏览器的主要编程语言,XPCOM(跨平台组件对象模型)用于组件间...

    jQuery Making JavaScript fun again

    - 尽管有人声称“只因为不得不才使用它”,但JavaScript作为最成功的脚本环境之一,几乎在所有浏览器、操作系统中都能找到它的身影,包括Windows、苹果的Dashboard、Mozilla的XUL、Adobe Flash的ActionScript以及...

    mozilla xbl基本用法示例

    XBL允许开发者通过XML来定义元素的外观和行为,结合了XHTML、CSS和JavaScript的功能,使得UI设计更加灵活且模块化。本示例将详细介绍如何使用XBL的基本用法。 首先,我们来看看`.xul`文件。XUL(XML User Interface...

    xulrunnersamples.rar_xulrunner

    JavaScript在XUL中扮演着重要角色,它是实现XUL界面动态性和功能的核心。你可以用JavaScript来响应用户的点击事件,或者更改界面状态。比如,你可以编写代码来控制按钮的可见性,或者在用户输入时验证表单数据。 ...

    java简易浏览器实现

    开发这样一个Java简易浏览器,需要对Java编程、Swing组件、XUL语法、网络编程以及可能的JavaScript和CSS有一定了解。通过不断调试和优化,可以逐步完善这个小型浏览器的性能和功能。这个项目对于学习和理解浏览器的...

    XULRunner-Examples-master.zip

    3. **JavaScript集成**:XUL与JavaScript紧密集成,用于实现用户交互逻辑和动态行为。在例子中,你会看到如何在XUL文档中嵌入JavaScript代码,以及如何使用DOM API操作界面元素。 4. **本地文件系统访问**:...

Global site tag (gtag.js) - Google Analytics