JavaScript uses Deviceone to develop actual combat (iv) Imitation cool video application _javascript techniques

We do not have to develop before the first need to consider the system's differences, such as the iOS phone has no back button, so in the development must consider the two-level decryption need to have a rollback key, or iOS mobile phone will fall into this page back.

Android system has a fallback button, in response to this situation requires the user in 3 seconds to press the back button two times before exiting the system, in order to prevent users from accidentally press the rollback key, the specific code to achieve the following:

[Mw_shl_code=javascript,true]page.on ("Back", function () {
 if (canback) {
 global.exit ();
 } else {
 Nf.toast ("Click again to exit Youku");
 Canback = true;
 Delay3.start ();
 }
);
var delay3 = mm ("Do_timer");
Delay3.delay = 3000;
Delay3.interval = 1000;
Delay3.on ("tick", function () {
 this.stop ();
 Canback = false;
}); [/mw_shl_code]

Imitation cool video to achieve the four main interface, the page can be sliding between the left and right pages to switch pages, but also by clicking the bottom button to achieve the switch between the page, and the bottom button color will change with the page switch. This feature is implemented through the Slideview component, and the effect picture is as follows:

Bottom change:

The code implementation is as follows:

[Mw_shl_code=javascript,true] Function Subchange (num,button,imgs,lbs) {var strings = ["Download", "channel", "subscribe", "my"];
    Button.text = Strings[num]; var url = ["Source://image/main/shouye", "Source://image/main/pindao", "Source://image/main
    /dingyue "," Source://image/main/wode "];
      for (var i = 0; i < 4; i++) {imgs.source = URL;
  Lbs.fontcolor = "222222FF";
  } Imgs[num].source + = "B";
  Lbs[num].fontcolor = "0080FFFF";
  for (var i = 0; i < 4; i++) {Imgs.source = = ". png";
    } img.visible = false;
Bt.visible = false;
  function Indexchange (NUM,SV,BUTTON,IMGS,LBS,IMG,BT) {Sv.set ({index:num});
  Sv.refreshitems ();
Subchange (num,button,imgs,lbs); } do_button.on ("Touch", function (data, E) {if (Do_button.text = = "Download") {App.openpage ("Source://view/downloa
    D.ui "," ");
}
});
Click on the bottom button to implement the main interface as well as the bottom picture color switch var action_imgs = [UI ("Img_0"), UI ("Img_1"), UI ("Img_2"), UI ("Img_3")]; var action_lbs = [UI ("Lb_0"), UI ("Lb_1"), UI ("Lb_2"), UI ("Lb_3"),];
Do_slideview_1.binditems (Listdata);
Listdata.adddata ([{template:0}, {template:1}, {template:2}, {template:3}]);
Do_slideview_1.refreshitems ({});
var Shouye = UI ("Shouye"); Shouye.on ("Touch", function (data, E) {Indexchange (0,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_
Button_3);
});
var Pindao = UI ("Pindao"); Pindao.on ("Touch", function (data, E) {Indexchange (1,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_
Button_3);
});
var Dingyue = UI ("Dingyue"); Dingyue.on ("Touch", function (data, E) {Indexchange (2,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do
_button_3);
});
var Wode = UI ("Wode"); Wode.on ("Touch", function (data, E) {Indexchange (3,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_
Button_3);
}); The sliding main interface implements the toggle Do_slideview_1.on of the bottom image ("indexchanged", function (data, E) {Subchange (data,do_button,action_imgs,action_
lbs);
}); [/mw_shl_code]

The switch between the home poster and the page switch is similar, but the poster switch also realized the function of automatic timing switching, switching every three seconds, time control by Do_timer to achieve, in the use of this component, the time period can not be 100, otherwise the iOS system will have incompatible problems, pictures and code as follows:

Image:

Code:

[Mw_shl_code=javascript,true]
var ind = 0;
Timer.delay = 0;
Timer.interval = 1000;
Timer.start ({});
Timer.on ("tick", function () {
    duration++;
  if (DURATION = = 3) {
      ind = (ind+1)%4
      movieview.set ({index:ind});
      Movieview.refreshitems ();
      DURATION = 0;
  }
}); [/mw_shl_code]

Click on the main screen in the upper left corner of the download button, enter the download interface, click Download after the application will download another picture from the Internet poster to replace the original poster, download progress through the progress bar to show that the download function through the HTTP component of the download method to achieve progress bar through the Do_ ProgressBar component Implementation, its effect diagram and code implementation are as follows:

Effect:

Code:

[Mw_shl_code=javascript,true]
var http = mm ("do_http");
Http.timeout = 30000;
Http.contenttype = "Application/json";
Http.url = "http://h.hiphotos.baidu.com/baike/c0%3Dbaike60%2C5%2C5%2C60%2C20%3Bt%3Dgif/sign= 88e9903f8735e5dd8421ad8d17afcc8a/f9198618367adab48dc66b2e89d4b31c8701e44d.jpg ";
Http.on ("Success", function (data) {
    do_imageview_1.source= "data://xiazai.png";
    Do_button_2.text = "Download successful";
};
Http.on ("Progress", function (data) {
  do_progressbar_0.progress = data.currentsize * 100/data.totalsize;
  Lb_progress.text = data.currentsize * 100/data.totalsize + "%";
});
Do_button_2.on ("Touch", function (data, e) {
    http.download ("Data://xiazai.png");
}); [/mw_shl_code]

There are three buttons in the upper right corner. Click on the left number after the first button will pop up a lookup interface, find the interface of the search box by the TextField component implementation.

Click on the second button will pop-up scan two-dimensional code interface, the interface to achieve the function of scanning two-dimensional code, after successful prompt user scan success, two-dimensional code by the Do_barcodeview component implementation, implementation of the picture and implementation code as follows:

Code:

[Mw_shl_code=javascript,true]var NF = SM ("Do_notification");
Gets the Barcodeview instance object based on
the ID; var barcode = UI ("Do_barcodeview_1");
Start ();
function Start () {
    //start scan
    barcode.start (function (data, e) {
        //scan succeeded, execute callback function
        var result = Json.stringify (data); 
        Nf.alert ("Scan two-dimensional code success!") ", Finish)
    });
var btn = UI ("Btn_restart");
Btn.on ("Touch", function (data, e) {
    start ();
})
[/mw_shl_code]

Click on the third button, the interface will pop up a picture, and then press the button once, the picture disappears, the effect is as follows:

Video playback function

Click on the first page of any poster to enter the video playback interface, click the play button will play video, this feature by the Do_videoview component implementation, the effect and code implementation are as follows:

Code:

 [Mw_shl_code=javascript,true]var page = SM ("Do_page"); var app = SM ("Do_app"); var do_vide
Oview_1 = UI ("Do_videoview_1");
var do_button_1 = UI ("do_button_1");
var do_button_2 = UI ("Do_button_2");
var do_button_3 = UI ("Do_button_3");
Page.On ("Back", function () {app.closepage ()});
UI ("Action_back"). On ("Touch", function () {app.closepage ()});
        Do_button_1.on ("Touch", function (data, E) {if (Do_button_1.text = = "Play") {Do_videoview_1.play (0);
    Do_button_1.text = "Pause";
        else if (Do_button_1.text = "Paused") {do_videoview_1.pause ();
    Do_button_1.text = "Continue";
        else if (Do_button_1.text = "Continue") {Do_videoview_1.resume ();
    Do_button_1.text = "Pause";
}
});
    Do_button_2.on ("Touch", function (data, e) {do_button_1.text = "play";
Do_videoview_1.stop (); }); 
[/mw_shl_code] 

Click on the "poke, you like to see all Here" button, the main page will jump directly to the subscription page. The implementation of this feature relies on the exchange of data between pages, using the page component to define a EVENT1 event in the logical Code of the index page, calling the page component's fire function in the logical code of the Shouye page to trigger the Event1 event.

The effect chart is as follows:

The logical code is as follows:

Index page:

[Mw_shl_code=javascript,true]page.on ("Event1", function (data, e) {
    indexchange (2,do_slideview_1,do_button, action_imgs,action_lbs,imageview,do_button_3);
}; [/mw_shl_code]
Shouye page:
[Mw_shl_code=javascript,true]do_button_0.on ("Touch", function (data, E)
{
    Page.fire ("Event1 ","");
}); [/mw_shl_code]

The above mentioned is small set to introduce the JavaScript use Deviceone Development Combat (four) imitation Youku video applications, I hope you like.