注册 | 登录 忘记密码？ 51cto首页 | 博客 | 论坛 | 招聘
热点文章 《掌控Windows SErver 2..
　帮助
文章文章列表>>
2010-01-06 13:51:15



2009-12-24 21:39:58



2009-12-24 11:13:54



2009-12-18 18:36:56



2009-12-18 12:47:51



2009-12-17 22:28:20



2009-12-17 21:12:20



2009-12-17 12:19:55



2009-12-17 11:28:07



2009-12-16 13:24:52



2009-12-08 22:32:26



2009-12-01 22:53:00



2009-11-04 18:30:32
这是界面图：



这个可以在design界面里拖动组件，修改组件属性值来实现。

然后是计算器的算法（仿照win下的计算器算法）：

问题描述：
输入一个数，然后按某个运算符，再输入另一个数，按等号即可得出结果。只按照输入顺序计算结果，而非按照运算符优先级来得出结果，即，如果按顺序输入2+8*3＝会得到30，而非26.

算法描述：
定义三个全局变量，分别是first（Number）， second（Number）， symbol（String）

first代表二目运算中第一个数，second代表第二个数，symbol代表运算符（+-*/）

（初始化之后flex对Number型默认值为NaN, String型默认值为null）

1.二目运算第一个数的输入数字阶段，对于小数点（.）按钮，如果输入一次之后enable属性设为false.
2.输入运算符（+-*/），将第一步输入的数字保存到first变量中，并将此运算符保存到symbol中，小数点（.）按钮enable属性为true.
3.二目运算第二个数字输入阶段，对于小数点（.）按钮，如果输入一次之后enable属性设为false.
4.
     4.1如果输入等号（＝），将前面存储的first， second， symbol按照相应规则运算得出结果，这个结果存储到first中，second和symbol分别设为NaN和null。小数点按钮enable属性为true。然后可以转入步骤2.
     4.2 如果输入运算符（＋－× /） ，将first， second， symbol按照规则运算出结果，结果保存到first中，second设为NaN， 将输入运算符保存到symbol中，小数点按钮enable属性为true。然后可以转入步骤3。


下面是整个计算器的代码及注释：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">

<mx:Script>
    <![CDATA[
 
        
        public var first:Number; //定义二目运算第一个数的存储变量
        public var second:Number;//第二个数的存储变量
        public var symbol:String;  //运算符 
        public var display_content:String='0' //input_Text显示内容

        private function addText(str:String):void//输入数字时，显示内容
        {
            display_content+=str; //每点一个数字，显示内容增加进去
              var myFloat:Number = parseFloat(display_content);
//将显示内容转换为Number型
              if(str!='.')
                  {
                      txt_display.text = myFloat.toString();
//将刚转换的Number型转换为String型，显示到input_Text中   
                  }
              else//处理小数点情况
                  {
                      txt_display.text = myFloat.toString()+".";
                      bt_dot.enabled=false;
                  }
                  
        }
//C按钮的功能
        private function c():void
        {
            display_content ='0';
            txt_display.text='0';
            first=NaN;
            second=NaN;
            symbol=null;
            bt_dot.enabled=true;
        }
//CE按钮功能
        private function ce():void
        {
            display_content='0';
            txt_display.text='0';
            second=NaN;
            bt_dot.enabled=true;
        }
//运算功能
        private function cal():void
        {
            second=parseFloat(txt_display.text);
            switch (symbol)
                    {
                        case "+":
                        first=first+second;
                        break;
                        
                        case "-":
                        first=first-second;
                        break;
                        
                        case "*":
                        first=first*second;
                        break;
                        
                        case "/":
                        
                            first=first/second;
                        break;
                        
                        default:
                        // do nothing
                    }
                txt_display.text=first.toString();
                display_content='0';
                symbol=null;
                second=NaN;
                bt_dot.enabled=true;
        }
//输入运算符（＋－× /）符号处理
        private function process_symbol(str:String):void
        {
            if(first.toString()=='NaN')
                {
                    first=parseFloat(txt_display.text);
                    if(str!="=")
                        { symbol=str; }
                    display_content='0';
                    bt_dot.enabled=true;
                }
            else if(second.toString()=='NaN' )
            {
                symbol=str;
            }
            else
            {
                    cal();
            }
        }
        
//输入等号时       
        private function equals():void
        {
            if(first.toString()=='NaN')
            {
                first=parseFloat(txt_display.text);
                display_content='0';
                bt_dot.enabled=true;
            }
            
            else
            {
                cal();
                
            }
        }
        
    ]]>
