ionic常用插件——日期选择2

效果图如下:
222

需要用到的JS文件:onezone-datepicker

1、在index引入

<script src="lib/util/onezone-datepicker.js"></script>

2、在app.js中注入

onezone-datepicker

3、HTML代码

<div class="padding">
  <onezone-datepicker datepicker-object="onezoneDatepicker">
    <button class="button button-block button-outline button-positive show-onezone-datepicker">
      {{onezoneDatepicker.date | date:'dd MMMM yyyy'}}
    </button>
  </onezone-datepicker>
</div>
<div class="padding">
  <button class="button button-block button-outline button-positive" ng-click="showDatepicker()">
    Show datepicker
  </button>
</div>

4、control中js代码

//日历测试
var currentDate = new Date();
var date = new Date(currentDate.getFullYear(), currentDate.getMonth(), 23);
$scope.date = date;
$scope.myFunction = function (date) {
  alert(date);
};

$scope.onezoneDatepicker = {
  date: date,
  mondayFirst: false,
  months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  daysOfTheWeek: ["日", "一", "二", "三", "四", "五", "六"],
  startDate: new Date(1989, 1, 26),
  endDate: new Date(2024, 1, 26),
  disablePastDays: false,
  disableSwipe: false,
  disableWeekend: false,
  disableDates: [new Date(date.getFullYear(), date.getMonth(), 15), new Date(date.getFullYear(), date.getMonth(), 16), new Date(date.getFullYear(), date.getMonth(), 17)],
  showDatepicker: false,
  showTodayButton: true,
  calendarMode: false,
  hideCancelButton: false,
  hideSetButton: true,
  callback: $scope.myFunction
};

$scope.showDatepicker = function () {
  $scope.onezoneDatepicker.showDatepicker = true;
};
Posted in ionic(cordova)插件 | 4 Comments

ionic使用常见问题(九)——ionic IOS 侧边滑动 出现白屏的问题

ionic打包成IOS版本后会出现左侧边滑动白屏的现象,这个问题主要是由于cache导致的,由于IOS系统侧边滑动会调用返回前一个页面的功能,导致此问题的出现:

具体解决方案有以下两种方法:

1、配置ionicConfigProvider

$ionicConfigProvider.views.swipeBackEnabled(false)

2、设置ion-view

can-swipe-back=”false”

Posted in 常见问题 | Leave a comment

ionic实用功能(十)——使用JS调用angularJS绑定在$scope上的方法

有些情况下,需要在JS中调用绑定在$scope上的方法,可按如下方法调用:

<script>
    function ylshow(data) {
        var appElement = document.querySelector('[ng-controller=PayMoneyCtrl]');
        var $scope = angular.element(appElement).scope();
        $scope.lyReturn(data);
    };
</script>
Posted in 学习笔记, 实用功能 | Leave a comment

ionic常用插件——时间选择

原则来说这个也不属于插件范畴

效果如下:

sj

1、先导入ionic-timepicker.bundle.min这个JS文件。

2、在app.js文件中启动模块注入’ionic-timepicker’

3、页面代码:

<label class="item item-input">
    <span class="input-label">服务时间:</span>
    <ionic-timepicker input-obj="vipTimePickerObject" class="item-button-right">
        <button class="button button-clear button-positive ">
            <standard-time-no-meridian
                    etime='vipTimePickerObject.inputEpochTime'></standard-time-no-meridian>
        </button>
    </ionic-timepicker>
</label>

4、js代码

//时间插件
$scope.vipTimePickerObject = {
    inputEpochTime: ((new Date()).getHours() * 60 * 60),  //Optional
    step: 10,  //Optional
    format: 24,  //Optional
    titleLabel: '时间选择',  //Optional
    setLabel: '确定',  //Optional
    closeLabel: '取消',  //Optional
    setButtonType: 'button-positive',  //Optional
    closeButtonType: 'button-stable',  //Optional
    callback: function (val) {    //Mandatory
        timePickerCallback(val);
    }
};
function timePickerCallback(val) {
    if (typeof (val) === 'undefined') {
        console.log('Time not selected');
    } else {
        $scope.vipTimePickerObject.inputEpochTime = val;
        $scope.selectedTime = epochParser(val);
        console.log('选择的时间:' + epochParser(val));
    }
}

function prependZero(param) {
    if (String(param).length < 2) {
        return "0" + String(param);
    }
    return param;
}

function epochParser(val) {
    if (val === null) {
        return "00:00";
    } else {
        var hours = parseInt(val / 3600);
        var minutes = (val / 60) % 60;
        return (prependZero(hours) + ":" + prependZero(minutes));
    }
}
Posted in ionic(cordova)插件 | Leave a comment

ionic常用插件——日期选择

原则来说这个不属于插件范畴

效果图如下:

