新风作浪 的BLOG
用户名：新风作浪
文章数：152
评论数：21
访问量：34837
注册日期：
阅读量：24883
阅读量：249358
阅读量：990659
阅读量：145434
51CTO推荐博文
& & & & 感觉代码写控件都一个理，先在ViewDidLoad中创建控件对象，然后初始化他的frame，在简单的描叙下他们的相关属性，最后在添加到视图上；这样控件就在视图上显示出来了；
& & & & UIDatePicker是一个用来选择日期或设置日期的控件，他不是UIPickerView子类，而是UIControl的子类，当然它所依赖的类也是与实践有关的类，NSDate；苹果公司已经为你实现好了这个控件是怎么实现的，它底层怎么实现你不必了解，你只需调用相关API就可以了；
& & & & 上一文中写了Navigation Bar & 和ToolBar的视图切换，这一节把Tab Bar视图切换也加上，切换两个不同格式下的日历表，还是先把效果图奉上吧(界面不咋好看):
650) this.width=650;" src="http://img.my.csdn.net/uploads//_6390.png" alt="">&&650) this.width=650;" src="http://img.my.csdn.net/uploads//_5031.png" alt="">650) this.width=650;" src="http://img.my.csdn.net/uploads//_1381.png" alt="">&&650) this.width=650;" src="http://img.my.csdn.net/uploads//_2217.png" alt="">
前面两个tab Bar item图标是系统的图标，后面一个是添加了一张背景图片，但是不知道问什么没有显示，切换界面的两个按钮还是前面两个Tab Bar Item；&
1.创建一个新工程叫DatePickerDemo； File-&New-&Project
-&single View Application -& next
然后在新建两个ViewController分别叫FirstViewController和SecondViewController
2.设置UITabBarDelegate协议，在ViewController中，
#import &UIKit/UIKit.h& #import &FirstViewController.h& #import &SecondViewController.h& @interface ViewController : UIViewController&UITabBarDelegate& {
UIDatePicker *dateP
UITabBar *tabB
FirstViewController *firstViewC
SecondViewController *secondViewCO }
3.在ViewController.m文件的ViewDidLoad中创建初始化界面
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. //
初始化Tab Bar
tabBar = [[UITabBar alloc] initWithFrame:CGRectMake(0, 416, 320, 44)];
//设置Tab Bar上的交互属性为YES
[tabBar setUserInteractionEnabled:YES]; //
[tabBar setDelegate:self]; //
设置TabBar的背景颜色
[tabBar setBackgroundColor:[UIColor purpleColor]]; //
设置tabBar的透明度
tabBar.alpha = 0.5f;
定义一个可变数组存放tab Bar Item
NSMutableArray *tabBarArray= [NSMutableArray array]; //
初始化一个Tab Bar Item
[tabBarArray addObject:[[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemFavorites
[tabBarArray addObject:[[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemHistory
UIImage *image = [UIImage imageNamed:@&test48.png&];
[tabBarArray addObject:[[UITabBarItem alloc]initWithTitle:@&测试& image:image tag:3]];
给Tab Bar 添加数组里的tab Bar Item
[tabBar setItems:tabBarArray animated:NO];
[self.view addSubview:tabBar];
datePicker宽度320像素和高度216像素，系统都设置好了，只需设置一下他的远点坐标，
datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
设置datePicker显示模式
[datePicker setDatePickerMode:UIDatePickerModeDateAndTime];
//DatePicker属于UIControl子类，可以触发事件，当滚动滑轮滑轮停下后就调用这个方法了
[datePicker addTarget:self action:@selector(dateChanged:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:datePicker];
[datePickersetDatePickerMode:UIDatePickerModeDateAndTime];设置日历显示模式，有四种模式
typedefenum { &
&UIDatePickerModeDateAndTime,
& & UIDatePickerModeTime, & & & & & &
& & UIDatePickerModeDate, & & & & & &
& & UIDatePickerModeCountDownTimer & &
} UIDatePickerM
650) this.width=650;" src="http://img.my.csdn.net/uploads//_5596.png" alt="">&&650) this.width=650;" src="http://img.my.csdn.net/uploads//_1440.png" alt="">650) this.width=650;" src="http://img.my.csdn.net/uploads//_2661.png" alt="">&&650) this.width=650;" src="http://img.my.csdn.net/uploads//_8335.png" alt="">
4. 设置日历控件的响应事件
-(void)dateChanged:(id)sender {
UIDatePicker *control = (UIDatePicker*) //
把当前控件设置的时间赋给date
NSDate *date = control. //
将NSDate格式装换成NSString类型
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc]init]; //
设置日历显示格式
[dateFormatter setDateFormat:@&yyyy-MM-dd HH:mm:ss&]; //
把日历时间传给字符串
NSString *strDate = [dateFormatter stringFromDate:date];
NSString *message = [[NSString alloc]initWithFormat:@&你选取的时间是：%@&,strDate]; //
弹出一个警告
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@&温馨提示&
message:message
delegate:self
cancelButtonTitle:@&OK&
otherButtonTitles: nil]; //
[alert show];
这里涉及到了一个NSDate向NSString的转换问题
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init]; [dateFormatter setDateFormat:@&yyyy-MM-dd HH:mm:ss&]; NSString *strDate = [dateFormatter stringFromDate:[NSDate date]]; NSLog(@&%@&, strDate);
NSString向NSDate如何转换
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init]; [dateFormatter setDateFormat:@&yyyy-MM-dd HH:mm:ss&]; NSDate *date = [dateFormatter dateFromString:@& 9:03:03&]; NSLog(@&%@&, date)
5.UITabBarDelegate的委托方法
-(void)tabBar:(UITabBar *)tabBarBar didSelectItem:(UITabBarItem *)item {
if (item.tag == 1) {
[tabBar setSelectedItem:[tabBar.items objectAtIndex:0]];
NSLog(@&----&%d&,item.tag);
if(firstViewController.view.superview==nil)
if (firstViewController.view==nil) {
FirstViewController *firstView = [[FirstViewController alloc]initWithNibName:@&FirstViewController& bundle:nil];
firstViewController=firstV
[secondViewCOntroller.view removeFromSuperview]; //
[self.view insertSubview:firstViewController.view atIndex:0];
[self.view
addSubview:firstViewController.view];
[secondViewCOntroller.view removeFromSuperview]; //
[self.view insertSubview:firstViewController.view atIndex:0];
[self.view
addSubview:firstViewController.view];
if (item.tag == 2) {
if (secondViewCOntroller.view.superview==nil) {
if (secondViewCOntroller.view == nil)
SecondViewController *secondView = [[SecondViewController alloc] initWithNibName:@&SecondViewController& bundle:nil];
secondViewCOntroller=secondV
[firstViewController.view removeFromSuperview];
[self.view insertSubview:secondViewCOntroller.view atIndex:0];
[firstViewController.view removeFromSuperview];
[self.view insertSubview:secondViewCOntroller.view atIndex:0];
NSLog(@&----&%d&,item.tag); }& & & & &在方法中我们看到有Item.tag是在ViewDidLoad给Tab Bar Item设定的tag，相当于给这个按钮编了一个号码，这个号码代表这个按钮;再点击不同按钮的时候切换不同视图，这个方法和上一博客所用的视图切换方法思想一样，只是没有添加动画效果，首先判断第一个视图父视图是否为空，在判断在试图是否为空，为空则创新创建一个，初始化并把管理权交给该视图控制器，移去原来的视图，把现在视图切换过去；
& & & & & & [self.view insertSubview:firstViewController.view atIndex:0];
& & & & & & [self.view&addSubview:firstViewController.view];
在方法中我把第一个给注释了，第一个是插入主视图后面，出现的情况就是主视图上的DatePicker把插入给覆盖了，显示不出来，第二种是之间把切换的视图放在主视图上面，但是这个问题出来了，他把主视图下面的Tab Bar给覆盖了，于是我把需要切换的视图的frame高度设置成了460-44高度，在FirstViewController的ViewDidLoad方法中
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
self.view.frame = CGRectMake(0, 0, 320, 416);
self.view.backgroundColor = [UIColor blueColor];
UIDatePicker *datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
设置datePicker显示模式
[datePicker setDatePickerMode:UIDatePickerModeTime];
[self.view addSubview:datePicker]; }
在item.tag=2中，并未这样做，只是想做一下对比，在我们前面看见的这个界面的截图并没有完全显示SecondViewController视图上的内容，他被ViewController上的视图覆盖了，在SeconViewController上的ViewDidLoad初始化是这样的
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
self.view.backgroundColor = [UIColor greenColor];
UIDatePicker *datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
设置datePicker显示模式
[datePicker setDatePickerMode:UIDatePickerModeDate];
[self.view addSubview:datePicker]; }
该视图应该显示的是日历模式截图的第三种，只有Date；
附上源代码:
本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&当前访客身份：游客 [
当前位置：
发布于 日 22时,
由于项目中经常会有焦点图切换或是选项卡切换的功能，所以就根据项目需求把它做成了一个Jquery插件。我把它叫做ySwitch。详细用法可以下载下面demo&修改：1、小幅调整代码2、实现循环滚动
代码片段(3)
Jquery插件ySwitch-demo.rar&~&4KB&&&&
2.&[代码][JavaScript]代码&&&&
* ySwitch v1.0.1
* author: yongbo_
//$.fn.extend(arg1, arg2) 作用就是将arg2对象的属性和方法添加到arg1中。
$.fn.extend({
ySwitch: function (settings) {
var _options = $.fn.extend({ //配置
duration: 200, //切换的速度（毫秒）
animate: false, //是否动画切换
hasprevandnext: false, //是否显示向前向后箭头
defaulttarget: 0, //默认选中页面
triggerevent: 'click', //默认触发事件是click
direction: 'horizontal', //默认水平，垂直：vertical
autoscroll: false, //是否自动切换
autoscrollduration: 5000, //自动切换的时间间隔
movestop: null //切换结束时的回调函数
}, settings);
var target = $(this);
var direction = _options.
var ySwitch_bd = target.find('.ySwitch-bd'),
holderSize = direction == 'horizontal' ? ySwitch_bd.width() : direction == 'vertical' ? ySwitch_bd.height() :
var ySwitch_tab = target.find('.ySwitch-tab');
var ySwitch_content_holder = target.find('.ySwitch-content-holder');
var ySwitch_content = target.find('.ySwitch-content');
var first_content = ySwitch_content.eq(0), last_content = ySwitch_content.eq(len - 1);
var prevbtn = target.find('.prev'), nextbtn = target.find('.next'); //向前向后按钮
var curIndex = 0, len = ySwitch_content.
var isMoving = false, iT
//if (!holderSize) { console.log('direction设置错误.'); }
function initPrevAndNextBtn() {
//是否显示前进后退按钮
if (_options.hasprevandnext) {
prevbtn.show();
nextbtn.show();
prevbtn.hide();
nextbtn.hide();
//切换函数
function switchTo(targetIndex) {
if (isMoving) { }
//console.log(targetIndex);
curIndex = targetIndex & 0 ? len - 1 : targetIndex &= len ? 0 : targetI
if (ySwitch_tab.length != 0) {
ySwitch_tab.eq(curIndex).addClass('selected').siblings().removeClass('selected');
//滚动到第一页时隐藏向前按钮
if (_options.hasprevandnext && curIndex != 0) {
prevbtn.show();
prevbtn.hide();
//滚动到最后一页时隐藏向后按钮
if (_options.hasprevandnext && curIndex != len - 1) {
nextbtn.show();
nextbtn.hide();
//有动画效果
if (_options.animate) {
var isFirst = false, isLast = //是否到达最前或是最后
if(targetIndex & len - 1){
ySwitch_content_holder.append(ySwitch_content.eq(0).clone());
} else if(targetIndex & 0) {
var reset_css = direction == 'horizontal' ? {'margin-left' : -holderSize + 'px'} : {'margin-top' : -holderSize + 'px'};
ySwitch_content_holder.prepend(ySwitch_content.eq(len - 1).clone()).css(reset_css);
targetIndex = 0;
//设置动画
anim = direction == 'horizontal' ? {
'margin-left': -(targetIndex * holderSize) + 'px'
'margin-top': -(targetIndex * holderSize) + 'px'
isMoving =
//开始切换
ySwitch_content_holder.animate(anim, _options.duration, function () {
isMoving =
if(isLast){
var reset_css = direction == 'horizontal' ? { 'margin-left' : '0'} : {'margin-top' : '0'};
ySwitch_content_holder.find('.ySwitch-content:last').remove();
ySwitch_content_holder.css(reset_css);
if(isFirst){
var reset_css = direction == 'horizontal' ? {'margin-left' : -(curIndex * holderSize) + 'px'} : {'margin-top' : -(curIndex * holderSize) + 'px'};
ySwitch_content_holder.find('.ySwitch-content:first').remove();
ySwitch_content_holder.css(reset_css);
if (_options.movestop) {
_options.movestop(curIndex);
} else { //没有动画效果
ySwitch_content.hide().eq(curIndex).show();
target.delegate('.ySwitch-tab', _options.triggerevent, function () {
var tab = $(this);
var index = tab.index();
if (tab.hasClass('selected')) { }
switchTo(index);
}).delegate('.prev', 'click', function () {
switchTo(curIndex - 1);
}).delegate('.next', 'click', function () {
switchTo(curIndex + 1);
initPrevAndNextBtn(); //初始化按钮
switchTo(_options.defaulttarget); //初始化到默认显示位置
if (_options.autoscroll) {
iTimer = setInterval(function () {
switchTo(curIndex + 1);
}, _options.autoscrollduration);
target.delegate('.ySwitch-tab', 'mouseenter', function () {
clearInterval(iTimer);
}).delegate('.ySwitch-tab', 'mouseleave', function () {
iTimer = setInterval(function () {
switchTo(curIndex + 1);
}, _options.autoscrollduration);
3.&[图片] QQ截图26.jpg&&&&
开源中国-程序员在线工具：
相关的代码(1166)
11回/124837阅
[JavaScript]
83回/102747阅
[JavaScript]
20回/66682阅
[JavaScript]
49回/54944阅
48回/47317阅
[JavaScript]
17回/42685阅
[JavaScript]
2回/41198阅
[JavaScript]
13回/40078阅
[JavaScript]
10回/35843阅
[JavaScript]
11回/34184阅
[JavaScript]
开源从代码分享开始
bobo_ll的其它代码业务系统中，很多录入人员习惯于用Enter键来代替Tab键切换控件焦点（虽然我个人并不觉得这样录入速度会变得有多高效，呵呵），有需求了，自然就得想办法满足。
思路：为了更灵活的控件焦点顺序，我决定用TabIndex来做文章，每个输入控件按下回车时，找到下一个比当前控件TabIndex更大且最接近的控件，然后focus().
XAML界面部分：
&UserControl x:Class="tab_key_test.MainPage"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:d="/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"&
&StackPanel x:Name="LayoutRoot" Background="White"&
&TextBox Margin="5" TabIndex="0"&&/TextBox&
&CheckBox Margin="5" TabIndex="1" Content="CheckBox Test"&&/CheckBox&
&TextBox Margin="5" TabIndex="2"&&/TextBox&
&ComboBox Margin="5" TabIndex="3"&
&ComboBox.Items&
&ComboBoxItem Content="ComboBox Test 11"&&/ComboBoxItem&
&ComboBoxItem Content="ComboBox Test 22"&&/ComboBoxItem&
&/ComboBox.Items&
&/ComboBox&
&TextBox Margin="5" TabIndex="4"&&/TextBox&
&RadioButton Margin="5" Content="Radio Test" TabIndex="5"&&/RadioButton&
&TextBox Margin="5" TabIndex="6"&&/TextBox&
&/StackPanel&
&/UserControl&
CS后端代码：
using System.Collections.G
using System.L
using System.N
using System.W
using System.Windows.C
using System.Windows.D
using System.Windows.I
using System.Windows.M
using System.Windows.Media.A
using System.Windows.S
namespace tab_key_test
public partial class MainPage : UserControl
List&Control& allInputControls = new List&Control&();
public MainPage()
InitializeComponent();
this.Loaded += MainPage_L
void MainPage_Loaded(object sender, RoutedEventArgs e)
//把界面上的TextBox,RadioButton,ComboBox,CheckBox都加入列表
//注：一般业务录入界面上只有这4种类型的输入控件，如果还有其实类型，可自行扩展
allInputControls.AddRange(FindChildren&TextBox&(LayoutRoot).Cast&Control&());
allInputControls.AddRange(FindChildren&RadioButton&(LayoutRoot).Cast&Control&());
allInputControls.AddRange(FindChildren&ComboBox&(LayoutRoot).Cast&Control&());
allInputControls.AddRange(FindChildren&CheckBox&(LayoutRoot).Cast&Control&());
//按TabIndex排序
allInputControls = allInputControls.OrderBy(c =& c.TabIndex).ToList();
foreach (Control c in allInputControls)
c.KeyDown += EnterKeyDownToT
if (c is ComboBox)
//ComboBox要特殊处理
(c as ComboBox).DropDownClosed += DropDownClosedToN
void EnterKeyDownToTab(object sender, KeyEventArgs e)
if (e.Key == Key.Enter)
GoToNextControl(sender);
void GoToNextControl(object sender)
var self = sender as C
if (self == null)
var selfTabIndex = self.TabI
//找出下一个控件
var nextControl = allInputControls.FirstOrDefault(c =& c.TabIndex & selfTabIndex);
if (nextControl != null)
nextControl.Focus();
allInputControls[0].Focus();//最后一个控件时，再跳到第一个(可选处理)
/// &summary&
/// 查找所有子元素(递归)
/// &/summary&
/// &typeparam name="T"&&/typeparam&
/// &param name="parent"&&/param&
/// &returns&&/returns&
public static IEnumerable&T& FindChildren&T&(DependencyObject parent) where T : class
int count = VisualTreeHelper.GetChildrenCount(parent);
if (count & 0)
for (int i = 0; i & i++)
DependencyObject child = VisualTreeHelper.GetChild(parent, i);
var t = child as T;
if (t != null)
IEnumerable&T& children = FindChildren&T&(child);
foreach (T item in children)
private void DropDownClosedToNext(object sender, EventArgs e)
GoToNextControl(sender);
　这个思路还可以应用到html网页上：
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&
&title&Enter Key Replace Tab&/title&
&script type="text/javascript" src="/js/jquery/1.6/jquery.min.js"&&/script&
&style type="text/css"&
input,select,textarea{
padding:0;
&script type="text/javascript"&
$(document).ready(function(){
var inputs = $("input,textarea,select").sort(function(a,b){return a.tabIndex&b.tabIndex?1:-1});
inputs.each(function(){
$(this).keypress(function(e){
if (e.keyCode==13||e.which==13){
//修正textarea的多余回车问题(可选)
//if ($(this).get(0).tagName == "TEXTAREA"){
// $(this).val($.trim($(this).val()));
var selfTabIndex = parseInt($(this).attr("tabIndex"),10);
var nextInput =
//找出下一个元素
for(var i=0; i&inputs. i++){
if (inputs[i].tabIndex & selfTabIndex){
nextInput = inputs[i];
if (nextInput != null){
nextInput.focus();
inputs[0].focus();
}).focus(function(){
$(this).select();
&input type="text" tabindex="0" value="000"/&
&input type="text" tabindex="1" value="111"/&
&textarea tabindex="2"&222&/textarea&
&input type="radio" tabindex="3" id="r3" style="width:20display:inline"/&&label for="r3"&333&/label&
&input type="text" tabindex="4" value="444"/&
&input type="checkbox" tabindex="5" id="c5" style="width:20display:inline"/&&label for="c5"&555&/label&
&input type="text" tabindex="6" value="666"/&
&select tabindex="7"&
&option&777&/option&
&option&xxx&/option&
&select size="2" tabindex="8"&
&option&888&/option&
&option&yyy&/option&
阅读(...) 评论()