</mx:Script>
//组件代码：
    <mx:Canvas width="309" height="354">
        <mx:Panel y="10" width="273.5" height="334" layout="absolute" title="calculator" horizontalAlign="center" verticalAlign="middle" backgroundColor="#AFB6B9" horizontalCenter="-2">
            <mx:TextInput x="10.75" y="29" width="231" id="txt_display" text="0" textAlign="right"/>
            <mx:Button x="13" y="98" label="7" width="36" height="31" color="#0B0C0F" id="bt_7" click="addText('7')"/>
            <mx:Button x="57" y="98" label="8" width="36" height="31" id="bt_8" click="addText('8')"/>
            <mx:Button x="101" y="98" label="9" width="36" height="31" id="bt_9" click="addText('9')"/>
            <mx:Button x="145" y="98" label="+" width="36" height="31" color="#0DC5ED" id="bt_plus" click="process_symbol('+')"/>
            <mx:Button x="145" y="137" label="-" width="36" height="31" color="#089D5C" id="bt_minus" click="process_symbol('-')"/>
            <mx:Button x="145" y="176" label="*" width="36" height="31" color="#F018CA" id="bt_multiply" click="process_symbol('*')"/>
            <mx:Button x="145" y="215" label="/" width="36" height="31" color="#67B0BF" id="bt_divide" click="process_symbol('/')"/>
            <mx:Button x="180" y="59" label="C" width="58" height="31" color="#FB2407" id="bt_c" click="c()"/>
            <mx:Button x="189" y="98" label="=" width="49" height="148" id="bt_equal" click="equals()"/>
            <mx:Button x="103.75" y="59" label="CE" width="58" height="31" id="bt_ce" click="ce()"/>
            <mx:Button x="13" y="137" label="4" width="36" height="31" id="bt_4" click="addText('4')"/>
            <mx:Button x="57" y="137" label="5" width="36" height="31" id="bt_5" click="addText('5')"/>
            <mx:Button x="101" y="137" label="6" width="36" height="31" id="bt_6" click="addText('6')"/>
            <mx:Button x="13" y="176" label="1" width="36" height="31" id="bt_1" click="addText('1')"/>
            <mx:Button x="57" y="176" label="2" width="36" height="31" id="bt_2" click="addText('2')"/>
            <mx:Button x="101" y="176" label="3" width="36" height="31" id="bt_3" click="addText('3')"/>
            <mx:Button x="101" y="215" label="." width="36" height="31" id="bt_dot" click="addText('.')"/>
            <mx:Button x="13" y="215" label="0" width="80" height="31" id="bt_0" click="addText('0')"/>
        </mx:Panel>
    </mx:Canvas>
    
</mx:Application>









[/img]..



2009-10-16 12:48:42



2009-10-13 18:35:03



2009-10-11 19:38:09



2009-10-03 00:18:36



2009-10-02 10:11:54



2009-07-01 17:41:42



2009-06-25 09:53:11



2009-06-22 14:50:07



2009-06-03 21:30:36



2009-03-30 12:29:21



2009-03-25 15:43:05
先放个效果图上来看看:

下面来说明如何用rails+jquery实现这样的注册表单的ajax数据验证:

基本的注册,登录模块使用restful_authentication插件生成.

在注册页面,也就是sessions/new.html.erb中

<%content_for "head" do %>
  <%= stylesheet_link_tag "users/new"  %>

  <%= javascript_include_tag "jquery/users/register","jquery/users/jquery.validate" %>
  <script type="text/javascript">
      jQuery.validator.setDefaults({
          debug: true,
          success: "valid"
      });;
  </script>



<%end%>


<fieldset id="ologin"><legend>Register</legend>
  <div class="box">
    <%= error_messages_for :user %>
    <% form_for :user, :url => users_path, :html=>{:id=>"signupform"} do |f| -%>
      <table>
        <tr>
          
            <td><label for="login"><span>Login</span></label></td>
            <td><%= f.text_field :login %></td>
            <td class="status"></td>
        </tr>
        <tr>
          <td><label for="email"><span>Email</span></label></td>
          <td><%= f.text_field :email %></td>
          <td class="status"></td>
          
        </tr>
        <tr>
          <td><label for="password"><span>Password</span></label></td>
          <td><%= f.password_field :password %></td>
          <td class="status"></td>
        </tr>
        <tr>
          <td><label for="password_confirmation"><span>Confirm Password</span></label></td>
          <td><%= f.password_field :password_confirmation %></td>
          <td class="status"></td>
        </tr>
      </table>
      <div class="spacer"><%= submit_tag 'signup', :class=>"butt"%></div>
    
    <% end -%>
            
  </div>
