UF iUAP Mobile はモバイル開発者に素早いコード作成ツールを提供_html/css_WEB-ITnose

要約: UFIDA iUAP Mobile によってもたらされた HTML/CSS コードクイック書き込みツールは、HTML/CSS コードの書き込み速度を大幅に向上させました。

UF iUAP Mobile モバイル プラットフォームは、社内コードネームで「夏」と名付けられた新しいバージョンをリリースしました。 Summer が提供する「エクストリーム ハイブリッド」モードは、HTML5 テクノロジーに基づいたクロスプラットフォーム モバイル アプリケーションの迅速な開発のための統合ソリューションを完全にサポートします。今後、開発者は HTML5+CSS3+JavaScript テクノロジーを使用して、ネイティブ アプリケーションと同等のモバイル アプリケーションを迅速に開発できるようになります。

iUAP Mobile は、次のデモに示すように、HTML/CSS コードの高速作成ツールを提供し、HTML/CSS コードの作成速度を大幅に向上させます:

iUAP Mobile でのコーディングのデモ

以下は、iUAP Mobile を直観的に示しています。開発者は誰でも、それがもたらす新機能の一部を体験できます。 (http://mobile.yyuap.com/)

1. HTMLコードを素早く記述します

テーマを変更します

開発環境に応じてテーマを変更できます

ツールバーの[ウィンドウ]-[環境設定]をクリックします] 】

で必要なテーマを設定します。

2. 初期化

HTML ドキュメントには、などの固定タグが含まれている必要があります。これらのタグを入力するのに必要なのは 1 秒だけです。たとえば、「!」または「html:5」と入力して Tab キーを押します。

html:5 または !: HTML5 ドキュメント タイプの場合

html:xt: XHTML トランジション ドキュメント タイプの場合

html:4s: HTML4 の厳密なドキュメント タイプの場合

3. クラス、ID、テキスト、属性を簡単に追加します

要素名と ID を続けて入力すると、iUAP Mobile が自動的に入力します (p#foo など)。

クラスを入力し、 p.bar#foo などの id を連続的に指定すると、次のものが自動的に生成されます。

HTML コード

HTML 要素のコンテンツと属性を定義する方法を見てみましょう。 h1{foo} と a[href=#] を入力すると、次のコードを自動的に生成できます:

Html コード

4. HTML コードをすばやく生成

コントロール挿入関数を右クリックしてプリセットをすばやく生成 さまざまなコントロール テンプレート コード。

5. ネスト

これで、タグをネストするのに必要なコードは 1 行だけです。

>: ネストされた要素を表す子要素シンボル

+: 兄弟ラベル シンボル

^: シンボルの前にラベルを 1 行進めることができます

効果は次の図に示すとおりです。

6.

(.foo>h1)+(.bar>h2) と入力するなど、ネストと括弧を使用していくつかのコード ブロックをすばやく生成できます。次のコードが自動的に生成されます:

HTML コード

暗黙的なタグ

宣言クラスタグの場合は、 div.item と入力するだけで

が生成されます。

過去のバージョンでは、div を省略できました。つまり、.item を入力して

を生成できました。 .item のみを入力すると、iUAP Mobile は親タグに基づいて判断します。たとえば、

に.itemと入力すると、

が生成されます。

以下はすべて暗黙のタグ名です:

li: ul および ol で使用されます

tr: table、tbody、thead、および tfoot で使用されます

td: tr で使用されます

option: select および optgroup で使用されます

複数の要素を定義する

複数の要素を定義するには、* 記号を使用できます。たとえば、ul>li*3 は次のコードを生成できます:

Html コード

9. 属性を持つ複数の要素を定義します

ul>li.item$*3 を入力すると、次のコードが生成されます:

HTML コード

2. CSS の略語

1. 値

たとえば、要素の幅を定義するには、w100 と入力するだけで

CSS コード

px に加えて、次のような他の単位も生成できます。 h10p+m5e と入力すると、結果は次のようになります:

CSS コード

ユニットのエイリアス リスト:

p は %

を意味します

e は em

を意味します

x は ex

を意味します

2 追加の属性

いくつかはすでにご存知かもしれません。生成可能な @f などの前の略語 :

CSS コード

その他の属性 (background-image、border-radius、font、@font-face、text-outline、text-shadow、その他の追加属性など)オプションは、@f+ を入力するなど、「+」記号を通じて生成できます。

Css コード

3. あいまい一致

いくつかの略語がわからない場合、iUAP Mobile は最も近い構文を照合します。 ov:h、ov-h、ovh および oh を入力するなど、入力に基づいて生成されるコードは同じです:

Css コード

4. サプライヤー プレフィックス

非 W3C 標準 CSS 属性を入力した場合、iUAPモバイルではサプライヤーのプレフィックスが自動的に追加されます。たとえば、「trs」と入力すると、次のものが生成されます。

Css コード

属性の前に「-」記号を追加したり、属性のプレフィックスを追加したりすることもできます。たとえば、 -super-foo と入力します:

CSS コード

すべてのプレフィックスを追加したくない場合は、省略形を使用して指定できます。たとえば、-wm-trf は、-webkit と -moz プレフィックスのみを追加することを意味します。

CSS コード

プレフィックス 略語は次のとおりです:

w は -webkit-

を意味します

m は -moz-

を意味します

s は -ms-

を意味します

o は -o-

を意味します

5 を意味します。 (左、 #fff 50%、 #000 )、次のコードが生成されます:

CSS コード

3. 追加機能

Lorem ipsum テキストの生成

Lorem ipsum は、植字デザインの分野で一般的に使用されるラテン語の記事を指します。主な目的は、記事やテキストがさまざまなフォントやレイアウトでどのように見えるかをテストすることです。 。 効果。 iUAP Mobile を使用すると、lorem または lipsum と入力するだけでこれらの単語を生成できます。 lorem10 のように単語の数を指定することもできます。これにより、次が生成されます。