Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Interactive buttons with onfocus event (Arabic)

From 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.
194 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.

×