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. 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
Platform(s): Series40 Touch&Type, Series40 FullTouch
Series 40
Series 40 DP 2.0
Series 40 DP 1.1
By bintk
Last edited: hamishwillee (11 Jun 2013)



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


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


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


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.