×
Namespaces

Variants
Actions
Revision as of 03:58, 11 June 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Interactive buttons with onfocus event (Arabic)

From Nokia Developer Wiki
Jump to: navigation, search

وهذا المقال يوضح كيف إبراز عندما يتم الضغط عليهم. ويستخدم onfocs, onblur events.

Article Metadata
Tested with
SDK: Web Developer Toolkit 3.0 Beta
Devices(s): Nokia Asha 311, Nokia Asha 303
Compatibility
Platform(s): Series40 Touch&Type, Series40 FullTouch
Series 40
Series 40 DP 2.0
Series 40 DP 1.1
Article
Translated:
By bintk
Last edited: hamishwillee (11 Jun 2013)

Contents

المقدمة

نحن نريد ان تصبح استجابة الازرار عند ضغط المستخدم عليها داخل تطبيقات الويب أكثر استجابة

المشكله

في صفحات الويب العادية يمكننا استعمال css-pseudo-classes , ولكنها في متصفح الويب الحالي لا تعمل

الحل

We let the button-element handle the focus and blur events.

Asha-webapps-button-onfocus-onblur.png

Because we want instant feedback without a server roundtrip, we can use only the mwl-functions. We can use the mwl.switchclass() function to give the button a different css class. In the css class we can define a different background-color or a different backgroud-image.

<button id ="btnN" class="ui-button unpressed" name="buttonN" 
onfocus="mwl.switchClass('#btnN', 'unpressed', 'pressed');"
onblur="mwl.switchClass('#btnN', 'pressed', 'unpressed');"
onclick="doMyAction();">A Button-Element #btn2</button>

In the css file we need to define pressed and unpressed style in addition to the normal button style:

.unpressed {
background-image: url(../images/button_background.png);
background-repeat: repeat;
background-position: left top;
}
.pressed {
background-image: url(../images/buttonpr_background.png);
background-repeat: repeat;
background-position: left top;
}
.ui-button {
height: 35px;
padding-right: 8px;
padding-left: 8px;
color: #FFF;
text-decoration: none;
margin: 5px;
}

تحذير

تحذير انها تعمل بشكل مختلف علي الجهاز و المحاكي و تختلف بأختلاف نوع الجهاز سواء أجهزة اللمس فقط او اجهزة اللمس و الكتابه

This page was last modified on 11 June 2013, at 03:58.
68 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×