rq

1、先导入ionic-datepicker.bundle.min 这个JS文件。

2、在app.js文件中启动模块注入’ionic-datepicker’

3、页面代码:

<label class="item item-input">
    <span class="input-label">服务日期:</span>
    <ionic-datepicker input-obj="datepickerObject" class="item-button-right">
        <button class="button button-clear button-positive">
            {{datepickerObject.inputDate | date:'yyyy-MM-dd'}}
        </button>
    </ionic-datepicker>
</label>

4、js中的代码:

var weekDaysList = ["日", "一", "二", "三", "四", "五", "六"];
var monthList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var datePickerCallback = function (val) {
    if (typeof(val) === 'undefined') {
        console.log('No date selected');
    } else {
        console.log('Selected date is : ', val);
        $scope.datepickerObject.inputDate = val;
    }
};
$scope.datepickerObject = {
    titleLabel: '日期选择',  //Optional
    todayLabel: '今天',  //Optional
    closeLabel: '取消',  //Optional
    setLabel: '确定',  //Optional
    setButtonType: 'button-calm',  //Optional
    todayButtonType: 'button-calm',  //Optional
    closeButtonType: 'button-calm',  //Optional
    inputDate: new Date(),    //Optional
    mondayFirst: false,    //Optional
    //disabledDates: disabledDates, //Optional
    weekDaysList: weekDaysList,   //Optional
    monthList: monthList, //Optional
    templateType: 'modal', //Optional
    modalHeaderColor: 'bar-calm', //Optional
    modalFooterColor: 'bar-calm', //Optional
    from: new Date(),   //Optional
    to: new Date(2018, 12, 31), //Optional
    callback: function (val) {    //Mandatory
        datePickerCallback(val);
    }
};
Posted in ionic(cordova)插件 | 5 Comments

ionic使用常见问题(八)——PHP无法获取$http的post数据

一个简单的post请求

$http.post('do-submit.php',myData)

.success(function(){

    // some code

});

可是,用angularjs的$http提交的数据,在php服务器端却无法通过$_REQUEST/$_POST获取到

而是需要:

$params= json_decode(file_get_contents('php://input'),true);

