مثال مسج واجهة المستخدم - مربع تلميح الأدوات (نصائح الأداة)
تخصيص، themable مربع تلميح أداة استبدال مربع تلميح الأدوات الأصلي.
لمزيد من التفاصيل عن عضو تلميح الأدوات، راجع وثائق API عضوا مربع تلميح الأدوات (تلميح الأدوات والقطعة) .
وظيفة الافتراضي
تحوم على الرابط، أو استخدام المفتاح Tab للدورة من خلال التركيز على كل عنصر.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم مربع تلميح الأدوات (نصائح الأداة) - الافتراضى وظيفة </ عنوان>
<وصلة يختلط = "أنماط" أ 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>
$ (وظيفة () {
$ (الوثيقة) .tooltip ()؛
})؛
</ script>
<نمط>
تسمية {
عرض: مضمنة كتلة.
عرض: 5em.
}
</ النمط>
</ رئيس>
<body>
<P> <a href="#" title="部件的名称"> التلميحات </a> في هذا الشأن يمكن أن تكون ملزمة لأي عنصر. عندما كنت تحوم فوق عنصر، سيتم عرض الممتلكات العنوان في مربع صغير بجانب عنصر، وأصلي على شكل مربع تلميح الأداة. </ P>
<P> ومع ذلك، لأنها ليست مربع تلميح الأدوات الأصلي لذلك يمكن تعريف الأساليب. الموضوع من قبل <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> شكل رولر </A> خلق ويمكن أيضا أن تحدد أنماط مربع وفقا لذلك تلميح الأدوات. </ P>
ويمكن أيضا أن تستخدم <P> مربع تلميح أداة لتشكيل عناصر لعرضه في كل المنطقة بعض المعلومات الإضافية. </ P>
<P> <تسمية = "عمر"> عمرك: </ التسمية> <إدخال معرف = "عمر" عنوان = ". ويستخدم العمر فقط لإحصائية"> </ P>
<P> تحوم فوق المنطقة المقابلة لعرض مربع تلميح الأداة. </ P>
</ الجسم>
</ HTML>
نمط مخصص
تحوم على الرابط، أو استخدام المفتاح Tab للدورة من خلال التركيز على كل عنصر.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم مربع تلميح الأدوات (نصائح الأداة) - نمط مخصص </ عنوان>
<وصلة يختلط = "أنماط" أ 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>
$ (وظيفة () {
$ (الوثيقة) .tooltip ({
الموقف: {
بلدي: "الوسط أسفل-20"،
في "مركز أعلى"،
استخدام: وظيفة (وظيفة، وردود الفعل) {
$ (هذا). المغلق (موقف)؛
$ ( "<div>")
.addClass ( "السهم")
.addClass (feedback.vertical)
.addClass (feedback.horizontal)
.appendTo (هذا)؛
}
}
})؛
})؛
</ script>
<نمط>
.ui-تلميح الأدوات، .arrow: بعد {
خلفية: أسود.
الحدود: 2px الصلبة أبيض؛
}
.ui-تلميح الأدوات {
الحشو: 10px 20px؛
اللون: أبيض؛
الحدود بين دائرة نصف قطرها: 20px؛
الخط: 14px جريء "هلفتيكا نويه"، بلا الرقيق؛
النص تحويل: الأحرف الكبيرة.
مربع الظل: 0 0 7px الأسود.
}
.arrow {
العرض: 70px؛
الطول: 16px؛
تجاوز: مخفي.
الموقف: مطلقة؛
اليسار: 50٪؛
هامش اليسار: -35px.
أسفل: -16px.
}
.arrow.top {
أعلى: -16px.
أسفل: السيارات.
}
.arrow.left {
اليسار: 20٪؛
}
.arrow: بعد {
المحتوى: ""؛
الموقف: مطلقة؛
اليسار: 20px؛
أعلى: -20px.
العرض: 25px؛
الطول: 25px؛
مربع الظل: 6px 5px 9px -9px الأسود.
-webkit-تحويل: تدوير (45deg)؛
-moz-تحويل: تدوير (45deg)؛
-ms-تحويل: تدوير (45deg)؛
-o-تحويل: تدوير (45deg)؛
tranform: تدوير (45deg)؛
}
.arrow.top: بعد {
أسفل: -20px.
أعلى: السيارات.
}
</ النمط>
</ رئيس>
<body>
<P> <a href="#" title="部件的名称"> التلميحات </a> في هذا الشأن يمكن أن تكون ملزمة لأي عنصر. عندما كنت تحوم فوق عنصر، سيتم عرض الممتلكات العنوان في مربع صغير بجانب عنصر، وأصلي على شكل مربع تلميح الأداة. </ P>
<P> ومع ذلك، لأنها ليست مربع تلميح الأدوات الأصلي لذلك يمكن تعريف الأساليب. الموضوع من قبل <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> شكل رولر </A> خلق ويمكن أيضا أن تحدد أنماط مربع وفقا لذلك تلميح الأدوات. </ P>
ويمكن أيضا أن تستخدم <P> مربع تلميح أداة لتشكيل عناصر لعرضه في كل المنطقة بعض المعلومات الإضافية. </ P>
<P> <تسمية = "عمر"> عمرك: </ التسمية> <إدخال معرف = "عمر" عنوان = ". ويستخدم العمر فقط لإحصائية"> </ P>
<P> تحوم فوق المنطقة المقابلة لعرض مربع تلميح الأداة. </ P>
</ الجسم>
</ HTML>
حركة مخصصة
يوضح هذا المثال كيفية استخدام إظهار وإخفاء خيارات لتخصيص الرسوم المتحركة، يمكنك أيضا استخدام الحدث مفتوحا لتخصيص الرسوم المتحركة.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم مربع تلميح الأدوات (نصائح الأداة) - الرسوم المتحركة مخصص </ عنوان>
<وصلة يختلط = "أنماط" أ 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>
$ (وظيفة () {
$ ( "# مشاهدة-خيار") .tooltip ({
العرض: {
الأثر: "slideDown"
التأخير: 250
}
})؛
$ ( "# إخفاء-خيار") .tooltip ({
إخفاء: {
الأثر: "تنفجر"،
التأخير: 250
}
})؛
$ ( "# المفتوح الحدث") .tooltip ({
العرض: باطل،
الموقف: {
بلدي: "اليسار العلوي"،
على العنوان التالي: "أسفل اليسار"
}،
فتح: وظيفة (الحدث، واجهة المستخدم) {
ui.tooltip.animate ({العلوي: ui.tooltip.position () أعلى + 10.}، "سريع")؛
}
})؛
})؛
</ script>
</ رئيس>
<body>
<P> وهناك عدد من الطرق لتخصيص تلميح الأدوات مربع الرسوم المتحركة. </ P>
<P> يمكنك استخدام <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> عرض </a> و <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> إخفاء </A> الخيار. </ P>
<P> يمكنك أيضا استخدام <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> مفتوحة </A> الحدث. </ P>
</ الجسم>
</ HTML>
المحتوى حسب الطلب
شرح كيفية تخصيص وحدات وخيارات المحتوى إلى الجمع بين مختلف مربع تلميح الأدوات مندوب الحدث لنسخة واحدة.
قد تحتاج إلى تعيين تلميحات الأدوات التفاعل مربع، وهي النسخة المقبلة من وظيفة إلى أن تتحقق.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم مربع تلميح الأدوات (نصائح الأداة) - محتوى مخصص </ عنوان>
<وصلة يختلط = "أنماط" أ 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">
<نمط>
.photo {
العرض: 300px؛
مواءمة النصوص: المركز؛
}
.photo .ui تطبيق مصغر-رأس {
هامش: 1em 0؛
}
.MAP {
العرض: 350px؛
الطول: 350px؛
}
.ui-تلميح الأدوات {
ماكس العرض: 350px؛
}
</ النمط>
<script>
$ (وظيفة () {
$ (الوثيقة) .tooltip ({
العناصر: "IMG، [الجغرافية البيانات]، [لقب]"،
المحتوى: وظيفة () {
عنصر فار = $ (هذا)؛
إذا (element.is ( "[البيانات الجغرافية]")) {
فار النص = element.text ()؛
عودة "<IMG الطبقة =" الخريطة "بديل =" + نص +
"" SRC = "HTTP: //maps.google.com/maps/api/staticmap؟" +
"تكبير = 11 & حجم = 350x350 & maptype = التضاريس واستشعار = كاذبة ومركز =" +
نص + ""> ".
}
إذا (element.is ( "[لقب]")) {
العودة element.attr ( "لقب")؛
}
إذا (element.is ( "IMG")) {
العودة element.attr ( "بديل")؛
}
}
})؛
})؛
</ script>
</ رئيس>
<body>
<فئة الدرجة = "واجهة المستخدم القطعة الصورة">
<فئة الدرجة = "واجهة المستخدم القطعة-رأس واجهة المستخدم الزاوية للجميع">
<H2> كاتدرائية سانت ستيفن (كاتدرائية سانت ستيفن) </ H2>
<H3> <a href="http://maps.google.com/maps؟q=vienna،+austria&؛z=11" data-geo=""> فيينا، النمسا (فيينا، النمسا) </A> < / H3>
</ div>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
على <img SRC = "../ الفسفور الابيض بين المحتوى / الإضافات / 2014/03 / ST-stephens.jpg" بديل = "القديس ستيفن كاتدرائية (سانت ستيفن وتضمينه في كاتدرائية)" الطبقة = "واجهة المستخدم الزاوية للجميع">
</A>
</ div>
<فئة الدرجة = "واجهة المستخدم القطعة الصورة">
<فئة الدرجة = "واجهة المستخدم القطعة-رأس واجهة المستخدم الزاوية للجميع">
<H2> جسر البرج (برج جسر) </ H2>
<H3> <a href="http://maps.google.com/maps؟q=london،+england&؛z=11" data-geo=""> لندن (لندن، انكلترا) </A> < / H3>
</ div>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
على <img SRC = "../ الفسفور الابيض بين المحتوى / الإضافات / 2014/03 / برج bridge.jpg" بديل = "جسر البرج (برج جسر)" الطبقة = "واجهة المستخدم الزاوية للجميع">
</A>
</ div>
<P> جميع الصور من <a href="http://commons.wikimedia.org/wiki/Main_Page"> يكيميديا كومنز </A>، ويملكها <لأ href = "http://creativecommons.org/ تراخيص / من قبل سا / 3.0 / deed.en "عنوان =" جميل عزو، بالمثل 3.0 "> CC BY-SA 3.0 </A> تحت صاحب حقوق الطبع. </ P>
</ الجسم>
</ HTML>
شكل
استخدام الزر أدناه لعرض التعليمات، أو مجرد السماح تحوم مؤشر الفأرة فوق مربع الإدخال أو لديك مربع الإدخال والتركيز، يمكنك عرض نص التعليمات مربع الإدخال المقابلة.
تحديد عرض ثابت في CSS، بحيث يعرض في وقت واحد كل نص التعليمات تبدو أكثر اتساقا.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم مربع تلميح الأدوات (نصائح الأداة) - نماذج </ عنوان>
<وصلة يختلط = "أنماط" أ 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">
<نمط>
تسمية {
عرض: مضمنة لبنة، العرض: 5em.
}
مجموعة حقول شعبة {
هامش القاع: 2em.
}
.help مجموعة حقول {
عرض: مضمنة كتلة.
}
.ui-تلميح الأدوات {
العرض: 210px؛
}
</ النمط>
<script>
$ (وظيفة () {
فار تلميحات = $ ( "[لقب]") .tooltip ()؛
$ ( "<زر>")
.text ( "عرض المساعدة")
.button ()
. انقر (وظيفة () {
tooltips.tooltip ( "فتح")؛
})
.insertAfter ( "شكل")؛
})؛
</ script>
</ رئيس>
<body>
<النموذج>
<مجموعة حقول>
<div>
<تسمية ل= "الاسم الأول"> اسم </ التسمية>
<إدخال معرف = "الاسم الأول" اسم = "الاسم الأول" عنوان = "يرجى تقديم اسمك الأول.">
</ div>
<div>
<تسمية ل= "اسم العائلة"> اسم العائلة </ التسمية>
<إدخال معرف = اسم "اسم العائلة" = "اسم العائلة" عنوان = "يرجى تقديم اسمك الأخير.">
</ div>
<div>
<تسمية ل= "عنوان"> عنوان </ التسمية>
<إدخال معرف = "عنوان" اسم = "عنوان" عنوان = "الخاص بك عنوان المنزل او العمل.">
</ div>
</ مجموعة حقول>
</ النموذج>
</ الجسم>
</ HTML>
تتبع الماوس
في مربع تلميح الأدوات هذه الحالة يتم وضع نسبة إلى الماوس، عندما يتحرك الماوس فوق العنصر، فإنه سيتم متابعة حركة الماوس.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم مربع تلميح الأدوات (نصائح الأداة) - تتبع الماوس </ عنوان>
<وصلة يختلط = "أنماط" أ 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">
<نمط>
تسمية {
عرض: مضمنة كتلة.
عرض: 5em.
}
</ النمط>
<script>
$ (وظيفة () {
$ (الوثيقة) .tooltip ({
المسار: صحيح
})؛
})؛
</ script>
</ رئيس>
<body>
<P> <a href="#" title="部件的名称"> التلميحات </a> في هذا الشأن يمكن أن تكون ملزمة لأي عنصر. عندما كنت تحوم فوق عنصر، سيتم عرض الممتلكات العنوان في مربع صغير بجانب عنصر، وأصلي على شكل مربع تلميح الأداة. </ P>
<P> ومع ذلك، لأنها ليست مربع تلميح الأدوات الأصلي لذلك يمكن تعريف الأساليب. الموضوع من قبل <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> شكل رولر </A> خلق ويمكن أيضا أن تحدد أنماط مربع وفقا لذلك تلميح الأدوات. </ P>
ويمكن أيضا أن تستخدم <P> مربع تلميح أداة لتشكيل عناصر لعرضه في كل المنطقة بعض المعلومات الإضافية. </ P>
<P> <تسمية = "عمر"> عمرك: </ التسمية> <إدخال معرف = "عمر" عنوان = ". ويستخدم العمر فقط لإحصائية"> </ P>
<P> تحوم فوق المنطقة المقابلة لعرض مربع تلميح الأداة. </ P>
</ الجسم>
</ HTML>
جهاز عرض فيديو
وهناك لاعب الفيديو الظاهري مع مثل حصة زر / / الإحصاء، كل زر مع مربع أنماط مخصصة تلميح الأدوات.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم مربع تلميح الأدوات (نصائح الأداة) - لاعب الفيديو </ عنوان>
<وصلة يختلط = "أنماط" أ 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">
<نمط>
.player {
العرض: 500px؛
الطول: 300px؛
الحدود: 2px الأخدود الرمادي.
الخلفية: RGB (200، 200، 200)؛
مواءمة النصوص: المركز؛
خط الطول: 300px؛
}
.ui-تلميح الأدوات {
الحدود: 1PX الصلبة أبيض؛
خلفية: رغبا (20، 20، 20، 1)؛
اللون: أبيض؛
}
. ضبط {
عرض: مضمنة كتلة.
}
.notification {
الموقف: مطلقة؛
عرض: مضمنة كتلة.
حجم الخط: 2em.
الحشو: .5em.
مربع الظل: 2px 2px 5px -2px رغبا (0،0،0،0.5)؛
}
</ النمط>
<script>
$ (وظيفة () {
وظيفة إعلام (المدخلات) {
جي اس فار = "مختارة" + $ .trim (input.data ( "تلميح الأدوات-لقب") || input.text ())؛
$ ( "<div>")
.appendTo (document.body)
.text (جي اس)
.addClass ( "إخطار واجهة المستخدم الافتراضية للدولة، واجهة المستخدم أسفل الزاوية")
.position ({
بلدي: "أعلى الوسط"،
في "مركز أعلى"،
من: نافذة
})
. تظهر ({
الأثر: "أعمى"
})
.delay (1000)
.hide ({
الأثر: "أعمى"،
مدة: "بطيء"
}، وظيفة () {
$ (هذا). إزالة ()؛
})؛
}
$ ( "زر"). كل (وظيفة () {
زر فار = $ (هذا) .button ({
الرموز: {
المرحلة الابتدائية: $ (هذا) .data ( "رمز")
}،
النص: !! $ (هذا) .attr ( "عنوان")
})؛
button.click (وظيفة () {
إعلام (زر)؛
})؛
})؛
$ ( ". ضبط") .buttonset ({
العناصر: "زر"
})؛
$ (الوثيقة) .tooltip ({
الموقف: {
بلدي: "أعلى الوسط"،
على العنوان التالي: "أسفل الوسط + 5"،
}،
العرض: {
مدة: "سريع"
}،
إخفاء: {
الأثر: "إخفاء"
}
})؛
})؛
</ script>
</ رئيس>
<body>
<div الطبقة = "لاعب"> هنا هو الفيديو (HTML5؟) </ div>
<div الطبقة = "أدوات">
<سبان الطبقة = "مجموعة">
<زر، رمز البيانات = "واجهة المستخدم رمز الدائرة السهم ن" عنوان = "أنا أحب هذا الفيديو"> مثل </ زر>
<زر، رمز البيانات = "واجهة المستخدم رمز الدائرة السهم ليالي"> أنا لا أحب هذا الفيديو </ زر>
</ SPAN>
<div الطبقة = "مجموعة">
<زر، رمز البيانات = "واجهة المستخدم رمز الدائرة زائد" عنوان = "إضافة إلى قائمة التشغيل"> إضافة إلى </ زر>
<الطبقة زر = "القائمة"، رمز البيانات = "واجهة المستخدم-رمز-مثلث-1-ق"> إضافة إلى المفضلة </ زر>
</ div>
<عنوان زر = "مشاركة هذا الفيديو"> مشاركة </ زر>
<زر، رمز البيانات = "واجهة المستخدم رمز تنبيه"> وضع علامة </ زر> غير ملائمة
</ div>
</ الجسم>
</ HTML>