</fieldset>



里面为了排版的整齐,我对表单用了table格式.

这里用到了三个js文件:jquery.js, jquery.validate.js, register.js

jquery.js和jquery.validate.js可以到jquery网站上下载.

register.js是自定义的jquery代码:

register.js:
$(document).ready(function(){
 
    $("#signupform").validate({
        rules: {
            "user[login]": {
                required: true,
                minlength:5,
                remote: {
                   data: {
                        user_name: function(){
                            return $('#user_login').val();
                        }
                    },
                    url: "users/",
                    type: "get"
                   
                }

            },
           
            "user[password]":{
                required: true,
                minlength:6
            },
           
            "user[password_confirmation]": {
                required: true,
                minlength: 5,
                equalTo: "#user_password"

            },
           
            "user[email]":{
                required: true,
                email: true
            }
        },
        messages: {
                     "user[login]": {
                required: "Enter a username",
                minlength: jQuery.format("Enter at least {0} characters"),
                remote: "Already in use"
            },
           
            "user[password]":{
               required: "Provide a password",

                minlength: jQuery.format("Enter at least {0} characters")

            },
           
            "user[password_confirm]": {
                required: "Repeat your password",
                minlength: jQuery.format("Enter at least {0} characters"),
                equalTo: "Enter the same password as above"
            },

           
            "user[email]":{
              required: "Please enter a valid email address",
              minlength: "Please enter a valid email address"

            }
        },
        errorPlacement: function(error, element) {
           
                error.appendTo( element.parent().next() );

        },
        // specifying a submitHandler prevents the default submit, good for the demo
        submitHandler: function(form) {
            alert("submitted!");
                        form.submit();
        },
        // set this class to error-labels to indicate valid fields
        success: function(label) {
            // set &nbsp; as text for IE
            label.html("&nbsp;").addClass("checked");
        }
       
    });
   
           
});

这是jquery.validate这个插件的方法.

这段代码可以分成这么几个部分

$("#signupform").validate({

        rules: {

            //对需要验证数据添加各种规则

        },

messages: {

           //对未通过验证的数据对应显示的消息

        },success: function(label) {

            //数据成功通过验证之后,焦点转移后的动作

        },errorPlacement: function(error, element) {

           

           //设置消息显示的位置



        },
submitHandler: function(form) {

            //当表单符合所有验证规则之后,点击"submit"之后的动作

        },});

下面对这几个部分分别来进行说明:
rules: {

            //对需要验证数据添加各种规则

        },
jquery.validate提供了很多验证的方法,具体内容可以参考API

比较常用的就是required()和remote了,required()方法就跟rails model里的validates_presence_of方法一样,验证数据非空.

这里拿用户名验证来说明它的用法:
"user[login]": { 
                required: true,
                minlength:5,
                remote: {
                   data: {
                        user_name: function(){
                            return $('#user_login').val();
                        }
                    },
                    url: "users/",
                    type: "get"
                   
                }

            },
下面这个是rails呈递的html代码:
<input id="user_login" name="user[login]" size="30" type="text" />


注意,在写数据项验证规则时,要使用input标签的name属性,譬如这里
"user[login]"
remote是向server端发送ajax请求,要求从server端收到一个json数据
数据格式是key,value.譬如对于一个用户名为abc的数据,将它发到server端之后,
如果abc为合法数据,那么server端应该返回一个"abc",true这样格式的数据.反之,如果不合法,就返回
"abc",false.

那么remote内部,有三个参数,url指明server的地址, type指明http动作,data是传递的数据内容
data: {

              user_name: function(){

              return $('#user_login').val();

           }

       },

       url: "users/",

       type: "get"

}

这么写,我就将dom id为user_login的输入框内的数据传递给了users控制器,
方法为get,很明显在RESTful的架构中,这是传递到了users/index方法
(不过不知道为什么会传递两个相同的值user[login]="val"和user_name="val")

那么在index方法中:

def index
@user=User.find_by_login(params[:user_name])
if @user
json="\"#{params[:user_name]}\",false"
else
json="\"#{params[:user_name]}\",true"
end

respond_to do |format|
format.js {render :text=>json}
end
end
(这段代码写的比较恶心..不过凑乎能用)


这样就完成了这个数据项验证的ajax请求..其他的数据项基本上都是js式的验证了.
比较简单就不再详述了.






[/img]..



2009-03-24 11:47:45



 <<   1   2   3   4   5   >>   页数 ( 1/13 )