party_bidプロジェクトの作成アクティビティ(board 1)
6886 ワード
party_bidはjavascriptとhtml 5で記述され、機能の実現にangularjsが用いられる.これはプラットフォームを自慢できるモバイルアプリケーションです.イベントでは、イベントの作成や携帯電話のメールを利用した応募活動やイベントの競売などの機能を利用します.
1.anjularjsとは何ですか.
AngularJSはオープンソース JavaScript函式ライブラリであり、Googleによって維持され、単一ページの適用としてよく知られている.ブラウザベースのアプリケーションを強化し、MVCモード(MVC)機能を備え、開発とテストを容易にすることを目的としています.
2.viewportウィンドウ適応
viewportとは--
携帯電話ブラウザは、ページを仮想的な「ウィンドウ」(viewport)に配置し、通常、この仮想的な「ウィンドウ」(viewport)は画面よりも広く、各ページを小さなウィンドウに押し込む必要がなく(携帯電話ブラウザに最適化されていないページのレイアウトを破壊する)、ユーザーはページの異なる部分を平行移動したり拡大したりすることができます.モバイル版のSafariブラウザは、viewportというmeta tagを最新に導入し、ウェブ開発者にviewportのサイズやスケールを制御させ、他の携帯電話ブラウザも基本的にサポートしている.
viewportを設定してページをデバイスの幅に合わせる
携帯電話のページにという言葉を入れることで、デバイスの幅にページを適応させることができます.
width=device-width--幅はデバイス幅で、ページ幅がデバイス幅より小さい場合は、このプロパティを変更する必要があります.そうしないと、ipad ios 7のクライアントページなどのページを左右にスライドさせることができます.
initial-scale-初期のスケール
user-scalableユーザーがスケールを変更できるかどうかを設定
minimum-scale最新スケーリングmaximum-scale最大スケーリングその他:window.デバイスPixelRatioデバイス物理ピクセルとWebピクセル-デバイス無関係ピクセルdevice-independent pixels(dips)の割合
3.javascriptコンストラクション関数
コンストラクション関数は、特定のタイプのオブジェクトを作成するために使用されます.使用されているオブジェクトだけでなく、コンストラクション関数はパラメータを受け入れて、初めてオブジェクトを作成したときにオブジェクトのメンバー値を設定することもできます.
JavaScriptでは、コンストラクション関数は通常、インスタンスを実装するために使用されると考えられていますが、JavaScriptにはクラスの概念はありませんが、特殊なコンストラクション関数があります.newキーワードで定義されたNo早関数を呼び出すと、JavaScriptに新しいオブジェクトを作成し、新しいオブジェクトのメンバー宣言がコンストラクション関数で定義されていることを伝えることができます.コンストラクション関数の内部で、thisキーは新しく作成されたオブジェクトを参照します.アクティビティの名前や、競合の申し込みを開始するかどうかなどの情報を、コンストラクション関数を使用してオブジェクトをインスタンス化します.
function newActivity()
{
this.name = $scope.put;
this.bid=0;
this.disabled=false;
this.biding="";
}
var newEvent=new newActivity();
以上の情報はnewEventオブジェクトに保存する."."オペレータは、特定のプロパティとメソッドにアクセスします.
newEvent.bid; //0
newEvent.disabled; //false
4.MVCモード
MVCモード(Model-View-Controller)はソフトウェアアーキテクチャモードであり、ソフトウェアシステムをモデル(Model)、ビュー(View)、コントローラ(Controller)の3つの基本部分に分ける.
(コントローラコントローラ)-要求を転送し、要求を処理します.関数と変数をControllerに配置し、コントローラをページにバインドすることで、ページに直接アクセスできます:
(ビューView)-インタフェースデザイナーがグラフィックインタフェースの設計を行います.
(モデルModel)-プログラマがプログラムを記述する機能(実装アルゴリズムなど)、データベース専門家がデータ管理とデータベース設計を行う(具体的な機能を実現できる).
5.html 5ローカルストレージ
localStorageは、アクティブにデータを削除しない限り、永続的なローカルストレージに使用されます.データは期限切れになりません.「≪アクティビティの作成|Create Activity|emdw≫」で、アクティビティの応募情報を格納します.
var eventList = JSON.parse(localStorage.getItem("localEventsLists")) || [];//データの読み込み
localStorage.setItem("list_disabled",JSON.stringify(newEvent));//ストレージデータ
6.ng-hideとng-show属性は、ボタンの表示と非表示を制御することができる.戻るボタンを非表示にするために使用する.
ng-disabled属性は、ボタンの状態を弾き出す、または弾かない状態に制御することができる.
入力ボックスの値を作成ボタンのng-disabledプロパティにバインドし、入力ボックスの内容が条件に合致したときに作成ボタンを弾きます.
ng-click属性は関数をバインドすることができ、クリック時にこの関数を実行する.
ng-repeatコンテンツレンダリング制御で、コンテンツを繰り返し反復できます.
ng-switchは、1つの値に基づいてどのノードが表示されるか、他のノードが除去されるかを決定する
ng-change値変更時にバインド関数を実行
7.haml
Hamlは、任意のXHTML web documentを記述するためのタグ言語であり、清潔で簡単である.また、コードを埋め込む必要もありません.Hamlの機能は、PHP、ERB(Railsのテンプレートシステム)、ASPなどのコードを埋め込んだpage page templating systemsに代わることです.しかし、hamlは、実際にはxhtmlの抽象的な記述であり、内部ではいくつかのcodeを使用して動的なコンテンツを生成するため、テンプレートに直接coding XHTMLを回避します.Hamlは簡潔で優美なテンプレート言語であり、Ruby on Rails、PHPなどのWeb開発プラットフォームに応用でき、テンプレートコードを大幅に削減し、冗長性を減らし、可読性を高めることができる.Hamlは、現在のテンプレート言語の特性を犠牲にしない完全なテンプレート言語です.HamlはHampton Catlinによって発明され,Ruby on Rails上の実装を開発した.
1.anjularjsとは何ですか.
AngularJSはオープンソース JavaScript函式ライブラリであり、Googleによって維持され、単一ページの適用としてよく知られている.ブラウザベースのアプリケーションを強化し、MVCモード(MVC)機能を備え、開発とテストを容易にすることを目的としています.
2.viewportウィンドウ適応
viewportとは--
携帯電話ブラウザは、ページを仮想的な「ウィンドウ」(viewport)に配置し、通常、この仮想的な「ウィンドウ」(viewport)は画面よりも広く、各ページを小さなウィンドウに押し込む必要がなく(携帯電話ブラウザに最適化されていないページのレイアウトを破壊する)、ユーザーはページの異なる部分を平行移動したり拡大したりすることができます.モバイル版のSafariブラウザは、viewportというmeta tagを最新に導入し、ウェブ開発者にviewportのサイズやスケールを制御させ、他の携帯電話ブラウザも基本的にサポートしている.
viewportを設定してページをデバイスの幅に合わせる
携帯電話のページにという言葉を入れることで、デバイスの幅にページを適応させることができます.
width=device-width--幅はデバイス幅で、ページ幅がデバイス幅より小さい場合は、このプロパティを変更する必要があります.そうしないと、ipad ios 7のクライアントページなどのページを左右にスライドさせることができます.
initial-scale-初期のスケール
user-scalableユーザーがスケールを変更できるかどうかを設定
minimum-scale最新スケーリングmaximum-scale最大スケーリングその他:window.デバイスPixelRatioデバイス物理ピクセルとWebピクセル-デバイス無関係ピクセルdevice-independent pixels(dips)の割合
3.javascriptコンストラクション関数
コンストラクション関数は、特定のタイプのオブジェクトを作成するために使用されます.使用されているオブジェクトだけでなく、コンストラクション関数はパラメータを受け入れて、初めてオブジェクトを作成したときにオブジェクトのメンバー値を設定することもできます.
JavaScriptでは、コンストラクション関数は通常、インスタンスを実装するために使用されると考えられていますが、JavaScriptにはクラスの概念はありませんが、特殊なコンストラクション関数があります.newキーワードで定義されたNo早関数を呼び出すと、JavaScriptに新しいオブジェクトを作成し、新しいオブジェクトのメンバー宣言がコンストラクション関数で定義されていることを伝えることができます.コンストラクション関数の内部で、thisキーは新しく作成されたオブジェクトを参照します.アクティビティの名前や、競合の申し込みを開始するかどうかなどの情報を、コンストラクション関数を使用してオブジェクトをインスタンス化します.
function newActivity()
{
this.name = $scope.put;
this.bid=0;
this.disabled=false;
this.biding="";
}
var newEvent=new newActivity();
以上の情報はnewEventオブジェクトに保存する."."オペレータは、特定のプロパティとメソッドにアクセスします.
newEvent.bid; //0
newEvent.disabled; //false
4.MVCモード
MVCモード(Model-View-Controller)はソフトウェアアーキテクチャモードであり、ソフトウェアシステムをモデル(Model)、ビュー(View)、コントローラ(Controller)の3つの基本部分に分ける.
(コントローラコントローラ)-要求を転送し、要求を処理します.関数と変数をControllerに配置し、コントローラをページにバインドすることで、ページに直接アクセスできます:
function ActivityListController($scope,$navigate)
{
if(!localStorage.localEventsLists)
{
$navigate.go("/creat_activity");
}
var temp = JSON.parse(localStorage.getItem("localEventsLists"));
$scope.yellow=temp.biding;
$scope.newList = JSON.parse(localStorage.getItem("localEventsLists") || []);
$scope.goto_signUpPage = function (list) {
localStorage.setItem("list_disabled",JSON.stringify(list));
$navigate.go("/sign_activity");
}
}
%li( ng-repeat="list in newList")
%a(style="background:{{list.biding}}" id="lists" ng-tap="goto_signUpPage(list)")
%h3() {{list.name}}(ビューView)-インタフェースデザイナーがグラフィックインタフェースの設計を行います.
(モデルModel)-プログラマがプログラムを記述する機能(実装アルゴリズムなど)、データベース専門家がデータ管理とデータベース設計を行う(具体的な機能を実現できる).
5.html 5ローカルストレージ
localStorageは、アクティブにデータを削除しない限り、永続的なローカルストレージに使用されます.データは期限切れになりません.「≪アクティビティの作成|Create Activity|emdw≫」で、アクティビティの応募情報を格納します.
var eventList = JSON.parse(localStorage.getItem("localEventsLists")) || [];//データの読み込み
localStorage.setItem("list_disabled",JSON.stringify(newEvent));//ストレージデータ
6.ng-hideとng-show属性は、ボタンの表示と非表示を制御することができる.戻るボタンを非表示にするために使用する.
ng-disabled属性は、ボタンの状態を弾き出す、または弾かない状態に制御することができる.
入力ボックスの値を作成ボタンのng-disabledプロパティにバインドし、入力ボックスの内容が条件に合致したときに作成ボタンを弾きます.
%input(id="put" ng-click="clear_put()" style="font-size:24px; width:60%;height:60px;" ng-model="put" ng-change="judge_repeat()")
%button(class="btn-large" style="width:40%" ng-tap="goto_signUpPage()" ng-disabled="put==' '||put==' '") ng-click属性は関数をバインドすることができ、クリック時にこの関数を実行する.
ng-repeatコンテンツレンダリング制御で、コンテンツを繰り返し反復できます.
%div()
%ul(class="list-style-1 " style="height:100% ")
%li( ng-repeat="list in newList")
%a(style="background:{{list.biding}}" id="lists" ng-tap="goto_signUpPage(list)")
%h3() {{list.name}}
ng-switchは、1つの値に基づいてどのノードが表示されるか、他のノードが除去されるかを決定する
ng-change値変更時にバインド関数を実行
7.haml
Hamlは、任意のXHTML web documentを記述するためのタグ言語であり、清潔で簡単である.また、コードを埋め込む必要もありません.Hamlの機能は、PHP、ERB(Railsのテンプレートシステム)、ASPなどのコードを埋め込んだpage page templating systemsに代わることです.しかし、hamlは、実際にはxhtmlの抽象的な記述であり、内部ではいくつかのcodeを使用して動的なコンテンツを生成するため、テンプレートに直接coding XHTMLを回避します.Hamlは簡潔で優美なテンプレート言語であり、Ruby on Rails、PHPなどのWeb開発プラットフォームに応用でき、テンプレートコードを大幅に削減し、冗長性を減らし、可読性を高めることができる.Hamlは、現在のテンプレート言語の特性を犠牲にしない完全なテンプレート言語です.HamlはHampton Catlinによって発明され,Ruby on Rails上の実装を開発した.