解决方案是什么?

  1. 在服务器端(PHP)通过  $params = json_decode(file_get_contents(‘php://input’),true);   获取参数,小项目可以,大项目要一个一个改。(不推荐)
  2. 修改Angular的$httpProvider的默认处理:http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/  (为了便于以后的管理,这是最好的办法)
  3. 在$http 增加headers: {‘Content-Type’: ‘application/x-www-form-urlencoded’},
    transformRequest: function (obj) {
    var str = [];
    for (var p in obj) {
    str.push(encodeURIComponent(p) + “=” + encodeURIComponent(obj[p]));
    }
    return str.join(“&”);
    },
  4. 配置$httpProvider

var myApp = angular.module(‘app’,[]);

myApp.config(function($httpProvider){

$httpProvider.defaults.transformRequest = function(obj){

var str = [];

for(var p in obj){

str.push(encodeURIComponent(p) + “=” + encodeURIComponent(obj[p]));

}

return str.join(“&”);

}

$httpProvider.defaults.headers.post = {

‘Content-Type’: ‘application/x-www-form-urlencoded’

}

});

Posted in 常见问题 | 1 Comment

使用ionic开发(六)——使用$HTTP与后台交互

$HTTP是angularJS提供的服务

示例如下:

$http({
  method: 'post',//请求方式
  url: configData.url + "user.php?job=login",//请求地址
  params: {userid: userid, pwd: pwd},//请求参数,如果使用JSON格式的对象则可为 data: JSON.stringify(obj),
  timeout: 8000//请求等待时间
})
.success(function (data) {
  if (data.success == 1) {
    console.log("登录成功!");
    $rootScope.isLogin = true;
    $state.go('tab.user');
  } else {
    $ionicLoading.show({template: data.message, noBackdrop: true, duration: 1000});
  }
  console.log(data);
}).error(function (data, status, headers, config) {
  $ionicLoading.show({template: "登录失败,请稍后再试!", noBackdrop: true, duration: 1000});
});

使用PHP做后台的注意看下:
http://www.ionic.ren/2016/04/15/ionic%E4%BD%BF%E7%94%A8%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%85%AB-php%E6%97%A0%E6%B3%95%E8%8E%B7%E5%8F%96http%E7%9A%84post%E6%95%B0%E6%8D%AE/

Posted in 学习笔记 | Leave a comment

ionic之AngularJS(十二)——$ionicConfigProvider

$ionicConfigProvider的所有方法

  1. views.transition(transition/string)
    设置视图之间的过渡切换效果,默认是platform,可选值如下:
    platform: 根据平台动态选择相应的过渡效果,如果不是android或者ios,则默认是ios.
    ios: iOS过渡效果.
    android: Android过渡效果.
    none: 无过渡效果.
  2. views.maxCache(maxNumber/number)
    设置DOM中缓存的最大视图数目,如果超过限制,则移除最长时 间没有显示的视图。DOM缓存中的视图会缓存scope和当前状态以及滚动的位置。缓存中的scope并不在 $watch 监听生命周期中,当视图重新显示的时候,会重新进入 $watch。如果 maximum cache 设置为 0, 离开的view会被立即从dom中移除, 下次再显示这个view的时候, 就会重新编译, 附加到dom上, 重新绑定到对应的元素.相当于是禁用缓存.

3.views.forwardCache(value/boolean)
默认情况下,最近访问的视图会被缓存,当导航回到某个已经访问过 的视图的时候,相同实例的数据和dom元素会被重新引用到。然而,当回退到上一个视图的时候,刚刚前进的视图会被清除掉,如果你再次前进到这个视图,就会 创建一个新的DOM节点元素和控制器实例。基本上任何一个前进访问的视图每次都会被重置。这个设置选项中设置为true的时候就会缓存前进的视图,而且不 会每次加载的时候不会重置。

4.scrolling.jsScrolling(value/boolean)
配置是使用js的scroll滚动还是使用原生的滚动。如果设置为false和在每个 ion-content中设置overflow-scroll=’true’一样的效果。

5.backButton.icon(value/string)
设置返回按钮的图标。

6.backButton.text(value/string)
设置返回按钮的文字。

  1. backButton.previousTitleText(value/boolean)
    设置是否将上一个view视图的title设置成返回按钮的文字,iOS是默认的true。

7.form.checkbox(value/string)
设置Checkbox的样式. Android 默认是方形square,iOS 默认是圆形circle.

8.form.toggle(value/string)
设置Toggle元素的样式. Android默认是small,iOS默认是large.

9.spinner.icon(value/string)
设置默认的spinner图标。可以是: android, ios, ios-small, bubbles, circles, crescent, dots, lines, ripple, or spiral.

10.tabs.style(value/string)
设置tab的样式。 Android 默认是striped and iOS 默认是standard。可选的值是striped and standard.

11.tabs.position(value/string)
设置Tab的位置. Android tab的位置默认在顶部,iOS 默认是在底部.可选的值是 top 和 bottom.

12.templates.maxPrefetch(value/integer)
设置根据在$stateProvider.state中定义的模板url预取的模板数量。 如果设置为 0,当导航到新的页面时候用户必须等待加载到该页面. 默认是 30.

  1. navBar.alignTitle(value)
    设置导航条的标题的对其方式。 默认是center。可选值如下:

platform: 根据平台动态选择标题的样式,ios默认显示为center,android默认是left,如果不是ios或android,则默认显示center。
left: 导航条标题显示在左边
center: 导航条标题显示在中间
right: 导航条标题显示在右边

14.navBar.positionPrimaryButtons(value/string)
设置导航条中主导航按钮的对其位置,默认是 left.

platform: 根据平台动态选择标题的样式,ios默认显示为left,android默认是right,如果不是ios或android,则默认显示left。
left: Left align the primary navBar buttons in the navBar
right: Right align the primary navBar buttons in the navBar.

15.navBar.positionSecondaryButtons(value/string)
设置导航条中次导航按钮的对其位置,默认是 left.

platform: 根据平台动态选择标题的样式,ios默认显示为right,android默认是left,如果不是ios或android,则默认显示right。
left: Left align the primary navBar buttons in the navBar
right: Right align the primary navBar buttons in the navBar.

Posted in ionic之JS | Leave a comment

ionic实用功能(九)——使用原生滚动

在config里面加入这行:

    $ionicConfigProvider.scrolling.jsScrolling(false);

或者有部分需要jsScroll,部分需要原生滚动的,可以在ion-content 加入

<ion-content overflow-scroll=”true”>

Posted in 实用功能 | Leave a comment

ionic使用常见问题(七)——ionic splash screen白屏的解决方法

默认情况下,启动页是自动消失的,我们完成可以自己控制启动页何时消失,并加一些配置,让启动页消失的更平滑

首先,我们在config.xml里面加上这几项配置:

<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="10000"/>
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="1.0" />

见到配置里有相同的就删了原来的。

解释一下几个重要的参数,AutoHideSplashScreen设置为false,这样,启动页就不会自动消失;FadeSplashScreen是让启动页逐渐消失,下面的duration是时间。

下面,我们在app.js里面控制启动页消失

app.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        setTimeout(function () {
            navigator.splashscreen.hide();
        }, 100);
    });
    // your config
    ...
})

ionic run android/ios 运行一下,就可以看到效果了

Posted in 常见问题 | Leave a comment