Latest web development tutorials

مسج واجهة المستخدم سبيل المثال - شريط التقدم (Progressbar)

عرض عملية معينة أو حالة من عدم اليقين.

لمزيد من التفاصيل حول عضوا progressbar، راجع وثائق API عضوا شريط التقدم (Progressbar على القطعة) .

وظيفة الافتراضي

يتم تحديد الافتراضي شريط التقدم. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج شريط التقدم واجهة المستخدم (Progressbar) - وظيفة الافتراضي </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#progressbar") .progressbar ({
      القيمة: 37
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "progressbar"> </ div>
 
 
</ الجسم>
</ HTML>

تسمية مخصصة

التسمية تحديث مخصصة. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج شريط التقدم واجهة المستخدم (Progressbar) - تبويب مخصصة </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  .ui-progressbar {
    موقع: نسبي.
  }
  .progress التسمية {
    الموقف: مطلقة؛
    اليسار: 50٪؛
    أعلى: 4PX.
    الخط الوزن: جريئة؛
    النص الظل: 1PX 1PX 0 # الاتحاد الفرنسي.
  }
  </ النمط>
  <script>
  $ (وظيفة () {
    فار progressbar = $ ( "#progressbar")،
      progressLabel = $ ( ".progress التسمية")؛
 
    progressbar.progressbar ({
      القيمة: كاذبة،
      تغيير: وظيفة () {
        progressLabel.text (progressbar.progressbar ( "قيمة") + "٪")؛
      }،
      إكمال: وظيفة () {
        progressLabel.text ( "إكمال!")؛
      }
    })؛
 
    تقدم وظيفة () {
      فار فال = progressbar.progressbar ( "قيمة") || 0؛
 
      progressbar.progressbar ( "قيمة"، فال + 1)؛
 
      إذا (فال <99) {
        setTimeout (التقدم، 100)؛
      }
    }
 
    setTimeout (التقدم، 3000)؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "progressbar"> <div الطبقة = "التقدم التسمية"> التحميل ... </ div> </ div>
 
 
</ الجسم>
</ HTML>

قيمة غير محددة

شريط التقدم غير محدد، ويمكن التبديل بين نمط معين وغير مؤكد. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج شريط التقدم واجهة المستخدم (Progressbar) - قيمة غير محددة </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#progressbar") .progressbar ({
      القيمة: كاذبة
    })؛
    $ ( "زر") .على ( "فوق"، وظيفة (الحدث) {
      فار الهدف = $ (event.target)،
        progressbar = $ ( "#progressbar")،
        progressbarValue = progressbar.find ( ".ui-progressbar القيمة")؛
 
      إذا (target.is ( "#numButton")) {
        progressbar.progressbar ( "خيار"، {
          القيمة: Math.floor (Math.random () * 100)
        })؛
      } آخر إذا (target.is ( "#colorButton")) {
        progressbarValue.css ({
          "الخلفية": "#" + Math.floor (Math.random () * 16777215) .toString (16)
        })؛
      } آخر إذا (target.is ( "#falseButton")) {
        progressbar.progressbar ( "خيار"، "القيمة"، كاذبة)؛
      }
    })؛
  })؛
  </ script>
  <نمط>
  #progressbar .ui-progressbar القيمة {
    لون الخلفية: #CCC.
  }
  </ النمط>
</ رئيس>
<body>
 
<شعبة معرف = "progressbar"> </ div>
<زر معرف = "numButton"> قيمة عشوائية - موافق </ زر>
<زر معرف = "falseButton"> بالتأكيد </ زر>
<زر معرف = "colorButton"> ألوان عشوائية </ زر>
 
 
</ الجسم>
</ HTML>